03 · Motion Cookbook: a copy-and-paste library of 27 live effects

A single-page tool, not a client site. It shows 27 motion effects running live in a bento grid, and every tile has a Copy button that hands you the exact code you are looking at. What makes people stop is the density: border beams, a split-flap board, an orange dither shader, a dotted world map and an LED board all moving at once, and each one pastes into any HTML page.

Inspiration

The effects are modelled on three component libraries. Magic UI supplies 16: Border Beam, Shine Border, Animated Beam, Hyper Text, Aurora Text, Morphing Text, Meteors, Marquee, Flickering Grid, Retro Grid, Light Rays, Ripple, Particles, Dock, Text Reveal and Dotted Map. Aceternity UI supplies 8: Moving Border, Card Spotlight, 3D Card plus Glare, Text Flipping Board, Encrypted Text, Lamp, Magnetic Button and Evervault Card. Cult UI supplies 3: Hero Dithering, Rolling Number and LightBoard. 21st.dev is credited by link only, with no effect taken from it.

The originals are React and Tailwind. These are rebuilt by hand in vanilla HTML, CSS and JavaScript, from how the originals look and behave, not from their source. The page says so and links the originals.

What was added: idle motion on the pointer effects so nothing sits dead, a text mask in the flickering grid, a pointer trail on the LED board, a code drawer with HTML, CSS and JS tabs, and a "download all as one file" button.

Visual direction

References

Why these choices

The core decision is that each effect is written once, inside an HTML <template>. The grid reads the CSS, markup and script out of that template. The tile mounts those same strings into a Shadow DOM root, and Copy emits the same strings. So the demo cannot drift from the code you copy. Shadow DOM also keeps one effect's styles from touching another's, and every copied rule is scoped to a .fx-name class so two effects on one page do not clash.

Dark dev-tool styling keeps 27 loud demos readable next to each other. Performance is handled in the host: tiles mount only when they scroll near the viewport, and animation is paused when they leave it. Most scripts also check prefers-reduced-motion and use an IntersectionObserver, and the WebGL dither falls back to a plain state if no GL context exists.

Trade-offs: no dependencies means more code per effect, and these are look-alikes, not the originals. If you work in React, the real libraries are the better pick, and the page says that. The build was only tested in one browser engine (see build notes).

Who this kind of site is for

The site style suits internal toolkits, component libraries, agency starter kits and dev-tool landing pages: anywhere the product is a set of things you can try and take away. It is the wrong call for a local business site, a restaurant or a service company, where 27 competing animations would bury the message and the phone number.

Who would use the tool itself: anyone building client sites, training pages or Claude artifacts. The workflow is short. Find an effect, press Copy, paste the block into an HTML file, a CMS embed or an artifact, then change the colours, speeds and sizes, which are plain CSS values and constants near the top of each block. Each block fills the box you put it in. Filters and search help when someone knows the effect name or only the feel they want ("beam", "text", "grid"). Download-all gives one file with every effect as a reference sheet. It also works as a training aid, since a client can point at a tile and say "I want that one."

How to make it

Stack and key techniques

The prompt

Build a single-file website called "Motion Cookbook": a working tool for a small team that shows 27 live motion effects and lets people copy each one as a self-contained block. Plain HTML, CSS and JavaScript in one index.html. No build step, no libraries, no images; every visual is procedural. Only Google Fonts allowed.

Effects are rebuilt from how these libraries look and behave, not from their source: Magic UI (Border Beam, Shine Border, Animated Beam, Hyper Text, Aurora Text, Morphing Text, Meteors, Marquee, Flickering Grid, Retro Grid, Light Rays, Ripple, Particles, Dock, Text Reveal, Dotted Map), Aceternity UI (Moving Border, Card Spotlight, 3D Card + Glare, Text Flipping Board, Encrypted Text, Lamp, Magnetic Button, Evervault Card) and Cult UI (Hero Dithering, Rolling Number, LightBoard). Credit them and 21st.dev by link in a short "Originals" section, and say plainly these are independent rebuilds.

