Text Stagger Hover

Text 213

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Stagger Hover to your project and fits it to your theme.

Code

How Text Stagger Hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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 };