Animation Playground
Interactive explorations of web animation — CSS, Framer Motion, GSAP, and Three.js.
Perspective
Explore CSS 3D perspective — depth, vanishing points, and the perspective-origin property.
Transform
Compose CSS transforms: scale, rotate, skew, translate, and their interaction order.
Translation
Animate elements along paths with fine-grained easing and timing control.
Spring Physics
Tune spring stiffness, damping, and mass to feel how physical systems behave.
Gesture & Drag
Draggable elements with momentum, velocity, and elastic constraints.
Particle Systems
Raw canvas particle simulation — count, gravity, trails, and color fields.
Tilt Card
Cursor-driven 3D tilt using CSS perspective + rotateX/rotateY. perspective() sets the viewer's eye distance from z=0 — without it, 3D rotations look flat. Lower values exaggerate depth; higher values flatten it. Lerp-smoothed in a RAF loop with a radial shine that tracks the cursor.
Mouse-Driven Transforms
Same 9 elements, same properties — triggered two ways. Left grid: CSS transitions fire on hover. Right grid: scale, glow, and color lerp continuously from global cursor distance.
Particle Text Shader
Particles form text via WebGL gl.POINTS and a GLSL circle shader. Mouse hover scatters them with a radial force field — spring physics pulls them back to formation.
Particle CTA
The particle text shader as a real call-to-action: particles sampled from a live <h2>'s layout, font and per-span color, over plain accessible HTML.
SVG Path Morphing
Morph between SVG polygon shapes — GSAP tweens a proxy value and onUpdate interpolates vertex coordinates.
Scroll-Driven
Per-element scroll tracking with useScroll — six different effects fire as each card enters the viewport.
3D Scene
Vanilla Three.js scene with geometry switching, lighting controls, wireframe mode, and OrbitControls.
Clip-Path Reveals
Animate clip-path polygons and circles for dramatic reveal transitions. Click panels to toggle.
CSS Custom Properties
Side-by-side demo showing why @property registration enables smooth gradient interpolation.
Easing Visualizer
Plot cubic-bezier curves on canvas, scrub the animation, and compare 8 built-in presets.
Individual Transforms
rotate, scale, and translate as standalone CSS properties — they don't clobber each other. Hover the spinning elements to see why that matters.
Filter Effects
GPU-accelerated blur, brightness, saturation, contrast, and hue-rotate — composable in a single filter declaration.
Opacity & Visibility
Three ways to hide an element — only opacity animates. Watch which ones collapse the layout and which preserve it.
Rolling Text
Each character is an overflow-hidden slot holding two chars stacked vertically. Hover slides the column up, swapping words character by character with a staggered cascade.
CSS Masking
mask-image with a radial gradient tracks the cursor — a lerp-smoothed blob reveals a colorful layer beneath a dark overlay. Feather controls edge softness.
3D Particle Cloud
Thousands of points rendered with THREE.Points — a single draw call regardless of count. Vertex colors gradient from center to edge. Drag to orbit, scroll to zoom.
Flow Field
Particles follow directions sampled from a Perlin noise field. The field evolves over time — toggle the vector grid to see the underlying flow directions.
Cloth Simulation
Spring-mass grid with Verlet physics. Top row pinned — drag the cloth to pull it. Release pins to watch it fall. Controls for gravity, wind, friction, and stiffness.