Scroll Flyover

scroll-flyover

A [Claude Code](https://claude.com/claude-code) skill that builds an immersive, scroll-scrubbed "fly through the world" landing page using **live Three.js/WebGL** — no paid AI image or video generation, no external asset generation services.

As the visitor scrolls, a real 3D camera flies along a spline path from outside each procedurally-built "island" scene into its interior, then continues to the next scene with no cuts — one continuous connected flight. All geometry, materials, lighting and skies are generated by code (primitives + canvas-gradient textures), so there is zero per-build cost and zero external dependency. The result is a stylized, low-poly / geometric diorama world, not photoreal AI-generated art — that trade-off is stated to the user up front, not discovered late.

Install

Drop this repo's contents into your Claude Code skills directory:

git clone  ~/.claude/skills/scroll-flyover

Or as a submodule / subtree of an existing skills collection. Claude Code picks up any folder under `~/.claude/skills/` (or a project's `.claude/skills/`) containing a `SKILL.md` with the right frontmatter automatically — see `SKILL.md` for the full skill definition and `references/` for the copy-pasteable Three.js patterns it's built from.

What's in here

• SKILL.md — the skill itself: the interview flow, build steps, and a large Gotchas section for when a build looks basic, jerky, or breaks in a host page.
• references/scene-recipes.md — primitive/material/canvas-texture building blocks per shape language (low-poly organic, geometric/architectural, toy/rounded).
• references/camera-path.md — the Catmull-Rom spline, per-scene control points, dwell-time easing, curvature-based banking.
• references/camera-archetypes.md — six journey structures (island hop, continuous terrain, vertical descent, corridor, orbit showcase, spiral ascent) and when to pick each.
• references/visual-fidelity.md — the diff