jasc66/scroll-flyover

A Three.js/WebGL engine for cinematic, scroll-driven "fly through the world" landing
pages — usable two ways: as a **standalone library** (npm install scroll-flyover
three, no Claude involved) in any JS/framework project, or as a
Claude Code **skill** that interviews you and
generates a full build end-to-end.
scroll-flyover 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.
Example: a real production build
**Live demo →** — a
spiral-ascent tower built with this skill, embedded in a bilingual Next.js portfolio.
Six sections, one continuous camera flight, no cuts:
| | | |
| --- | --- | --- |
| | | |
| | | |
references/production-lessons.md documents what this specific build surfaced
(host-page CSS traps, pause-state bugs, look-at sign errors) that the original design
didn't anticipate.
A second real build: **TechInsight →** — a tech/science
news blog with a dark green tunnel flight through geometric shapes, landing on section
cards for each part of the site:
| | |
| --- | --- |
| | |
| | |
| | |
Gallery: four more builds, four archetypes
Generated with this skill to demonstrate it isn't tuned to one subject or one camera
archetype — each uses a different journey structure and shape language from
references/camera-archetypes.md / references/scene-recipes.md. Full runnable source,
a local dev server, and the automated reproducibility/WCAG-contrast QA suite for these
four live in the separate jasc66/scroll-flyover-demo
repo, which depends on this skill's npm package rather than vendoring a copy of the
engine — an engine fix here reaches that gallery by bumping its dependency version, not
by hand-copying files.
**Try them live →** — the gallery runs the
latest release, with the 1.10.0 depth of field turned on in every demo. It also carries
TechInsight's hero as a fifth example, the same configuration as the production site,
and npm run capture -- , which turns a flight into an MP4 with renderAt.
| | |
| --- | --- |
| | |
| **Alta Finca** — coffee farm · low-poly organic · island hop | **Marco Estudio** — architecture studio · geometric · corridor/tunnel |
| | |
| **Nexo Ops** — project-mgmt SaaS · geometric · vertical descent | **Ala Sneaker** — product launch · toy/rounded · orbit showcase |
Building these surfaced four real bugs in references/scrub-engine.js itself (the
scroll-pin effect didn't work out of the box, a lost WebGL context froze the flight
permanently, adjacent scenes' copy could overlap, copy text could fail WCAG contrast
against its own scene) — all fixed; see references/production-lessons.md for what
broke and why.
Install
As a library
The scrub engine is importable directly, for any project that wants the scroll/camera
machinery without going through Claude Code at all:
- **three is an optional peer dependency**, >=0.152.0 (that's where
renderer.outputColorSpace landed; verified against 0.152.0 through 0.186.0). It is
marked optional so npx scroll-flyover skill installs don't pull it in — install it
yourself when using the library entry point.
- **TypeScript types ship with the package** (references/scrub-engine.d.ts, resolved
through exports for both scroll-flyover and the deep references/* import). They
reference @types/three — install it next to three (npm i -D @types/three); it is
an optional peer with the same >=0.152.0 floor. The config type rejects what the
engine throws on at mount: missing scenes or build, a CTA with both ctaHref and
onCta, a destination with no cta label.
- **ESM only, browser only.** mountScrollFlyover touches window/document on call,
so under Next.js import the component with dynamic(..., { ssr: false }).
- **The container must be a normal-flow element**, not position: sticky — the engine