Threejs Hero Skill — Development skill for Claude Code
Claude Code skill: build immersive Three.js landing pages as a single HTML file — foggy 3D world, DOM overlay, wireframe scan intro, self-verified via headless Chrome.
How to install Threejs Hero Skill
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open jiangyurong609/threejs-hero-skill and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Threejs Hero Skill does
Claude Code skill: build immersive Three.js landing pages as a single HTML file — foggy 3D world, DOM overlay, wireframe scan intro, self-verified via headless Chrome.
Alternatives in Development
- Domxss — Confirm DOM XSS in a real headless browser — injects canary payloads into params + URL fragment and only repor 4.5k ★
- Digest Intro — Digest Intro Prompt 3.2k ★
- Create Check List — agent-input/unsection-hero-sections/ 이미지들에 대해, saaspo-features-checklist.yaml과 동일한 형식의 체크리스트 파일을 초기상태로 생성하고싶다 395 ★
README
threejs-hero — a Claude Code skill for award-site motion pages
Immersive Three.js worlds, liquid-glass shader typography, springy poster walls — single-file pages, screenshot-verified.
**🌐 Showcase & live demos: ** — pick a world, open its live demo, copy its prompt.
A [Claude Code](https://claude.com/claude-code) skill that teaches the agent to build **award-site-style immersive Three.js pages** as a single HTML file (+ a vendored three.js): the Sylva-style foggy hero (organic geometry, crisp DOM overlay UI, mouse-orbit parallax, pointer particles, Death-Stranding wireframe scan intro, glass cards, a living creature) **plus four more archetypes distilled from award-winning sites** — a glass product stage with sonar rings (AETHER:1-style), a drag-orbit dome gallery with click-to-focus camera flights (OpenPurpose-style), scroll-driven camera journeys with particle shape morphs (Igloo-Inc-style), and recipes for cursor mask reveals (Lando Norris), paper poster walls (MISC), and webcam gesture control — all with no build step, **responsive down to phones, touch- and reduced-motion-aware**, verified via a multi-viewport headless-Chrome screenshot loop **plus a design-review (aesthetic + conversion) pass**, so the result is ready to mount in a production webapp on day 1.
| Sylva replica (bundled example) | Wireframe scan intro | Applied to a real brand |
|---|---|---|
 |
 |
 |
| Glass product stage | Dome gallery | Scroll journey + particle morph |
|---|---|---|
 |
 |
 |
Install
git clone https://github.com/jiangyurong609/threejs-hero-skill.git
cp -r threejs-hero-skill/Related Skills
Scale Account
The month-1 finale - stamp the proven build across the whole map in one run: clusters, campaigns, ads, assets,
Dom Narrator
Chrome extension: pick page elements, drag them, narrate edits, get a clean prompt for Claude Code. CC BY 4.0
Netvein
Local-first Chrome CDP reverse engineering & wire-level traffic MCP server, for Claude Code, Cursor, Codex, Op
15
Build a Next.js 14 portfolio landing page with a full-screen hero section and an animated loading screen. The
Anatomy
A Claude Code skill that turns a technical idea into a detailed, interactive isometric figure of a real machin
Copy Thief
Skill do Claude para escrever copy de alta conversao (landing pages, advertoriais, VSL) para trafego frio de M
Related Agents
Webdesign
Landing page architecture, conversion rate optimization (CRO), structural page layout generation, wireframe ma
3D Designer
3D Experience Architect — builds immersive 3D scenes, particle systems, scroll-driven animations, WebGL effect
QA Richness
Editorial-density and motion-richness QA gate. Verifies type contrast, accent scarcity, chrome present, not-fl
