// flagship · v4 · 382 reference files · 3.5 GB

stryx‑3d‑web‑design.

The cinematic WebGL playbook for premium brand sites. One install gives you the full atelier — 3.5 GB of curated knowledge with 382 reference docs, 244 GLB models, 291 fonts, 35 HDR env-maps, 121 engine bundles, 42 audio loops, and 21 live templates. Bundled Three.js, WebGPU/TSL, React Three Fiber, GSAP, Babylon, Motion, Locomotive, Substance — the entire toolchain in one install.

382 reference docs 7,791 total files 3.5 GB bundled 21 live templates 14 sister-skills

Install → See templates →

// 01What it does

Thirteen patterns, codified.

The skill captures the complete pattern stack of cinematic brand sites — not as theory, but as executable recipes for every reusable layer.

i.
Full-viewport GLSL nebula
Branded fragment shader: FBM noise + domain-warp + palette interpolation by scene index + mouse parallax + glow specks. The cinematic backdrop pattern, calibrated.
backdrop
ii.
Scroll-snap scene deck
Six-scene scrollytelling with shader-uniform palette shifts, letter-by-letter reveals, pinned chapter transitions.
story
iii.
Particle brand mark
Sample your logo into 3,500–5,000 particles. Assemble with easeOutCubic, breathing cycle, eye-blink uniforms.
brand
iv.
Audio crossfade engine
Howler.js playlist with 10s crossfades, cross-page continuity via localStorage, SFX pool architecture.
sound
v.
HUD overlay system
Corner brackets, top/bottom rails, scrolling cypher, scanlines, film grain — the instrument-panel chrome.
chrome
vi.
Loading gates
Five proven micro-experience patterns — from logo morphs to ASCII fills to rising-water orbs.
gate
vii.
Editorial Pastel PBR
MeshPhysicalMaterial Good Frosted recipe, ACES filmic at 0.85 exposure, procedural envmap.
PBR
viii.
Mobile shader degrade
Adaptive DPR ladder, FBM octave reduction, particle count tiers, localStorage-persisted quality preferences.
mobile
ix.
Multi-site brand systems
Parent + product subdomains with shared engine, cross-domain audio continuity, family-wide design tokens.
family
x.
Letter-reveal typography
Word-then-char splitter that respects gradient text-fill, configurable per-char delay, accessibility-safe.
type
xi.
Custom cursor patterns
Mix-blend cursor, magnetic snap to interactive elements, transformation on hover — without main-thread jank.
cursor
xii.
Performance budgets
60fps render budget enforcement, GPU layer hints, animation scheduler with priority queues.
perf
xiii.
Distribution + SEO
Cloudflare R2 binary hosting, License v1.0, Open Graph, structured data, sitemap generation.
distribute

// 02The whole stack

Fourteen sister-skills, bundled.

Every Three.js / WebGPU / animation / scroll library is embedded inside this single skill. No separate installs.

coreThree.js / WebGLScene graph, cameras, geometries, materials, lights, controls, loaders, raycasting, post-processing, instanced mesh, LOD — the entire core API.
futureWebGPU / TSLModern WebGPU renderer + Three.js Shading Language for node materials and GPU compute.
reactReact Three FiberDeclarative R3F — hooks, drei helpers, useFrame patterns.
scrollGSAP + ScrollTriggerScroll-pin / scrub, image-sequence scrubbing, complex choreography.
react uimotion-framerVariants, AnimatePresence, layout animations, gestures.
gameBabylon.jsGame-engine path for full post-FX, physics, ECS.
smoothlocomotive-scrollSmooth scroll, parallax, scroll detection.
texturesSubstance 3D TexturingPBR material creation, export to Three.js / Babylon.
trendsmodern-web-design2024–2025 trends — bold minimalism, scrollytelling, glassmorphism, accessibility-first.
librariesanimated-component-librariesMagic UI + React Bits — 240+ pre-made animated React components.
js animanimejsTimeline, SVG morphing, stagger sequences.
vectorlottie-animationsAfter Effects exports for the web.
physicsreact-spring-physicsSpring physics + Popmotion. Natural feel beyond ease curves.
scroll fxscroll-reveal-librariesAOS-style scroll reveal when GSAP is overkill.

