# animations-21st skill Premium animated component patterns drawn from 21st.dev, Aceternity UI, and Magic UI. ## Animated grid background ```tsx
``` ## Spotlight hero ```tsx
{/* content */}
``` ## Marquee (infinite scroll) ```tsx
{items.map(i => )}
{items.map(i => )}
``` Tailwind config: ```js animation: { marquee: 'marquee 30s linear infinite' }, keyframes: { marquee: { from: { transform: 'translateX(0)' }, to: { transform: 'translateX(calc(-100% - var(--gap)))' } } } ``` ## Bento grid ```tsx
Large
Small
Small
Wide
``` ## Text reveal on scroll ```tsx const words = "Your headline goes here".split(' ');

{words.map((w, i) => ( {w} ))}

``` ## Noise overlay ```tsx
``` ## Cursor glow ```tsx const [pos, setPos] = useState({ x: 0, y: 0 }); useEffect(() => { const onMove = (e: MouseEvent) => setPos({ x: e.clientX, y: e.clientY }); window.addEventListener('mousemove', onMove); return () => window.removeEventListener('mousemove', onMove); }, []);
```