← All Skills stryx · skills Stryx Labs ↗
// flagshipstryx-3d-web-design · v2.0

3D Web Design.

The flagship Stryx skill. An Awwwards SOTD-tier cinematic WebGL playbook synthesized from 18+ live reference sites. Ships with five fully-cinematic site templates you can fork as starting points.

See 5 templates ↓ Install this skill ↓
//01What it is

Not a SaaS
landing playbook.

This is for the kind of site that wins Awwwards Site of the Day — where the WebGL backdrop IS the brand, the chrome is HUD-thin, the audio breathes, and headlines assemble letter by letter as the door fades open.

Built from the live Stryx Labs + Mneme cinematic builds, then extended with patterns scraped from hashgraphvc.com, atmos.leeroy.ca, igloo.inc (Awwwards Site of the Year 2025), bruno-simon.com, samsy/cyberpunk.cv, evervault.com, romanjeanelie.com, glossy.wannathis.one, aim.obys.agency, dorianlods.com, sidewave.it, rs69.dev, mhdyousuf.me, epiminds.com, canariasart.com, nova.peachworlds.com, and twelve more. Every pattern is concrete: exact ms timings, exact hex colors, exact tuning values.

//02What's inside

A knowledge library,
not a single recipe.

Twenty-one effect families, each playable. Sixteen reference files. One iron law: knowledge is the key.

i.

21 effect families

FBM nebula · water surface · underwater volumetric · sky/aurora · cosmic dust · god rays · fluid/smoke/mist · crystal refraction · holographic iridescence · stones/asteroid · 3D terrain · wireframe · ASCII grid · particle persona · particle text morph · audio-reactive · scroll-velocity reactive · custom cursor · liquid glass · plus composition strategies.

ii.

5-step build protocol

Brand sync (10 min) → Skeleton (15 min) → CSS tokens + layout (30 min) → JS engine (45 min) → Verify + polish (20 min). Total: ~2 hours from blank slate to shipping. That's the bar.

iii.

Site signature deep-dives

Six landmark Awwwards SOTDs analyzed in depth: Hashgraph (Lenis 0.2/1.25 + 45-file audio + CubeCamera crystal), Canarias (Babylon.js full post-FX), Nova (adaptive DPR), Sidewave (cypher scramble), RS69 (reveal stagger ladder), MhDyousuf (CSS corner brackets + scanlines).

iv.

Production gotchas

14 live-fire bugs from shipping Stryx + Mneme. Lenis wrapper trap. Postprocessing CDN failure. Mobile gate triple-defensive binding. Typewriter race conditions. Cross-origin engine cache-bust convention. Each bug → exact fix recipe.

//03Example · particle figure

Brand mark
from particles.

A silhouette sampled into 3,500-5,000 particles, assembled with easeOutCubic, with breath cycle + eye blink (shader uniform) + mouse parallax. Used by Epiminds Lucy, Stryx owl, Mneme brain.

// Eye blink — shader uniform mask, NOT DOM overlay uniform float uBlinkL, uBlinkR; vec2 eyeL = vec2(-0.391, 0.092); vec2 eyeR = vec2( 0.391, 0.092); float maskL = 1.0 - smoothstep(0.20, 0.30, distance(position.xy, eyeL)); float maskR = 1.0 - smoothstep(0.20, 0.30, distance(position.xy, eyeR)); vAlpha = mix(0.5, 1.0, em) * (1.0 - max(maskL * uBlinkL, maskR * uBlinkR)); // JS-side blink rhythm — 4-6s with 12% double-blink function blink() { const rDelay = 20 + Math.random() * 40; tweenUniform(uBlinkL, 1, 80); setTimeout(() => tweenUniform(uBlinkR, 1, 80), rDelay); setTimeout(() => tweenUniform(uBlinkL, 0, 180), 110); setTimeout(() => tweenUniform(uBlinkR, 0, 180), 110 + rDelay); setTimeout(blink, 4000 + Math.random() * 2200); if (Math.random() < 0.12) setTimeout(blink, 380); }
//04Templates · five live cinematic sites

Five templates.
Live. Clickable.

Each template is a complete cinematic site demo — fully-rendered, scroll-driven, with WebGL backdrop and HUD chrome. Click any to see it live, then fork the source as a starting point for your build.

Template 01 Memory

Particle persona + cosmic dust

Mneme-style. Brain-particle hero with FBM nebula backdrop. For AI memory products, knowledge tools, "second-brain" apps. Dark cosmic palette.

VIEW LIVE ↗
Template 02 Founder

Reflective crystal + chapter nav

Hashgraph-style. CubeCamera real-time reflective glass crystal centerpiece. Chapter-based pinned scroll. For VC firms, investment funds, prestige B2B.

VIEW LIVE ↗
Template 03 Studio

Holographic shapes + audio-reactive

Glossy/Wannathis-style. Iridescent abstract 3D shapes shifting color. Audio-reactive tempo. For agencies, motion design studios, creative tech shops.

VIEW LIVE ↗
Template 04 Product

3D terrain + weather state machine

Bruno Simon-style. Heightmap terrain with day/night cycle and rain/snow transitions. For physical-product brands, hardware, climate tech.

VIEW LIVE ↗
Template 05 Portfolio

Custom cursor + cypher scramble

RS69 + Sidewave-style. Mix-blend cursor with magnetic snap. Per-character cypher decryption on scroll. For personal portfolios, creative-dev sites.

VIEW LIVE ↗
//05References · 18 SOTDs harvested

Built from shipped sites.

Every pattern in this skill is concrete — extracted from real Awwwards-tier sites. Click any to study the source.

hashgraphvc.com5★ SOTD atmos.leeroy.ca5★ SOTD igloo.inc5★ SOTY 2025 hatom (Immersive Garden)5★ SOTD bruno-simon.com5★ SotM cyberpunk.cv (Samsy)5★ SOTD evervault.com5★ HM romanjeanelie.com5★ Codrops glossy.wannathis.one5★ HM aim.obys.agency5★ SotM dorianlods.com5★ sidewave.it5★ rs69.dev5★ mhdyousuf.me5★ epiminds.com5★ HM canariasart.com5★ SOTD stryxlabs.comour v0.0.1 mneme.stryxlabs.comour v0.0.2
//06Install · just this skill

One command.

Installs only the 3D web design skill (skip the other 19) into ~/.claude/skills/stryx-3d-web-design/.

macOS · Linux
$ STRYX_SKILL=stryx-3d-web-design curl -fsSL https://stryxlabs.com/install-skills.sh | bash
 
Windows · PowerShell
PS> $env:STRYX_SKILL="stryx-3d-web-design"; irm https://stryxlabs.com/install-skills.ps1 | iex
 
All 20 skills (the full library)
$ curl -fsSL https://stryxlabs.com/install-skills.sh | bash
//07Reach

Free. Always.

Stryx Labs License v1.0. Use it anywhere — personal, commercial, internal, in production. No attribution required. No telemetry.

See all 20 skills ← Read the license Email us
stryx-3d-web-design · v2.0 · Stryx Labs MMXXVI