# WebGL Hero

> WebGL Hero: a note from the Obsidian vault behind https://saifsiddiqui.in.

Canonical URL: https://saifsiddiqui.in/hi-latn/brain/webgl-hero/ (this is its markdown representation; the same URL serves HTML to browsers)
Other languages: en: https://saifsiddiqui.in/brain/webgl-hero/ · hi: https://saifsiddiqui.in/hi/brain/webgl-hero/ · kn: https://saifsiddiqui.in/kn/brain/webgl-hero/ · ur: https://saifsiddiqui.in/ur/brain/webgl-hero/ · te: https://saifsiddiqui.in/te/brain/webgl-hero/ · ar: https://saifsiddiqui.in/ar/brain/webgl-hero/

**Type:** feature  
**Status:** planned  
**Created:** 2026-07-17  
**Tags:** feature, motion, webgl

## WebGL Hero

The single "wow" beat: a calm domain-warped fbm "graphite dust" field in Stone tones behind sharp type, subtle cursor reaction, settles on load. **Plain three.js** (named imports, not R3F, see [D016 - WebGL Uses Plain Three Not R3F](/brain/d016-webgl-uses-plain-three-not-r3f/)) in a **lazy island** mounted after LCP so it never touches the critical path.

**Budget:** ~129KB gz (raw-WebGL ~3KB option open, D016), DPR ≤ 1.5, pause when off-screen/tab hidden, 60fps target / 30 floor.
**Degradation:** reduced-motion / mobile / low-power → static poster image (WebGL + `deviceMemory` feature-detect).

Why exactly one: concentrating the heavy effect in one place keeps everything else instant, the contrast *is* the [product signal](/brain/north-star-site-as-proof/). Rationale: [D003 - Visual Restraint and One WebGL Moment](/brain/d003-visual-restraint-and-one-webgl-moment/). Style tokens: [Design System](/brain/design-system/).

## Yahan se linked

- [D001 - Site as Proof Principle](/hi-latn/brain/d001-site-as-proof-principle/)
- [D002 - Tech Stack](/hi-latn/brain/d002-tech-stack/)
- [D003 - Visual Restraint and One WebGL Moment](/hi-latn/brain/d003-visual-restraint-and-one-webgl-moment/)
- [D016 - WebGL Uses Plain Three Not R3F](/hi-latn/brain/d016-webgl-uses-plain-three-not-r3f/)
- [D020 - Art Direction v2 Bold Monochrome](/hi-latn/brain/d020-art-direction-v2-bold-monochrome/)
- [North Star - Site as Proof](/hi-latn/brain/north-star-site-as-proof/)
- [Phase 3A - WebGL and Graph](/hi-latn/brain/phase-3a-webgl-and-graph/)
- [Portfolio Brain](/hi-latn/brain/portfolio-brain/)
- [Roadmap](/hi-latn/brain/roadmap/)

Saare notes: [/hi-latn/brain/](/hi-latn/brain/)

---

Mohd Saif, Product Engineer. I build solutions, not dead software.
Email: saifmd238@gmail.com · GitHub: https://github.com/Saif-09 · LinkedIn: https://www.linkedin.com/in/mohd-saif-134076141/ · Résumé (PDF): https://saifsiddiqui.in/resume

More for agents:
- [/llms.txt](/llms.txt): short summary of this site
- [/llms-full.txt](/llms-full.txt): the complete text of every page in one fetch
- [/agents.md](/agents.md): when to use this site, and how to query it
- [/sitemap-index.xml](/sitemap-index.xml): every URL, in seven languages