Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/uniquesonu/animated-text-with-staggered-effectimport 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>
);
}