motion-pageslisted

Build production-ready immersive motion pages in the award-site mold — Three.js worlds (foggy heroes, glass product stages with sonar rings, drag-orbit dome galleries, scroll-driven camera journeys with particle morphs, walkable procedural game worlds with HUD chrome) AND non-Three.js motion (raw-WebGL liquid-glass ripple typography, springy draggable poster walls, cursor-trail image reveals, horizontal scroll-snap stories, scroll-scrubbed process reveals, cursor mask reveals, gesture control) — each a single HTML file with a crisp DOM overlay, responsive to phone/tablet, touch-aware, with a mandatory multi-viewport screenshot loop and a design-review (aesthetic + conversion) pass. Use when asked for a "3D landing page", "Three.js hero", "living/breathing homepage", a 3D product page, a 3D gallery, a scroll-story page, "liquid glass", a ripple/distortion hero, a draggable poster wall, "images that follow the cursor", a horizontal-scrolling story, a "scroll to build it" process explainer for a business, a game
jiangyurong609/motion-pages · ★ 2 · Web & Frontend · score 75

Install: claude install-skill jiangyurong609/motion-pages

# Motion Pages — Award-Site Immersive & Motion Recipes Recipe derived from (and verified by replicating) the "Sylva — Step into the living world" example: a monochromatic foggy 3D world fills the viewport, organic hero geometry sweeps across the lower half, and ALL text/UI lives in a crisp DOM overlay — never as 3D text. Single HTML file, < 1 MB of code, 60 fps. The same world can later be dimmed and reused as a backdrop under a normal content page. Working reference implementations ship with this skill — read the one nearest your task before building: - `examples/sylva-replica.html` — the foggy hero (every base pattern below); - `examples/fernline-hero.html` — the hero applied to a fictional SaaS brand; - `examples/sona-product-hero.html` — glass product stage + sonar rings + orbitals; - `examples/dome-gallery.html` — drag-orbit dome gallery + click-to-focus fly; - `examples/boreal-journey.html` — scroll-scrubbed camera rail + particle morphs; - `examples/pura-liquid-hero.html` — raw-WebGL liquid-glass ripple typography (no three.js); - `examples/paperworks-posterwall.html` — springy draggable poster wall (no WebGL at all); - `examples/halde-trail.html` — cursor-trail image reveal: prints surface under the pointer (pure DOM); - `examples/kiln-horizontal.html` — horizontal scroll-snap story: wheel drives a sideways rail (pure DOM). - `examples/alder-build.html` — scroll-scrubbed process reveal: the hero builds what the business sells as you scroll, then hands off to the pag