Interface motion / CSSReference built
Magnetic button
A button follows a nearby pointer and settles back on release.
Get the recipe
The Cave / Motion library
Find a motion.
Build it your way.
Prompts for interfaces, product films, explainers, and scenes built with code. Pick a recipe, bring your brief, and let your coding agent build it.
Interface motion / CSSReference built
Morphing toggle
A toggle knob stretches during a change of state, then returns to a circle.
Get the recipe
Interface motion / CSSReference built
Staggered menu
A compact navigation panel reveals its items in a short cascade.
Get the recipe
Product films / CanvasReference built
Kinetic wordmark
Letters arrive on a beat, hold long enough to read, and leave as a single word.
Get the recipe
Product films / CanvasReference built
Three-feature product launch
Three product features appear in a short launch sequence with a clear final frame.
Get the recipe
Product films / CanvasReference built
Metric count-up
A single supplied metric counts to its final value and holds beside its label.
Get the recipe
Explainers / CanvasReference built
Process flow
Three labeled steps connect in sequence as a dot travels between them.
Get the recipe
Explainers / CanvasReference built
Ranked bars
A small ranked chart animates between two supplied snapshots of data.
Get the recipe
3D & backgrounds / CanvasReference built
Orbiting system
Three points move on tilted orbits around a central body.
Get the recipe
3D & backgrounds / CanvasReference built
Rotating wire cube
A wire cube turns around two axes with a fixed camera.
Get the recipe
3D & backgrounds / CanvasReference built
Aurora curtain
Soft green ribbons drift across a dark field without external textures.
Get the recipe
3D & backgrounds / CanvasReference built
Particle assembly
A field of points gathers into a word or a simple supplied silhouette.
Get the recipeShared-element tabsPrompt recipe · preview pending
Interface motion / CSS
Shared-element tabs
An underline travels between tabs without rebuilding the whole tab row.
Get the recipeToast stackPrompt recipe · preview pending
Interface motion / CSS
Toast stack
Notifications enter from one edge and make room for the next message.
Get the recipeNumber flipPrompt recipe · preview pending
Interface motion / CSS
Number flip
A changing digit flips across a horizontal hinge like a station display.
Get the recipeAccordion revealPrompt recipe · preview pending
Interface motion / CSS
Accordion reveal
An answer panel opens smoothly while its heading stays in place.
Get the recipeCommand palette entrancePrompt recipe · preview pending
Interface motion / CSS
Command palette entrance
A search dialog appears with a small scale change and a steady input.
Get the recipeDrag-and-settle cardPrompt recipe · preview pending
Interface motion / Canvas
Drag-and-settle card
A card follows a drag directly and springs to the nearest resting slot.
Get the recipeProgress ringPrompt recipe · preview pending
Interface motion / SVG
Progress ring
A circular progress indicator advances to a measured value.
Get the recipeFocus spotlightPrompt recipe · preview pending
Interface motion / CSS
Focus spotlight
A soft highlight follows the pointer across a group of cards.
Get the recipeSkeleton-to-content revealPrompt recipe · preview pending
Interface motion / CSS
Skeleton-to-content reveal
A loading placeholder gives way to content without shifting the page.
Get the recipeButton-to-success statePrompt recipe · preview pending
Interface motion / SVG
Button-to-success state
A submit button changes to a check after a confirmed successful action.
Get the recipeDevice slide revealPrompt recipe · preview pending
Product films / Canvas
Device slide reveal
A flat device frame enters while its product screen stays readable.
Get the recipeSplit-screen comparisonPrompt recipe · preview pending
Product films / Canvas
Split-screen comparison
Two clearly labeled states share the screen before one expands to fill it.
Get the recipeLine-drawn logo revealPrompt recipe · preview pending
Product films / SVG
Line-drawn logo reveal
A supplied line mark draws itself before its name fades into view.
Get the recipeType-on titlePrompt recipe · preview pending
Product films / Canvas
Type-on title
A short sentence types on with a quiet caret and an unhurried hold.
Get the recipeShape match cutPrompt recipe · preview pending
Product films / Canvas
Shape match cut
A circle in one scene becomes the focal object in the next.
Get the recipeQuote revealPrompt recipe · preview pending
Product films / Canvas
Quote reveal
A short quotation appears line by line with its attribution in the same frame.
Get the recipeExploded product diagramPrompt recipe · preview pending
Product films / Canvas
Exploded product diagram
A schematic product separates into labeled layers and returns to its assembled state.
Get the recipeVertical product storyPrompt recipe · preview pending
Product films / Canvas
Vertical product story
A portrait product film moves through a problem, a useful action, and a closing card.
Get the recipeLaunch countdownPrompt recipe · preview pending
Product films / Canvas
Launch countdown
Three large numerals mark time before a launch title appears.
Get the recipeLine chart drawPrompt recipe · preview pending
Explainers / SVG
Line chart draw
A data line draws across a stable axis and ends with a labeled value.
Get the recipeDonut breakdownPrompt recipe · preview pending
Explainers / SVG
Donut breakdown
A ring fills segment by segment and connects each share to a label.
Get the recipeMilestone timelinePrompt recipe · preview pending
Explainers / Canvas
Milestone timeline
A line connects dated milestones while each caption has time to be read.
Get the recipeNetwork routePrompt recipe · preview pending
Explainers / Canvas
Network route
A packet follows a highlighted route through a small network diagram.
Get the recipeSoftware stack layersPrompt recipe · preview pending
Explainers / Canvas
Software stack layers
An application stack separates into interface, service, and storage layers.
Get the recipeFunnel stagesPrompt recipe · preview pending
Explainers / SVG
Funnel stages
A supplied series of stage counts narrows into a labeled conversion funnel.
Get the recipeEquation buildPrompt recipe · preview pending
Explainers / Canvas
Equation build
A short equation forms term by term, with each variable explained nearby.
Get the recipeCycle diagramPrompt recipe · preview pending
Explainers / SVG
Cycle diagram
A four-step process loops once around a circle before stopping on the complete diagram.
Get the recipeWire terrainPrompt recipe · preview pending
3D & backgrounds / Three.js
Wire terrain
A wireframe landscape moves under a fixed low camera.
Get the recipeGlass orbitPrompt recipe · preview pending
3D & backgrounds / Three.js
Glass orbit
A transparent geometric object turns slowly above a matte surface.
Get the recipeRibbon flightPrompt recipe · preview pending
3D & backgrounds / Three.js
Ribbon flight
A narrow ribbon follows a curved path through a quiet scene.
Get the recipeFloating product cardsPrompt recipe · preview pending
3D & backgrounds / CSS
Floating product cards
Three flat product panels drift at different depths with a small camera tilt.
Get the recipePortal ringsPrompt recipe · preview pending
3D & backgrounds / Three.js
Portal rings
Concentric rings rotate at different speeds around a dark central opening.
Get the recipeWave surfacePrompt recipe · preview pending
3D & backgrounds / Three.js
Wave surface
A mesh rises into crossing waves under a fixed light.
Get the recipeMetal dropletsPrompt recipe · preview pending
3D & backgrounds / Three.js
Metal droplets
A small cluster of reflective spheres moves through a slow repeating pattern.
Get the recipeStarfield driftPrompt recipe · preview pending
3D & backgrounds / Canvas
Starfield drift
A sparse starfield drifts past a fixed camera with a slow sense of depth.
Get the recipeDot globePrompt recipe · preview pending
3D & backgrounds / Canvas
Dot globe
Points on a sphere turn together while the rear hemisphere stays faint.
Get the recipeContour fieldPrompt recipe · preview pending
3D & backgrounds / Canvas
Contour field
Nested organic contours breathe slowly around an off-center focal point.
Get the recipeLight tunnelPrompt recipe · preview pending
3D & backgrounds / Canvas
Light tunnel
Repeated rectangular frames create a slow journey through a tunnel.
Get the recipeHand-painted character filmPrompt recipe · preview pending
Product films / Canvas
Hand-painted character film
A short 2D mascot story with painted shapes, controlled line boil and a frame-review workflow.
Get the recipeHave a product to launch?
Bring the idea.
We can build the motion.
Tell us what your team is trying to ship. We’ll work through the scope, assets, and implementation with you.
Catalog 2026-10-22.a82e12098f76 · DKC originals: CC BY 4.0 · Imports: see each recipe’s license · Server code: MIT