a field guide to motion

MOTION

100 web animations you can build by just describing them. Every tile is live — click one to preview it big, then hit copy to steal the prompt. No code, just words.

100 effects · click a tile to preview · copy to steal the prompt · made with AI

AURORA
01text

Holographic Gradient Text

An iridescent gradient slides endlessly through the letters like light through a hologram.

CREATIVE
02text

Decode / Scramble Text

Random glyphs churn, then snap into the real word — a terminal decrypting.

you can
03text

Typewriter Rotator

A line types itself out, deletes, and types the next phrase, caret blinking.

REVEAL
04text

Wipe Reveal Mask

A glowing bar sweeps across and uncovers the word behind it.

GLITCH
05text

Chromatic Glitch

Cyan and magenta ghosts split off the text in brief digital stutters.

MOTION
06text

Variable-Weight Wave

Each letter swells from thin to bold and lifts, rippling across the word.

07background

Aurora Blobs

Soft blurred color clouds drift and breathe behind the content.

08background

Drifting Starfield

Twinkling stars fall gently with depth — a cheap, endless cosmos.

09background

Pastel Binary Rain

Matrix rain, recolored — 0s and 1s falling in the holo palette.

10background

Constellation Network

Floating nodes draw lines to nearby neighbors as they drift.

11background

Breathing Mesh Gradient

Overlapping color pools shift position, like a gradient that's alive.

12background

Floating Fireflies

Glowing motes wander on lazy curves, pulsing in and out.

13background

Grid Scan Line

A neon sheet sweeps down a tech grid — pure sci-fi HUD.

14interactive

Magnetic Button

The button leans toward your cursor, then snaps back when you leave.

move your cursor
15interactive

Spotlight Cursor

A pool of light follows the mouse, revealing the surface beneath.

tilt me
163d

3D Tilt Card

The card pivots in 3D toward your cursor with a moving glare.

hover to flip
surprise
173d

3D Flip Card

On hover the card rotates to reveal a second face behind it.

18interactive

Ripple on Click

A circle blooms outward from exactly where you tap.

19svg

Gooey Metaballs

Colored blobs merge and split like liquid mercury.

20svg

Liquid Fill Orb

Two waves churn inside a circle like water in a porthole.

21svg

Morphing Blob

An organic shape slowly reshapes itself while it spins.

22svg

Orbiting System

Glowing satellites circle a core on concentric rings.

23loader

Radar Ping

Rings pulse outward from a bright point — a live, locating beacon.

24loader

Shimmer Skeleton

Placeholder bars sweep with light while content loads.

0counts up when seen
25interactive

Count-Up Ticker

A number races from zero to its target the moment it scrolls into view.

active
26loader

Rotating Conic Border

A rainbow halo spins around the card's edge, glowing.

OUTLINE
27text

Gradient Outline Stroke

Hollow letters with a holo gradient flowing through the stroke only.

Neon Bar
28text

Neon Flicker Sign

Glowing tube text that flickers and buzzes like a neon sign.

CHROME
29text

Metallic Shine Sweep

A bright specular highlight sweeps diagonally across silver letters.

FLIGT
30text

Split-Flap Board

Letters flip like an airport departure board landing on a word.

FLOATS
31text

Per-Letter Wavy Bob

Each letter gently bobs up and down in a staggered sine wave.

FOCUS
32text

Blur-In Focus Reveal

Text snaps from a soft transparent blur into razor-sharp focus.

SPECTRUM
33text

Rainbow Hue Cycle

Letters slowly cycle hue through the full spectrum on a loop.

DEPTH
34text

3D Extruded Text

Chunky layered extrusion that subtly rotates and shifts in depth.

SETTLE
35text

Falling Assembling Letters

Letters drop in from above and settle into the finished word.

Underline
36text

Underline Draw

A holo gradient underline draws itself beneath the word on a loop.

37background

Hue Drift Wash

Full-bleed holo gradient slowly shifting hue and position.

38background

Floating Bokeh

Soft blurred light circles drifting upward at varied sizes.

39background

Lava Lamp Blobs

Large colored metaballs slowly merging via gooey filter.

40background

Synthwave Grid

Neon grid floor receding to a glowing horizon, scrolling.

41background

Dot Matrix Wave

Grid of dots rippling in a traveling sine wave.

42background

TV Static

Animated film-grain noise field with a faint holo tint.

43background

Barber Stripes

Subtle slow diagonal gradient stripes drifting like a barber pole.

44background

Drifting Fog

Layered soft radial fog clouds drifting slowly, dreamy.

45background

Confetti Drift

Small holo-palette particles gently falling and rotating.

46background

Concentric Ripples

Expanding circular ripples emanating from center, looping.

47background

Rotating Beams

Soft conic light rays slowly rotating from center.

move your cursor
48interactive

Cursor Trail

A string of holo dots smoothly chases the cursor with easing lag.

DEPTH
49interactive

Parallax Layers

Stacked elements shift by different amounts to fake real depth.

50interactive

