139 templates · 7 live demos · 45 free
Motion components.
Reusable animated UI components: text scramble and split reveals, custom cursors, preloaders, page transitions, magnetic buttons, marquees and hover effects.
CRT
One WebGL pass bends, scans and blooms any 2D canvas into a humming tube
Energy Orb
A living sphere of fbm smoke with a fresnel rim, soft halo and drifting starfield
Laser
One shader, four beam geometries: blade, array, aperture and relay
Liquid Form
A raymarched chrome body reshaped every frame by three octaves of simplex noise
Liquid Metal Button
A dispersion shader turns a plain pill into poured, prismatic chrome
Orbital Sphere
15,000 Fibonacci-sphere points, sculpted by trigonometric noise, circled by six orbits
Portal Field
Two warped ring SDFs glow into a private gate between systems
3D Character Rotate Reveal
Each letter rotates in 3D space on scroll, revealing words with depth
3D Coverflow Drag Carousel
Vinyl sleeves fan out in 3D coverflow, with reflective floor and drag-to-browse inertia
3D Letter Flip on Hover
Each character becomes a thin 3D card that flips to reveal an accent color, driven by CSS 3D transforms
Activity Ring Gauge Counter
Concentric progress rings sweep to their goals while numbers count up in the center
Agent Forge Node Editor
A draggable node-graph canvas where AI agents connect via animated bezier links with flow particles
Animated Film Grain Overlay
A featherweight film grain that shimmers over the whole page without touching the GPU budget
Animated Weather Icon Set
Living weather icons: drifting clouds, falling rain, pulsing sun and forked lightning
ASCII Portrait Hover
Contributor portraits render as live ASCII art that sharpens into the photo under the cursor
ASCII Shader Title
A glowing 3D title rendered entirely out of ASCII glyphs that ripple around the cursor
Cellular Automaton Transition
Pages dissolve and reassemble via a Game-of-Life-like cellular automaton
Chromatic Aberration Hover
Images split into RGB channels that shift independently on hover, like a lens defect
Chromatic Glitch Text
RGB channels split and shift on interaction, revealing a glitchy spectral depth
Circuit Trace Preloader
PCB traces etch themselves into existence, branching like lightning until the logo completes the circuit
Click-Origin Circle Transition
Page changes burst outward as a circle from exactly where you clicked, carrying the next colour
Clip-Path Route Wipe
Page transitions that wipe in angled panels, carrying the next page title across the screen
Cloth Drape Page Transition
A simulated cloth falls and lifts between routes, wrinkles and all
CMYK Halftone Image Hover
Athlete photos sit as bold halftone prints and snap to full-colour photos on hover
Column Counter Preloader
A giant 0–100 counter with rolling digit columns, then the screen splits into shutters
Compass Target Cursor
A minimal cursor ring with a needle that points to the nearest interactive element
Confetti Burst Checkbox
Checking a pledge draws a hand-inked tick and bursts seeds of confetti from the box
Context Label Cursor
A cursor that morphs into verbs: View, Drag, Play, Open, reading what you hover
Crossed Tape Marquee
Two caution-tape marquees cross in an X and scroll in opposite directions
Crosshair Coordinate Cursor
A surveyor's crosshair cursor with full-bleed hairlines and live coordinate readouts
CRT Scanline Post Overlay
Turn any page into a glowing CRT: curvature, scanlines, phosphor mask and rolling interference
Cube Rotation Page Transition
Pages transition by rotating a 3D cube, each face a route
Day-Night Theme Toggle
A pill switch where the sun sets behind hills and the moon rises with twinkling stars
Depth Parallax Hover
Images with depth maps reveal 3D parallax on hover, like looking through a window
Drag-to-Dismiss Bottom Sheet
A springy bottom sheet with snap points, rubber-banding and a backdrop that tracks the drag
Dynamic Island Notification
A pill-shaped notch that morphs open into rich notifications and collapses back with springs
Elastic Cursor Band
A cursor that stretches an elastic band toward the nearest interactive element, snapping on hover.
Faded Logo Wall Marquee
Two rows of client logos glide in opposite directions with soft edge fades and hover focus
Feature Flag Ripple Toggle
A satisfying toggle that visualizes rollout impact with an expanding ripple wave
FLIP Card-to-Modal Expand
Room cards grow seamlessly into a full booking modal with spring physics and a shared image
Flip Clock Countdown
A festival countdown in heavy flip-clock cards that fold each second with depth and shadow
Fluid Fill Preloader
A realistic liquid simulation fills your logo mark, driven by a Navier-Stokes shader
Fluid Ink Cursor
Move the mouse and real-time fluid ink blooms across the page in two brand colours
Fold Paper Page Transition
Pages fold like origami — each panel rotates in 3D to reveal the next route
Frosted Glass Parallax Card
A frosted glass card floats over a mountain photo, with layers that shift in depth on tilt
Generative Grid Preloader
A grid of cells that fill with animated noise, revealing the site when complete
Glyph Wave Propagation
A traveling sine wave ripples through variable-font glyphs, modulating weight, width and vertical offset
Gooey Blob Cursor
A liquid cursor made of trailing blobs that melt together and swallow hovered links
Questions
Which frameworks?+
Most components are framework-agnostic or React; each prompt states its stack and outputs typed, accessible code.