jasc66

Scroll Flyover — AI skill for Claude Code

AI community

Claude Code skill that builds scroll-scrubbed 3D "fly through the world" landing pages with live Three.js/WebGL — no AI image/video generation, zero per-build cost, fully procedural geometry and mater.

How to install Scroll Flyover

This entry records only its repository, not the path inside it, so there is no exact command to give. Open jasc66/scroll-flyover and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Scroll Flyover does

Alternatives in AI

Guizang Ppt Skill — AI-agent Skill for generating polished HTML slide decks: editorial magazine and Swiss layouts, image prompts 24.9k ★
Osaurus — Own your AI. The native macOS harness for AI agents -- any model, persistent memory, autonomous execution, cry 5.1k ★
LiveAgent — A fully functional AI Agent desktop client that supports Webui access and can be creatively customized and exp 1.9k ★

README

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