// 03Inside the bundle

3.5 GB of curated assets.

Not a theory book. The skill ships with the actual binary corpus — real GLB models, real HDR environments, real fonts, real engine bundles, real shaders — ready to drop into a project. Production-ready inventory below.

3D models244 GLB files · 538 MBReal CC0 models from Sketchfab, Polyhaven, ambientCG — characters, vehicles, jewellery, architecture, foliage, planets, abstract sculptural pieces. Drop-in for any Three.js scene.
env maps35 HDR & EXR · 19 MBStudio cycloramas, golden-hour skies, sunset rooms, night exteriors, polar puresky — all PMREM-ready for instant IBL on PBR materials.
fonts291 font files · 19 MBDisplay serifs, monospace HUD families, italic accent fonts, condensed display sets — the typographic palette for premium brand work, ready to drop into Three.js text or HTML chrome.
icons273 icon files · 4 MBCursor variants, brand marks, system icons, navigation chrome — SVG and PNG both. The chrome library for premium HUDs.
audio42 audio loops · 49 MBAmbient drones, room tones, synth pads, formant clicks, transitional whooshes — the sonic palette for cinematic crossfade engines.
engines121 engine bundles · 66 MBPre-decoded production engine bundles — Theatre.js timelines, GSAP choreographies, custom shader rigs you can dissect line by line.
textures42 KTX2 textures · 16 MBGPU-compressed (Basis Universal) for instant load — PBR diffuse, roughness, normal, displacement maps for landscapes, fabrics, metals.
animations30 animation bundles · 5.4 MBTheatre.js + Rive composition files — pre-built choreography you can re-time, re-skin, re-stage without touching the keyframe math.
shaders6 GLSL recipesFBM nebula, water caustics, volumetric god-ray, bird-wing flap detection, bioluminescent crest, ripple chromatic aberration — commented and tunable.
decoders3 binary decoders · 792 KBDRACO, Meshopt, KTX2 transcoder — the unsung trio that makes 50 MB GLBs load in 200 ms.
scene configs8 JSON scene files · 984 KBProduction scene-state JSONs — complete object graphs, light rigs, camera tracks, animation tracks, ready to study and re-stage.
references382 reference docsSKILL.md (2,606 lines), 50+ category subfolders — per-engine deep-dives, per-library playbooks, doctrine for loaders, postprocessing, terrain, typography, scroll choreography, deploy.

// 04Live demonstrations

Twenty-one distinct visual languages.

Five categories. Twenty-one universes. Each runs live in the screen below — flip through with the arrows, jump to a category, or open the full demo in a new tab.

Press play to load the live preview.

Live iframe loads only on demand — saves you 2.5 GB of asset traffic.

i. Entertainment · Marquee

Encore

A neon proscenium that lifts when the curtain drops — one show, one seat, one applause.

Open full demo 1 / 21

// 05Install · one command

Pick the flagship. Or the whole atelier.

Free for personal and commercial use. Source proprietary, distribution exclusive to stryxlabs.com.

macOS · Linux · just this skill$ STRYX_SKILL=stryx-3d-web-design curl -fsSL https://stryxlabs.com/install-skills.sh | bash Windows PowerShell · just this skillPS> $env:STRYX_SKILL="stryx-3d-web-design"; irm https://stryxlabs.com/install-skills.ps1 | iex All 20 skills · the full atelier$ curl -fsSL https://stryxlabs.com/install-skills.sh | bash

Stryx Labs · MMXXVI · v3

License v1.0 · Back to atelier · Contact

stryx‑3d‑web‑design.

Thirteen patterns, codified.

Full-viewport GLSL nebula

Scroll-snap scene deck

Particle brand mark

Audio crossfade engine

HUD overlay system

Loading gates

Editorial Pastel PBR

Mobile shader degrade

Multi-site brand systems

Letter-reveal typography

Custom cursor patterns

Performance budgets

Distribution + SEO

Fourteen sister-skills, bundled.

3.5 GB of curated assets.

Twenty-one distinct visual languages.

Encore

Pick the flagship. Or the whole atelier.