feat(landing): hero wordmark as a live WebGPU shader (vgpu)

[pango07]

What

The hero "flicky" headline is now rendered on the GPU with vgpu. The <h1> stays in the DOM (layout, SEO, a11y, fallback); a client component rasterizes the same text with the same font into a mask texture and a WGSL fragment shader paints through it.

On brand, on the Windows-desktop theme:

• domain-warped simplex "liquid" in the flicky blues, separate light and dark palettes
• the wallpaper's dotted grid printed through the glyphs
• a thin diagonal glint sweeping every ~7 s
• pointer ripples anywhere over the hero stage
• noisy left-to-right reveal on load, soft blue halo outside the letters

Fallbacks

• no WebGPU / adapter / device error → plain text, canvas never shown
• prefers-reduced-motion → single static frame, no loop
• hero off-screen or tab hidden → loop paused
• theme toggle → re-tinted next frame

Wiring

• vgpu dependency (@vgpu/wgsl-std simplex module imported from the shader)
• .wgsl loader rule for Turbopack (default) and webpack in next.config.mjs, app/wgsl-env.d.ts for types
• next build (static export) passes

Verification

• vgpu check app/components/wordmark.wgsl: no diagnostics, naga validation ok
• Headless Chrome with WebGPU, static out/ build: is-gpu applied, DOM text transparent, both themes at 1280 px and 390 px, no horizontal overflow, no console errors
• Playwright's bundled Chromium (no D3D shader compiler → no adapter): fallback text renders normally
• Found and fixed during verification: copyExternalImageToTexture requires the mask texture to carry render_attachment usage

Not done / proposals

• No pipeline pre-warm; the effect is a single pass and the canvas fades in after the first frame, so no hitch was visible.
• Low tier (DPR drop) not added; the canvas is capped at 2× DPR and ~435×231 css px at desktop.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
flicky	Ready	Preview	Sep 17, 2026 4:49am UTC