Docs
Mirror Text
An effect where given text has the mirror/clone text and follows it.
requires interactionhover
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/mirror-text.jsonManual
Run the following command
It will create a new file called mirror-text.tsx inside the components/animata/text directory.
mkdir -p components/animata/text && touch components/animata/text/mirror-text.tsxPaste the code
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 duration-500 ease-slow", {
"group-hover/mirror:-translate-y-4": direction === "up",
"group-hover/mirror:translate-y-4": direction === "down",
"group-hover/mirror:-translate-x-4": direction === "left",
"group-hover/mirror: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/mirror relative w-fit 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>
);
}Credits
Built by hari