feat: improve props (#172)

animata/background/animated-beam.tsx

@@ -85,9 +85,15 @@ function Background() {
   );
 }
 
-export default function AnimatedBeam({ children }: { children: React.ReactNode }) {
+export default function AnimatedBeam({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
-    <div className="storybook-fix relative w-full overflow-hidden">
+    <div className={cn("storybook-fix relative w-full overflow-hidden", className)}>
       <Background />
       <div className="relative h-full w-full">{children}</div>
     </div>

animata/background/dot.tsx

@@ -23,6 +23,8 @@ interface DotProps {
    * Class name
    */
   className?: string;
+
+  style?: React.CSSProperties;
 }
 
 function Placeholder() {
@@ -39,11 +41,14 @@ export default function Dot({
   spacing = 10,
   children,
   className,
+  style = {
+    backgroundColor: "white",
+  },
 }: DotProps) {
   return (
     <div
       style={{
-        backgroundColor: "white",
+        ...style,
         backgroundImage: `radial-gradient(${color} ${size}px, transparent ${size}px)`,
         backgroundSize: `calc(${spacing} * ${size}px) calc(${spacing} * ${size}px)`,
       }}

animata/background/grid.tsx

@@ -13,6 +13,8 @@ interface GridProps {
    * Content of the component
    */
   children?: React.ReactNode;
+
+  className?: string;
 }
 
 function Placeholder({ size = 20 }: Pick<GridProps, "size">) {
@@ -32,14 +34,15 @@ function Placeholder({ size = 20 }: Pick<GridProps, "size">) {
   );
 }
 
-export default function Grid({ color = "#cacaca", size = 20, children }: GridProps) {
+export default function Grid({ color = "#cacaca", size = 20, children, className }: GridProps) {
   return (
     <div
       style={{
         backgroundColor: "white",
         backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(to right, ${color} 1px, transparent 1px)`,
         backgroundSize: `${size}px ${size}px`,
       }}
+      className={className}
     >
       {children ?? <Placeholder size={size} />}
     </div>

animata/background/interactive-grid.tsx

@@ -147,17 +147,25 @@ function Grid() {
   );
 }
 
-export default function InteractiveGrid({ children }: { children: React.ReactNode }) {
+export default function InteractiveGrid({
+  children,
+  className,
+  contentClassName,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+}) {
   return (
     <div
-      className="storybook-fix relative h-full w-full overflow-hidden rounded-3xl"
+      className={cn("storybook-fix relative h-full w-full overflow-hidden rounded-3xl", className)}
       style={{
         backgroundImage:
           "linear-gradient(123deg, transparent 0%, transparent 36%,rgba(17, 17, 57,0.02) 36%, rgba(17, 17, 87,0.02) 56%,transparent 56%, transparent 100%),linear-gradient(251deg, transparent 0%, transparent 68%,rgba(3, 3, 3,0.02) 68%, rgba(3, 3, 93,0.02) 99%,transparent 99%, transparent 100%),linear-gradient(135deg, rgb(200,215,255),rgb(205,215,255))",
       }}
     >
       <Grid />
-      <div className="relative mx-auto h-full w-fit">{children}</div>
+      <div className={cn("relative mx-auto h-full w-fit", contentClassName)}>{children}</div>
     </div>
   );
 }

animata/card/github-card-shiny.tsx

@@ -2,8 +2,9 @@ import { useCallback, useRef } from "react";
 import { CheckCircle2 } from "lucide-react";
 
 import { useMousePosition } from "@/hooks/use-mouse-position";
+import { cn } from "@/lib/utils";
 
-export default function GithubCardShiny() {
+export default function GithubCardShiny({ className }: { className?: string }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
 
@@ -25,7 +26,10 @@ export default function GithubCardShiny() {
   return (
     <div
       ref={containerRef}
-      className="group relative min-w-96 overflow-hidden rounded-md border border-zinc-500 bg-zinc-700 p-10 text-zinc-200 shadow-lg"
+      className={cn(
+        "group relative min-w-96 overflow-hidden rounded-md border border-zinc-500 bg-zinc-700 p-10 text-zinc-200 shadow-lg",
+        className,
+      )}
     >
       <div
         ref={overlayRef}

animata/card/github-card-skew.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 
 import { useMousePosition } from "@/hooks/use-mouse-position";
+import { cn } from "@/lib/utils";
 
 function calculateCardRotation({
   currentX,
@@ -34,7 +35,7 @@ function calculateCardRotation({
   return { rotationX, rotationY };
 }
 
-export default function GithubCardSkew() {
+export default function GithubCardSkew({ className }: { className?: string }) {
   const containerRef = useRef<HTMLDivElement>(null);
   const resetRef = useRef<NodeJS.Timeout>();
 
@@ -61,7 +62,10 @@ export default function GithubCardSkew() {
   return (
     <div
       ref={containerRef}
-      className="flex max-w-80 transform-gpu flex-col gap-4 rounded-3xl border border-zinc-500 bg-zinc-900 p-10 text-zinc-200 shadow-lg transition-transform ease-linear will-change-transform"
+      className={cn(
+        "flex max-w-80 transform-gpu flex-col gap-4 rounded-3xl border border-zinc-500 bg-zinc-900 p-10 text-zinc-200 shadow-lg transition-transform ease-linear will-change-transform",
+        className,
+      )}
       style={{
         transform: "perspective(400px) rotateX(var(--x)) rotateY(var(--y))",
         transitionDuration: "50ms",

animata/card/led-board.tsx

@@ -43,6 +43,86 @@ const charMap: Record<string, number[][]> = {
     [0, 0],
     [0, 0],
   ],
+  0: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  1: [
+    [0, 0, 1],
+    [0, 1, 1],
+    [1, 0, 1],
+    [0, 0, 1],
+    [0, 0, 1],
+    [0, 0, 1],
+  ],
+  3: [
+    [1, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [0, 0, 1, 1, 0],
+    [0, 0, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  2: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 1, 0, 0, 0],
+    [1, 1, 1, 1, 1],
+  ],
+  4: [
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 1],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 0, 1],
+  ],
+  5: [
+    [1, 1, 1, 1, 1],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 0, 1],
+    [1, 1, 1, 1, 0],
+  ],
+  6: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 0],
+    [1, 0, 0, 0, 0],
+    [1, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  7: [
+    [1, 1, 1, 1, 1],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 1, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+    [0, 0, 1, 0, 0],
+  ],
+  8: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 0],
+  ],
+  9: [
+    [0, 1, 1, 1, 0],
+    [1, 0, 0, 0, 1],
+    [1, 0, 0, 0, 1],
+    [0, 1, 1, 1, 1],
+    [0, 0, 0, 0, 1],
+    [0, 0, 0, 0, 1],
+  ],
 };
 
 function createMatrix(rows: number, cols: number) {

animata/hero/hero-section.tsx

@@ -8,7 +8,7 @@ import animataImage from "@/public/android-chrome-192x192.png";
 import TypingText from "../text/typing-text";
 import WaveReveal from "../text/wave-reveal";
 import Cycling from "../widget/cycling";
-import DirectionCard, { testProps } from "../widget/direction-card";
+import DirectionCard, { testDirectionProps } from "../widget/direction-card";
 import WaterTracker from "../widget/water-tracker";
 
 // Button Component
@@ -62,7 +62,7 @@ function Card({ card, index, stackAlign }: { card: string; index: number; stackA
       case "card2":
         return (
           <>
-            <DirectionCard {...testProps} />
+            <DirectionCard {...testDirectionProps} />
             <CardLabel text="Direction Card" />
           </>
         );

animata/text/mirror-text.tsx

@@ -4,6 +4,7 @@ export default function MirrorText({
   text = "This is a text",
   className,
   direction = "up",
+  containerClassName,
 }: {
   text: string;
   className?: string;
@@ -12,6 +13,8 @@ export default function MirrorText({
    * @default "up"
    */
   direction?: "up" | "down" | "left" | "right";
+
+  containerClassName?: string;
 }) {
   const animation = cn("transition-all duration-500 ease-slow", {
     "group-hover:-translate-y-4": direction === "up",
@@ -27,7 +30,12 @@ export default function MirrorText({
   );
 
   return (
-    <div className="group relative w-full justify-end overflow-hidden p-6 text-foreground">
+    <div
+      className={cn(
+        "group relative w-full justify-end overflow-hidden p-6 text-foreground",
+        containerClassName,
+      )}
+    >
       <div className={cn("h-3 overflow-hidden delay-200", animation)}>{content}</div>
       <div className={cn("h-3 overflow-hidden delay-100", animation)}>{content}</div>
       <div className={cn("h-3 overflow-hidden delay-75", animation)}>{content}</div>

animata/text/split-text.tsx

@@ -2,15 +2,26 @@ import { useRef, useState } from "react";
 
 import { cn } from "@/lib/utils";
 
-export default function SplitText({ text = "ANIMATA" }: { text: string }) {
+export default function SplitText({
+  text = "ANIMATA",
+  className,
+}: {
+  text: string;
+  className?: string;
+}) {
   const [activeIndex, setIndex] = useState<number>();
   const timer = useRef<NodeJS.Timeout>();
 
   const letterClassName =
     "inline h-1/2 select-none overflow-y-hidden leading-none transition-all duration-300 ease-out whitespace-pre";
 
   return (
-    <div className={"relative mx-auto cursor-sword text-9xl font-black uppercase text-yellow-500"}>
+    <div
+      className={cn(
+        "relative mx-auto cursor-sword text-4xl font-black uppercase text-yellow-500 md:text-5xl lg:text-9xl",
+        className,
+      )}
+    >
       {/** add hidden text so that we maintain the size for any text */}
       <div className="invisible leading-none">{text}</div>
       <div className="absolute top-0 flex h-full">

animata/widget/direction-card.stories.tsx

@@ -1,4 +1,4 @@
-import DirectionCard, { testProps } from "@/animata/widget/direction-card";
+import DirectionCard, { testDirectionProps } from "@/animata/widget/direction-card";
 import { Meta, StoryObj } from "@storybook/react";
 const meta = {
   title: "Widget/Direction Card",
@@ -14,5 +14,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
-  args: testProps,
+  args: testDirectionProps,
 };

animata/widget/direction-card.tsx

@@ -4,11 +4,19 @@ import { ArrowUp, CornerUpLeft, CornerUpRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
+interface Direction {
+  distance: number;
+  direction: string;
+  to: string;
+  iconType: ElementType;
+}
+
 interface IDirectionCardProps {
   directionValues: Direction[];
+  duration?: number;
 }
 
-export const testProps: IDirectionCardProps = {
+export const testDirectionProps: IDirectionCardProps = {
   directionValues: [
     {
       distance: 350,
@@ -37,15 +45,10 @@ export const testProps: IDirectionCardProps = {
   ],
 };
 
-interface Direction {
-  distance: number;
-  direction: string;
-  to: string;
-  iconType: ElementType;
-}
-
-const duration = 5000;
-function DirectionCard({ directionValues = testProps.directionValues }: IDirectionCardProps) {
+function DirectionCard({
+  directionValues = testDirectionProps.directionValues,
+  duration = 5000,
+}: IDirectionCardProps) {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [iconState, setIconState] = useState({
     prevIconType: directionValues[directionValues.length - 1].iconType,
@@ -75,9 +78,9 @@ function DirectionCard({ directionValues = testProps.directionValues }: IDirecti
         return newIndex;
       });
       setProgress(0);
-    }, duration);
+    }, duration ?? 5000);
 
-    const progressIncrement = 100 / (duration / 100);
+    const progressIncrement = 100 / ((duration ?? 5000) / 100);
     const progressInterval = setInterval(() => {
       setProgress((prevProgress) => {
         if (prevProgress >= 100) {
@@ -91,7 +94,7 @@ function DirectionCard({ directionValues = testProps.directionValues }: IDirecti
       clearInterval(changeDirectionInterval);
       clearInterval(progressInterval);
     };
-  }, [directionValues]);
+  }, [directionValues, duration]);
 
   const currentDirection = directionValues[currentIndex];