Kinetics components

A library of interface animations built on spring physics instead of fixed-duration easing.

Components: 161
Framework: HTML/CSS
Stack: HTML/CSS
GitHub stars: 582
Source: https://github.com/ckissi/kinetics
Website: https://kinetics.colorion.co

All Kinetics components

3D Cube Rotate: Click to roll a face in with depth
Typewriter: Types and deletes through a list with a blinking caret
Accordion Spring: Max-height transition with rotating chevron
Activity Ledger: Fresh events arrive sharply while older entries compact
Agent Handoff: One agent hands the live context to the next along a trace
Anamorphic Flare: A point source rakes the frame and blooms horizontal streaks
Aurora Drift: Soft blurred colour fields drift and rotate forever
Badge Counter: Count springs on every add
Battery Charge: Fill climbs as the bolt pulses
Before After: Drag the handle to wipe between layers
Bento Expand: Hover focuses one tile; the rest quietly recede
Bookmark Toggle: Ribbon fills and drops in on save
Border Beam: A light sweeps the border via a masked conic gradient
Bouncing Ball: Squash-and-stretch drop with a reactive shadow
Breathing Orb: A glowing orb scales and softens on an endless breath — pure CSS
Card Resize: Height spring with no JS layout thrash
Caustic Glass: Shifting light pools refract beneath frosted glass
Checkbox Draw: The tick is drawn with an animated SVG stroke
Checksum Bloom: A verification string resolves from noise to trust
Choice Chips: Toggle filters that pop as they switch on and off
Chromatic Split: Type separates into prismatic channels, then snaps back
Circuit Breaker: A physical arm throws closed, open, then half-open to probe
Clip Wipe: Overlay unmasks left-to-right with clip-path
Command Palette Bloom: A compact trigger unfolds into a staggered action lens
Confetti Burst: Radially-distributed particles with randomized arc and spin
Confidence Settle: A score overshoots, then settles on the true value
Contextual Dock: Nearby controls swell in a soft focus field
Copy Button: Icon crossfades to a check and the label swaps, then reverts
Countdown Ring: Drains a circular ring as the seconds tick down
Cursor Spotlight: Radial glow follows the pointer across a contained surface
Cursor Trail: A chain of dots chases the pointer with eased lag
Delayed Tooltip: Appears after a pause, disappears instantly on exit
Depth Stack: Layered cards fan apart on hover
Directional Hover
Dither Bloom: A low-bit dot field grows into a soft spectral bloom
Drag Stack Collect: Loose items gather into a fanned pile under the pointer
Drag To Dismiss: Pointer-tracked drag, snaps back or flies off past threshold
E Ink Refresh: A full inverse flash, then the type settles into the paper
Echo Receipt: Acknowledgement ripples through three trust layers
Elastic Lasso: Drag a selection field across the constellation
Elastic Progress: Bar overshoots target width slightly before settling
Equalizer Bars: Phase-offset bars pump like an audio meter — pure CSS
Error Shake: Decaying horizontal oscillation, retriggerable
Expanding Search: Field grows on hover or focus, glide easing
Ferrofluid Crown: A magnetic core raises a ring of liquid-metal spikes
Filmstrip Scrubber: A playhead snaps to the frame nearest the pointer
Flip Card: Two faces share a 3D space and rotate on click
Float Bob: A card hovers and bobs with a shadow that breathes beneath — pure CSS
Floating Label: Placeholder lifts into a label on focus — pure CSS
Focus Relay: A shared focus ring leaps between fields with a spring morph
Folding Doors: Two panels swing open in 3D on hover
Gesture Chord: Tap the keys in sequence to arm a shortcut
Gesture Compass
Glitch Text: RGB-split copies clip and jitter on hover — pure CSS
Gradient Border Morph: A rotating conic gradient creates a living border — pure CSS
Gradient Shimmer Text: A light band flows through clipped gradient text — pure CSS
Heartbeat Monitor: Glowing dot traces an EKG along the path
Hold To Confirm: Press and hold; a ring fills, release early to cancel
Hold To Talk: A live waveform blooms while you hold, then commits on release
Hover Intent Gate: A deliberate hover quietly unlocks the action
Hover Lift: Surface rises with a soft cast shadow
Icon Morph Swap: Outgoing icon blurs and rotates out, incoming settles in
Indeterminate Bar: Looping sweep for unknown-length work
Inertial Dial: A weighted needle catches up after the ring turns
Jelly Wobble: Squash-and-stretch settle on hover
Keycap Press: Mechanical keycap depresses on its shadow
Kinetic Xy Pad: A two-axis puck trails the pointer, then springs home
Lattice Snap: A tile follows the pointer, then springs onto the nearest cell
Lenticular Shift: Micro-ridges swap one word for another as the angle changes
Letterpress Emboss: Type sits in the paper and reads by the light angle alone
Lidar Sweep: A scan plane lights a point field into a depth map
Like Burst: Toggles, pops the heart, and emits a radial particle ring
Liquid Blob: An organic shape endlessly morphs its border-radius — pure CSS
Liquid Glass Press: Frosted glass liquefies under a specular press
Magnetic Button: Cursor pulls the button toward it inside a dead zone
Marquee Reveal: Cards scroll horizontally, pausing on hover — pure CSS
Metaball Bridge: Two particles trade mass through a liquid neck
Moir Lens: Counter-rotating line fields create impossible depth
Momentum Marquee: Infinite scroll that pauses smoothly on hover
Momentum Picker: Wheel input rolls a weighted selector into its next detent
Neon Glow Pulse: Text and outline breathe a soft neon halo — pure CSS
Newton S Cradle: End pendulums trade momentum across the row
Noise Dissolve: Film grain peels back to uncover a colour field
Notification Slide In: Banner drops from the top edge and settles with a spring
Number Counter: Digit bumps and overshoots on every increment
Odometer Count Up: Eases from zero to its target when scrolled into view
Optimistic Rollback: An instant local update gracefully retracts after rejection
Orbit Spinner: A dual-arc ring rotates on a tight infinite loop — pure CSS
Orbital Action Menu: Actions escape a magnetic centre on hover
Packet Trace: Data pulses choose a route through a tiny network
Page Peel: Top card rotates around its left edge like a page turning
Parallax Tilt: 3D rotation tracks pointer position, glow follows beneath
Partial Success Matrix
Password Meter: Segments fill and shift color as strength climbs
Phase Lock: Three independent signals resolve into sync
Pin Input: Each digit pops and auto-advances to the next box
Pixel Sort Melt
Pointer Tooltip: Label trails the cursor with eased follow
Polarized Foil: A muted spectrum appears only at grazing angles
Presence Stack: Avatars fan out with a live online pulse
Progress Ring: Circular stroke eases to a new value on each run
Prompt Composer: An AI input grows with the thought, then commits to a run
Pulse Badge: A notification dot emits expanding rings forever — pure CSS
Push Button: A tactile depress with a real bottom edge — pure CSS
Quantity Stepper: Value pops on each change; clamps at zero
Rack Focus: Depth of field pulls between two planes, bokeh blooming
Radar Pulse: Concentric rings expand and fade like sonar
Rate Limit Cooldown: A token bucket empties fast, then refills on a slow drip
Reconciliation Merge: Competing values converge into one authoritative state
Reorderable List: Drag items up and down; others shift to make room
Retry Orbit
Ripple Feedback: Radial fade-out anchored to the exact click point
Rotary Knob: Drag in a circle to set a value; snaps to detents on release
Rubber Band Slider: Drag past either end and it stretches, then springs back
Scramble Reveal: Cycles random glyphs before settling left-to-right
Segment Loader: Stepped bars fill one after another on each run
Sheen Sweep: Specular highlight glides across on hover
Shimmer Skeleton: Sweeping highlight over placeholder lines
Shine Sweep: A diagonal light streak sweeps across on hover — pure CSS
Signal Bars: Bars light up in sequence while connecting
Signal Braille: A tactile dot matrix encodes live system phases
Skeleton Sweep: Gradient position animates across a fixed-size placeholder
Skeleton To Content: Shimmering placeholder resolves into real content on click
Slide To Unlock: Drag past the latch or it springs back
Snap Rail: A soft selection pill springs to the hovered option
Specular Orbit: A soft highlight circles a brushed dark surface
Speculative Race
Speed Dial Fab: Actions fan out on a staggered spring
Squish Button: Compresses on press, springs back on release
Stagger Entrance: List items rise in sequence on scroll into view
Stale While Revalidate: The old value ghosts as the fresh one springs into place
Star Rating: Hover previews a value, click locks it with a pop
State Diff: The old value yields as the new state commits
Status Pill: Morphs idle → loading → success with icon and colour
Step Progress: Connector fills and the next node pops active
Submit States: Label to bouncing dots to a settled checkmark
Success Check: Ring and tick draw themselves on, then undraw on toggle
Swatch Picker: Selected colour springs up with a check
Swipe To Reveal: Drag an item horizontally to expose action buttons
Switch Spring: Knob overshoots its track position on toggle
Tab Pill Glide: Indicator measures target width before moving
Tag Input: Enter pops a chip in; × pops it out
Text Split Reveal: Each letter springs up in sequence on hover — pure CSS
Text Wave: A crest of motion travels across the letters
Toast Overshoot: Slides past rest position before settling
Toast Stack: Multiple toasts stack upward and auto-dismiss in sequence
Toggle Pills: Selected pill pops with a spring scale
Token Stream: Tokens cascade in like a live model response
Topographic Drift
Trace Flame: A request paints as stacked spans filling left to right
Typing Indicator: Three dots bounce in sequence, chat-style
Underline Draw: Scale-transform underline, draws left to right on hover
Undo Snackbar: Timed bar drains while you can still undo
Value Scrubber: Drag horizontally to scrub the number
Variable Weight: Type densifies from thin to black on hover
Vector Recall: Nearest embeddings drift in as a query ring sweeps the space
Velocity Button
Volumetric Shaft: Light rakes through a slot and pools in drifting dust
Voronoi Pulse
Warp Grid: A planar field bends inward around its focal point
Wave Loader: Three dots in a phase-offset vertical bounce

Kinetics components

All Kinetics components

Browse by category