hero-canvas-fxlisted
Install: claude install-skill hellokianben-collab/vishal-agarwal-context
# Hero canvas FX + page split (plain HTML/CSS/JS sites)
Distilled from building KiAnben's hero + standalone pages. Site shape: single
`index.html` + `styles.css` + `main.js`, dark glass theme, Express `server.js`
static whitelist, deployed on Vercel. See `kianben-web` for that project's map/deploy.
> **Bold-path note:** when the user grants full permission to choose the effect,
> prefer a **real WebGL 3D** hero (three.js via CDN — the site runs
> `helmet({contentSecurityPolicy:false})`, so external scripts load in prod) over a
> faked 2D/pseudo-3D canvas. The canvas recipes below are the *fallback*, not the
> ceiling. (See memory `work-boldly-when-authorized`.)
---
## Pattern A — animated canvas hero background
### Layering & CSS
Put a canvas as the **first child of the hero**, behind the content:
```html
<section class="hero on-ink" id="home">
<canvas id="heroGlobe" class="hero-fx" aria-hidden="true"></canvas>
<div class="wrap hero-in"> …copy + card… </div>
</section>
```
```css
.hero { position: relative; overflow: clip; } /* clips the canvas */
.hero-fx { position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; z-index:0; }
.hero-in { position: relative; z-index: 1; } /* content ABOVE canvas */
```
Canvas is transparent → global ambient layers (aurora/particles) show through.
Content at `z-index:1` keeps text contrast intact.
### Lifecycle skeleton (every hero canvas)
- Size to the **host element** rect × DPR (cap DPR