Ten live demos of page-load, scroll, hover, and transition techniques — replay each effect, then read the exact code in three layers: CSS, Vanilla JS, and React + Framer Motion.
Orchestrate a hero entrance with per-element delay — opacity + translateY via WAAPI, mimicking a landing page first paint.
Build, deploy, iterate — all from one terminal.
Cards fade and slide in when they enter the viewport — powered by IntersectionObserver with a threshold trigger.
Animate a grid of items with incremental delay — adjust the stagger interval and replay to see the cascade effect.
Split a heading into words and letters, then mask-reveal each character with a stagger — common hero headline technique.
Scroll inside the box — background layers move at different speeds via translate3d and a rAF-throttled scroll handler.
Layered depth creates the illusion of space. Each layer translates proportional to scroll offset multiplied by its speed factor.
Keep parallax subtle — large offsets cause motion sickness and jank on low-end devices.
Prefer transform over top/margin to stay on the compositor thread.
End of scroll content — layers should have shifted noticeably by now.
A sticky progress bar fills as you scroll — uses CSS scroll-driven animation where supported, JS fallback otherwise.
Scroll to watch the progress bar fill. The counter updates in sync with scroll position inside this container.
Scroll-driven animations tie keyframes directly to scroll progress — no scroll listeners needed in supporting browsers.
Pair with sticky positioning for reading-progress indicators, chapter markers, or timeline scrubbers.
Keep the sticky element lightweight — only animate transform and opacity for smooth 60 fps.
Almost there — the bar should be nearly full at this point.
End of content. Progress should read 100%.
Pointer-driven polish — a magnetic button that follows the cursor, and a card that tilts in 3D toward your pointer.
Pointer events drive a draggable chip with press-scale feedback and spring-back on release. Keyboard: focus the chip, use ← → to move.
Drag with pointer or use arrow keys when focused. Press scales down; release springs back.
Simulate route changes — crossfade + slide between two panels. Uses View Transitions API when available, WAAPI fallback otherwise.
Your projects, recent activity, and quick actions live here.
Profile, notifications, API keys, and theme preferences.
Respect prefers-reduced-motion — swap elaborate motion for simple fades. Animate only transform and opacity when possible.
Compositor-friendly properties (transform, opacity) skip layout and paint — they run on the GPU thread. Avoid animating width, height, top, or margin in hot paths.