Architecture: author each effect once in a <template class="fx"> with data attributes (id, name, source, category, grid span, blurb) holding a <style>, markup and optional <script>. All CSS scoped to .fx-<id>. The page reads the templates, mounts each tile's strings into a Shadow DOM root when it nears the viewport (IntersectionObserver), and pauses its animation when off screen. Copy and Code must emit the very same strings, so demo and snippet cannot drift. Include a code drawer (<dialog>) with Snippet, HTML, CSS and JS tabs, light syntax tinting, per-tab copy, and a "download all as one file" button.

Visual direction: background #050506, panels #0a0a0d, hairlines rgba(255,255,255,.08), one accent #c6ff3d. Each tile has its own colour (orange dither, cyan lamp, pink retro grid). Fonts: Geist, Geist Mono, Instrument Serif italic for accent words. 6-column bento grid, 2 columns under 1120px, 1 under 720px, with a sticky blurred filter bar: category chips, library chips, search (press / to focus), live count.

Hero: stacked light rays, falling meteors, a shine-border eyebrow chip that scrambles its text, a word-by-word blur-in headline with an italic serif accent, a moving-border CTA, and a tilted code card with two border beams showing a real snippet generated from the same data.

Signature effects to get right: Bayer 8x8 dither shader (WebGL1, low-res canvas, pointer-reactive); split-flap board with two-part flaps; dotted world map with arcs; Animated Beam paths measured from the DOM and re-measured on resize; LED board with a 5x7 font and pointer trail; gooey text morph via SVG threshold filter; dock magnification. Give pointer effects idle motion so they never sit dead.

Rules: honour prefers-reduced-motion in every effect; WebGL falls back gracefully; visible focus states; no horizontal overflow at 1440px or 390px; every copied block works alone in a blank page.

Verify: open in a browser, screenshot desktop at 8 scroll stops and mobile at 6, plus hover states and a reduced-motion pass. Check the console for errors. Test that the clipboard matches the snippet, drawer tabs copy, filters and search work, and all 27 snippets run in a blank page. Fix everything you find, then repeat.

Build notes

Stepping down: what you would likely lose

This is an informed estimate, not a measurement. No public benchmark compares these exact models on one-shot frontend work, so the table rests on tier positioning, earlier-generation reviews and extrapolation.

Feature Opus 5.5 (likely outcome) Sonnet 5.5 (likely outcome)
Template-to-Shadow-DOM mount, so demo equals Copy Does fine. It is a clear architecture. Does fine, though it may drift on small details (scoping, script el handling).
Border beams via masked ring and offset-path: rect() Does fine, likely knows the mask-composite trick. Attempts it with likely bugs: a filled card instead of a thin ring, or a beam that cuts corners.
Bayer dither shader (WebGL) Attempts it, probably works, with small errors in the matrix or scaling. Likely simplifies to a plain noise gradient or drops the pointer glow.
Animated Beam measured from the DOM Does fine, likely adds a resize observer. Attempts it with likely bugs: paths drawn once and wrong after resize.
Dotted map from a land table, with arcs Attempts it, but the continents are probably cruder. Likely simplifies to scattered dots or a rough blob map.
LED board with 5x7 font and pointer trail Does fine, with a possibly smaller glyph set. Attempts it with likely bugs: missing glyphs or a trail that never fades.
Polish across all 27 (idle motion, reduced-motion, pause off screen) Mostly does fine. A few effects probably miss some of it. Likely uneven: later effects in a long file lose pause and reduced-motion handling.

Rough overall estimate, as a judgment call: Opus 5.5 keeps roughly 80 to 90 percent of the visual impact in one pass, and the gap to Fable 5.1 is probably small here, since most effects are well known patterns. Sonnet 5.5 probably keeps roughly 60 to 75 percent. The main risk is a 27-effect file, where drift late in the file is likelier.

What would close the gap: a screenshot feedback loop and the proof script, and splitting the build into batches of 6 to 9 effects, each checked before the next.

← Previous reportNext report →