An effect where given text has the mirror/clone text and follows it.
tailwind.config.js
theme: { extend: { colors: { foreground: "hsl(var(--foreground))", } }, },
It will create a new file called mirror-text.tsx inside the components/animata/text directory.
mirror-text.tsx
components/animata/text
mkdir -p components/animata/text && touch components/animata/text/mirror-text.tsx
Open the newly created file and paste the following code:
import { cn } from "@/lib/utils"; export default function MirrorText({ text = "This is a text", className, direction = "up", containerClassName, }: { text: string; className?: string; /** * The direction of the animation * @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", "group-hover:translate-y-4": direction === "down", "group-hover:-translate-x-4": direction === "left", "group-hover:translate-x-4": direction === "right", }); const content = ( <div className={cn("inline-block text-4xl font-light uppercase leading-none", className)}> {text} </div> ); return ( <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> <div className={animation}>{content}</div> </div> ); }
Built by hari