Components
Loading preview...
- Splitted text with orchestrated delay animations ## Props · animation: opacity (by default) | top | bottom | left | right | z | blur · staggerDirection: start (by default) | middle | end · as: semantic html tag (default <span>)
@YoucefBnm
npx shadcn@latest add https://21st.dev/r/youcefbnm/text-stagger-hoverimport { TextStaggerHover,
TextStaggerHoverActive,
TextStaggerHoverHidden } from "@/components/ui/text-stagger-hover";
const DemoOne = () => {
return <div className="min-h-dvh w-full p-6 justify-center flex flex-col items-center space-y-4 text-center">
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"top"}
className="opacity-20 origin-top"
>
Stagger animation y
</TextStaggerHoverActive>
<TextStaggerHoverHidden
className="origin-bottom"
animation="bottom"
>
Stagger Animation y
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"right"}
className="opacity-20 origin-right"
>
Stagger animation x
</TextStaggerHoverActive>
<TextStaggerHoverHidden
className="origin-left"
animation="left"
>
Stagger Animation x
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"z"}
className="opacity-20"
>
Stagger animation z
</TextStaggerHoverActive>
<TextStaggerHoverHidden
animation="z"
>
Stagger Animation z
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"blur"}
className="opacity-20"
>
Stagger animation blur
</TextStaggerHoverActive>
<TextStaggerHoverHidden
animation="blur"
>
Stagger Animation blur
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"top"}
className="opacity-20"
staggerDirection="middle"
>
Stagger middle direction
</TextStaggerHoverActive>
<TextStaggerHoverHidden
className="origin-bottom"
animation="bottom"
staggerDirection="middle"
>
Stagger middle direction
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"right"}
className="opacity-20"
staggerDirection="start"
>
Stagger start direction
</TextStaggerHoverActive>
<TextStaggerHoverHidden
animation="left"
staggerDirection="end"
>
Stagger final direction
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"top"}
className="opacity-20"
staggerDirection="middle"
>
Stagger middle direction
</TextStaggerHoverActive>
<TextStaggerHoverHidden
className="origin-bottom"
animation="bottom"
staggerDirection="middle"
>
Stagger middle direction
</TextStaggerHoverHidden>
</TextStaggerHover>
<TextStaggerHover as="h2" className="text-3xl font-bold uppercase">
<TextStaggerHoverActive
animation={"top"}
className="text-slate-700"
>
Text Different Style
</TextStaggerHoverActive>
<TextStaggerHoverHidden
animation="bottom"
className="text-indigo-500"
>
Text Different Style
</TextStaggerHoverHidden>
</TextStaggerHover>
</div>
};
export { DemoOne };