Hover Zoom Shine

Card scales up and a specular glare slides toward the cursor.

51interactive

Reactive Tile Grid

A grid of tiles tilts and glows toward the moving cursor.

52interactive

Glow Border Tracker

A bright spot rides the panel border toward the nearest cursor point.

push the letters
53interactive

Text Repel

Letters scatter away from the cursor and ease back when it leaves.

FIND
THE LIGHT
search the dark
54interactive

Flashlight Reveal

A soft circle of light around the cursor uncovers hidden text.

click the stage
55interactive

Click Burst

Clicking fires a radial spray of holo particles that fly out and fade.

move me
56interactive

Elastic Follower

A glowing ring chases the cursor with springy overshoot and squash.

SPECTRUM
sweep across
57interactive

Hue Shift Panel

A gradient panel remaps its colors from the cursor X and Y.

58ui

Gradient Glow Button

Holo-gradient button with a soft pulsing glow that brightens on hover.

59ui

Border-Draw Button

A gradient border that draws itself around the button on a loop.

60ui

Fill-From-Center Button

Background sweeps in from center on hover with a text color flip.

61ui

Shine-Sweep Button

A diagonal light streak sweeps across a glossy button periodically.

Aurora Pass
Frosted access to the full motion kit.
62ui

Glassmorphism Card

Frosted glass card with blur, border light, and a slow light sweep.

63ui

Toggle Switch

Animated on/off switch that slides and glows, auto-toggling slowly.

64ui

Like Heart Burst

A heart fills and emits a little particle burst on a looping demo.

65ui

Expanding Search Bar

A search pill expands to reveal an input then collapses on a loop.

66ui

Tab Pill Slider

A glowing pill indicator slides between three segmented tabs.

Copied to clipboardi
67ui

Tooltip Pop

A tooltip pops above an icon with a little spring bounce on a loop.

3
68ui

Notification Badge Pulse

A bell icon with a count badge that pulses with a ping ring.

69ui

Hamburger To X

A three-line menu icon morphs smoothly into an X and back on a loop.

703d

Rotating Holo Cube

A six-face glass cube slowly spinning with glowing holo edges.

713d

Coverflow Carousel

A row of cards angled in 3D coverflow gently sliding through.

DEPTH
723d

Parallax Depth Card

A card whose layers separate in Z and shift as it auto-tilts.

733d

Folding Panel

A two-panel card folding open and closed along a 3D hinge.

743d

Spinning Coin

A metallic medallion rotating on its Y axis showing both faces.

753d

Card Stack Shuffle

Top card lifts, rotates and cycles to the back of the stack.

763d

Perspective Tunnel

Concentric glowing squares receding into Z as an infinite tunnel.

773d

Floating Extruded Layers

Stacked offset layers extruded in Z slowly rotating to show depth.

78svg

Self-Drawing Line Path

A path draws itself via stroke-dashoffset with a holo gradient stroke.

79svg

Play / Pause Morph

An icon morphs smoothly between a play triangle and pause bars.

80svg

Gradient Stroke Ring

A ring with an animated holo gradient stroke rotating around it.

81svg

Animated Checkmark

A circle draws then a checkmark draws inside with emerald glow.

82svg

EKG Heartbeat Line

A pulse line travels across with a glowing leading dot, looping.

83svg

Sine Wave Line

A smooth sine wave path scrolls with a holo gradient stroke.

84svg

Dashed Rotating Border

A rounded rect with a marching-ants dashed gradient border.

85svg

Polygon Morph

A shape morphs between triangle, square and pentagon, looping.

86svg

Particle Burst

Dots explode outward from center and fade, looping.

87svg

Equalizer Bars

A row of audio equalizer bars bouncing to different rhythms.

88svg

Concentric Pulse Rings

Rings scale up and fade outward from a glowing core, staggered.

89svg

Signature Draw

A handwritten signature squiggle draws itself elegantly, looping.

90loader

Gradient Spinner

Classic ring spinner with a holo conic gradient and rounded head.

91loader

Dual Ring

Two counter-rotating gradient arcs nested inside each other.

92loader

Bouncing Dots

Three holo dots bouncing in a smooth staggered wave.

93loader

Indeterminate Progress Bar

A track with a holo gradient chunk sliding back and forth.

94loader

Pulse Dots

A row of dots fading and scaling in and out in sequence.

95loader

Orbit Spinner

A glowing dot orbiting a faint ring around a bright core.

96loader

Equalizer Loader

Vertical holo bars rising and falling like an audio meter.

97loader

Morphing Dot

A single dot that stretches and morphs between two positions.

98loader

Wave Dots

A row of dots tracing a smooth traveling vertical sine wave.

99loader

Flip Square

A holo square flipping on alternating axes in a four-step loop.

100loader

Determinate Circular Progress

A ring filling from zero to one hundred percent with a percent center.

Build your own

This entire kit is just words an AI turned into code — no hand-written code. Take the blueprint, hand it to your AI, and make your own version of anything here.

copied to clipboard