Animated Text with Staggered Effect

Text 22

About

This React code creates a reusable component that renders animated text with a staggered character appearance. It uses CSS animations and keyframes to achieve a visually appealing effect, layering two text elements for a 'sketch' and 'solid' look. The component is responsive and handles spacing dynamically.

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

Code

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

Usage.tsx

import AnimatedFollowerCount from "@/components/ui/animated-text-with-staggered-effect";
export default function DemoOne() {
  const animationKeyframes = `
    @keyframes fontSkew {
      0% { transform: skew(6deg, 0deg); }
      20% { transform: skew(-4deg, 0deg); }
      40% { transform: skew(8deg, 0deg); }
      60% { transform: skew(-6deg, 0deg); }
      80% { transform: skew(2deg, 0deg); }
      100% { transform: skew(-10deg, 0deg); }
    }
    @keyframes fontScale {
      0% { transform: scale(1); }
      20% { transform: scale(1.1); }
      40% { transform: scale(0.9); }
      60% { transform: scale(1.05); }
      80% { transform: scale(0.9); }
      100% { transform: scale(1.2); }
    }
  `;

  return (
    <div className="flex min-h-screen items-center justify-center bg-black text-white">
      {/* Import Google Fonts */}
      <link rel="preconnect" href="https://fonts.googleapis.com" />
      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
      <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@400&family=Londrina+Sketch&display=swap" rel="stylesheet" />
      
      {/* Inject Keyframes */}
      <style>{animationKeyframes}</style>

      <AnimatedFollowerCount />
    </div>
  );
}