Award-site motion pages,
one prompt away
A skill that teaches your AI agent to build immersive motion pages — 3D worlds, glass product stages, dome galleries, scroll journeys, liquid-glass shader typography, springy poster walls — as single HTML files, screenshot-verified until they're right. Three.js when it helps; raw WebGL or pure DOM when it doesn't.
Pick a world. Copy its prompt.
Every card is a real page built by the skill — press ▶ to run it right here in the grid, then copy its prompt. These aren't vibe one-liners: each prompt is a full build spec — layout, palette, geometry, shader behavior, timings, and the self-verify loop — round-trip tested to reproduce a comparable page on a different brand.
Type a brand. Get a world.
Everything below is live — the preview rebuilds as you type. When it feels like yours, copy the prompt: it carries your brand, palette, and archetype into Claude Code.
Love a site? Clone its feel.
Paste a URL into the prompt. The agent browses the reference, screenshots it at several scroll depths, greps its bundles for tech signals (three.js? GSAP? shaders?), maps what it sees to the skill's recipes — then rebuilds the same motion language as original code themed to your brand. It studies patterns; it never copies the reference's code, assets, or content.
Works today in Claude Code with the skill installed — the browser, the inspection, and the verification loop all run on your machine.
Studied from award-winning sites
Each recipe was distilled from a reference (AETHER:1, OpenPurpose®, Igloo Inc, Lando Norris, MISC, ITOM…), rebuilt from scratch, and verified through a headless-Chrome screenshot loop.
Foggy hero world
Organic tube limbs + 14k instanced moss, fog == background color for infinite depth, wireframe scan intro.
Glass product stage
Fresnel-edge glass shader, breathing baked halo, thin sonar rings, orbital arcs — no post-processing needed.
Dome media gallery
~100 canvas-generated thumbnails on an inner sphere, inertial drag orbit, click-to-focus camera flight.
Scroll camera journey
Scroll scrubs a spline rail over noise terrain; forcing params (?p=) make every keyframe screenshot-testable.
Particle shape morphs
One 6k cloud, quantized structural targets (igloo bricks → ring portal → creature), staggered scatter mid-flight.
The fake-bloom kit
Baked glow sprites + halo textures + film grain: award-site light that renders even in headless SwiftShader.
Fluid UI layer
Shader buttons with cursor-following light, idle specular sweeps, glass navs — pure CSS + 10 lines of JS.
Self-verify loop
Multi-viewport headless screenshots, still-mode determinism, and a design-review pass before anything ships.
Two commands, then just ask
Install the skill into Claude Code with the commands on the right.
Copy any prompt from the examples above — or describe your own brand's world.
Watch it self-verify: the agent screenshots desktop/tablet/phone and iterates until the page is right.
Built a world? Add it.
The gallery grows by pull request — build a page with the skill,
drop the HTML in threejs-hero/examples/ with a verified still, and
open a PR. New effect recipes (cursor mask reveals, poster walls, gesture control…) are wide open too.