Click
0
404 Distractor Game
/187minigameA canvas endless-runner (rAF game loop) — it plays itself, but tap or press Space to take the controls and jump.
187HERO skill
187HERO — Immersive 3D hero systems.
Designs full-screen WebGL/R3F heroes with parallax layers and clear CTAs, plus a realistic performance budget.
Hero lab
8 live hero systems
Every 187HERO pattern as a real, interactive demo — SVG mascots, a canvas endless-runner you can actually play, and the WebGL-flavoured cursor/transition effects rebuilt on canvas for cross-device resilience. Each labelled with its /187… command; all honour prefers-reduced-motion.
Immersive & interactive5
The first-impression set — a playable canvas mini-game, a volumetric fog cursor, holographic deconstruction, and a GLSL-style dissolve.
Hover
Volumetric Fog Cursor
/187volumefogLight rays and a glowing orb follow the pointer through additive fog — the FogExp2 + cone-mesh cursor, in 2D.
Hover
Holographic Deconstruction
/187holointeractAn image sampled onto a point grid; the pointer displaces and scatters nearby points — the 100×100 PlaneGeometry, in canvas.
Live
GLSL Disintegration
/187shaderwipeA cell-dissolve page transition — the WebGL shader's per-fragment threshold, ported to a canvas grid that assembles and scatters.
Live
187WEB
Hero-to-Header Nav
/187centernavOn scroll the wordmark scales and travels from hero-centre to its docked header-top-left position.
Splash & mascot3
Loaders and brand-mascot moments — a walking splash loader, a morphing logo intro, and a pointer-tracking mascot face.
Hover
Mascot Face Tracker
/187mascotfaceSVG pupils track the pointer (clamped), the head tilts toward it, and a blink timeline fires every few seconds.
Live
Mascot Splash Loader
/187willemloaderA walking mascot whose stride maps to load progress; the bar fills, then the loader fades out.
Live
Morphing Logo Splash
/187logoloadA logo mark scales up and settles with a MorphSVG shape shift and power4 ease before the splash clears.
Triggers
How to invoke 187HERO
| Trigger | |
|---|---|
| /187hero | |
| 187HERO | |
| hero | |
| hero scene | |
| immersive hero | |
| webgl background | |
| full screen 3d | |
| hero three.js | |
| landing hero 3d |
Use cases
When to route to 187HERO
Build a WebGL/R3F hero background
Add parallax or depth layers to a hero
Link the hero to a scroll CTA or transition
Ship a static or reduced-motion hero fallback
Output contract
What 187HERO delivers
- 1Hero scene spec
- 2Layer stack (background, mid, foreground, CTA)
- 3Scroll / link integration plan
- 4Performance budget
- 5Next actions
Routing
When to hand off to another skill
| Route to | When |
|---|---|
| 187MODEL | the hero features a 3D product or model |
| 187SCROLL | the hero transitions into a scroll narrative |
| 187ACCESS+ | the hero has motion, auto-play, or contrast concerns |
Templates
Artifacts 187HERO produces
| Template | When to use |
|---|---|
| hero-scene-spec.md | A full-screen immersive hero |
| hero-performance-budget.md | Defining hero load and runtime limits |