Stryx SkillsThe 3D skill · outside the plugin, inside the set
stryx-3d-web-design
The cinematic WebGL playbook this site was built with. The open book, the lake and the evening sky on every page come from its kitchen. In the set: its 323 files of text. It never works alone: it works with stryx:design and the brain.
Seen from the water, at the blue hour after sunset: the book lies open, lit by its own pages and the last of the sky.
IWhat it is
The 94 plugin skills are the tools in a toolbox. This one is the whole workshop next door, with its own storeroom.
It builds cinematic 3D and WebGL brand websites: a site where the page is a film scene, with light, depth and a subject that moves as you scroll. It also takes the smaller job, one 3D hero or one 3D section inside a normal site.
- version, updated 2026-10-11
- 5.0.5
- lines in the master document
- 6,438
- documents on top, 4 folders below
- 4
- 68,005references: the knowledge and the asset library
- 40,254brain: the engine, the laws, the kitchen
- 9history: the old versions, kept
- 4scripts: the hand tools
- 4documents at the top
IINever alone
It never works alone.
A 3D site still has headings, buttons, menus, forms and a phone view. Those have one home on every page: stryx:design. So the two skills load together, and the split is by where the pixels are.
A pixel drawn by the scene
stryx-3d-web-designThe scene, and each section that holds a canvas: the box the 3D picture is drawn in.
A pixel drawn by the page
stryx:designLayout, type, buttons, forms, the phone view, accessibility and the motion of the interface.
| The site | Leads | Beside it |
|---|---|---|
| A whole cinematic site: every screen is a scene | this skill | stryx:design for type, buttons, the phone view |
| A mixed site: one 3D hero or section, normal pages around it | stryx:design | this skill for each section with a canvas |
| A page with one product viewer or configurator | stryx:design | stryx:3d-engines owns the viewer |
| A dashboard, an app, a store: no canvas | stryx:design | nobody |
What it is not for
The skill names the jobs that belong elsewhere. The right skill saves time and gives a better result.
- 3D inside an app, a model viewer, a configurator, a game stryx:3d-engines
- A design job with no 3D: a page, a dashboard, a brand, slides stryx:design
- Making a picture with an AI image model stryx:image-gen
- PBR textures exported for a 3D model stryx:3d-texturing
- Checking the finished page: accessibility, polish, phone view stryx:design-audit
- Sound and music for the page stryx:audio
- Search set-up stryx:seo
- Something is broken stryx:debug
IIIThe laws
Fifteen laws. They decide most cases.
The first part of the master document lists them. They are given here in short, in plain words. The skill's own text is private source and is not shown.
- Sharp at 4K on every view.Text is real page text, never painted into the picture.
- Smooth, no freeze.No frame takes longer than 50 ms.
- No silent downgrade.A lesser option needs the owner's word, recorded.
- No protected copy, no real site name.Take the technique, write new code.
- Never generic.One named direction, one idea in one sentence, a new mix for every build.
- Real light, real materials.Depth, and one true colour tone.
- The bar is 8 of 10.Green tests and a judge's score do not accept a look.
- Pictures are made at home.The brain makes the recipe, the local model draws.
- Fonts and assets only from the brain.Never a name from memory.
- Nothing deleted, nothing uploaded.And no window on the owner's screen.
- No model starts by itself.Only on the owner's plain word.
- Build time ends at code plus unit tests.Browser, gate and picture runs are refine time.
- Status comes first.Percent done and percent left, in simple English.
- Every finding is fixed.A check that did not run is "NOT RUN", never a pass.
- Every page is built with stryx:design loaded.Plate II, as a law.
- frame time or less; 33.3 ms on a phone
- 16.7 ms
- text contrast; large text 3 to 1
- 4.5 to 1
- texels per physical pixel, for a picture people look at
- 0.9
- or more, for a luxury reveal
- 1.2 s
IVThe kitchen
Fifty-two ops, one dot each.
The kitchen is what a build is cooked from. An op is one module that draws or drives one thing: a sky, a glass material, a bloom glow.
51 ops are for dishes. One, the open dot, is a linker test that is never in a dish. The family is the first word of an op's name. Listed 2026-10-11.
- post12
- field10
- matter7
- env3
- panel3
- figure2
- motion2
- points2
- one each11backdrop, depth, event, ground, image, light, mesh, relation, shards, sky, water
- Typed plugs.The plan wires two ops only when their plug types fit.
- A knob outside its range is refused.It is never quietly clamped.
- Chosen by its card, never from memory.A client build takes a proven op before a trial one, and a staged op never.
VInside the bundle
23.0 GB of assets, kept in the lab.
Not a theory book. In the lab the skill works from a real binary corpus: GLB models, HDR environments, fonts, engine bundles and shaders. The set you install carries the skill’s 323 files of text; the asset library itself stays in the lab. The inventory below is the lab’s, drawn to scale.
- asset files: 48,791 on the asset shelves and 18,893 in the studied sites
- 67,684
- studied sites, each under a code name
- 147
- kinds of asset on the shelves
- 21
- 32,974Site texturessite-texturesThe texture files of the studied sites. Two thirds of the asset library.
- 3,962Font filesfontsDisplay 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.
- 3,340Icon filesiconsCursor variants, brand marks, system icons, navigation chrome, SVG and PNG both. The chrome library for premium HUDs.
- 3,201Site bundlessite-bundlesProduction engine bundles you can dissect line by line.
- 1,489Font pack extrasfont-pack-extrasMore font files, kept beside the main font shelf.
- 8373D modelsglbsCharacters, vehicles, jewellery, architecture, foliage, planets, abstract sculptural pieces. Drop-in for any Three.js scene.
- 801KTX2 texturesktx2-texturesGPU-compressed (Basis Universal) for instant load: PBR diffuse, roughness, normal, displacement maps for landscapes, fabrics, metals.
- 712JSON configsjson-configsProduction scene-state JSONs: complete object graphs, light rigs, camera tracks, animation tracks, ready to study and re-stage.
- 661Style sheetsstylesheetsThe style sheets of the studied sites, kept to read.
- 339Frame sequencesframe-sequencesPicture frames in order, for a scene that plays as the page scrolls.
- 245Audio filesaudioAmbient drones, room tones, synth pads, formant clicks, transitional whooshes: the sonic palette for cinematic crossfade engines.
- 113VideosvideosVideo files for a backdrop or for study.
- 114Nine smaller kindsshaders, hdr-envmaps and moreRaw dumps 26, sky files 25, shader files 24, animation bundles 17, height maps 15, decoders 2 (Draco and the KTX2 transcoder), Rive 2, scene states 2, node materials 1.
Files and cards are two different counts. The folder holds files. The brain has read every file once and keeps a card for it: 38,862 asset cards in five kinds, among its 173,853 rows, counted 2026-10-11. You never browse the shelves by hand. You ask the brain for a sky of an hour, a model light enough, a texture that repeats without a seam.
- 34,412textures
- 3,512SVG drawings
- 5433D models
- 360video and sound
- 35skies
VIThe training
Trained on one graphics card.
Machine learning ran over the library on a single NVIDIA GeForce RTX 5070 Ti, a 16 GB card in the lab's own workstation. It left a small trained brain for the design part of a build: one that knows which pieces belong together, and which compositions are real.
The download carries the brain’s program, not this trained data: the brain you install starts with its laws and kitchen and learns from your own files.
It is not a chat model. It answers one kind of question, what goes with what, and a new version replaces the one in use only when it measures better on pairs it has never seen.
possible compositions
about550 trillion
Counted 2026-10-13: 546,111,152,455,680 recipes for a site of five scenes. The scale is hundreds of trillions.
Where the number comes from
Scene worlds
- particles8
- object6
- sequence5
- cosmos4
- data4
- fluid4
- light4
- space4
- terrain4
- water4
47 worlds in 10 families. Five scenes and one accent layer, each from a different family, in order: 1,463,132,160
times
Supporting pieces
- interaction4
- motion4
- type4
- audio3
- chrome3
- light3
- loader3
- post3
- reveal3
30 pieces in 9 kinds. One of each kind: 46,656
times
Palettes
- palette8
One palette for the whole site: 8
=equals546,111,152,455,680possible recipes for five scenes
Three parts are trained. One waits.
-
Part 1 · read
89,026 Cards read. A card is the measured facts of one file, or of one section of the written knowledge. Each card was given a position among all the others. embedding, version 18 -
Part 2 · paired
216,651 Training pairs. A pair is two things from the library that belong together. On 26,778 pairs it had never seen, a true partner is among its ten nearest 57 times in 100. Before training: 35. encoder, version 3 -
Part 3 · composed
2,287 Real combinations. Whole mixes that exist, each piece in one of 8 roles. From these it learned to tell a composition that is real from one that was made up. dish model, version 3 -
Not trained yet
Taste The fourth part learns only from the owner's own ratings of finished scenes. It has none yet, so it answers "do not know", and the owner's 8 of 10 remains the judge. taste head, version 2, silent
Counted 2026-10-13 by the brain's own status command. The counts grow with the library.
VIIWhat 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.
The master document has two layers. Parts 42 to 53 are the law of today: the brain, the protocol, the kitchen. Parts 0 to 41 are this playbook: the craft inside each step.
- backdrop
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.
- story
Scroll-snap scene deck
Six-scene scrollytelling with shader-uniform palette shifts, letter-by-letter reveals, pinned chapter transitions.
- brand
Particle brand mark
Sample your logo into 3,500–5,000 particles. Assemble with easeOutCubic, breathing cycle, eye-blink uniforms.
- sound
Audio crossfade engine
Howler.js playlist with crossfades, cross-page continuity via localStorage, SFX pool architecture.
- chrome
HUD overlay system
Corner brackets, top and bottom rails, scrolling cypher, scanlines, film grain: the instrument-panel chrome.
- gate
Loading gates
Five proven micro-experience patterns, from logo morphs to ASCII fills to rising-water orbs.
- PBR
Editorial Pastel PBR
Calm physical materials with no custom shader: sheen, one sky turned up, tone mapping in post.
- mobile
Mobile shader degrade
Adaptive DPR ladder, FBM octave reduction, particle count tiers, localStorage-persisted quality preferences.
- family
Multi-site brand systems
Parent and product subdomains with shared engine, cross-domain audio continuity, family-wide design tokens.
- type
Letter-reveal typography
Word-then-char splitter that respects gradient text-fill, configurable per-char delay, accessibility-safe.
- cursor
Custom cursor patterns
Mix-blend cursor, magnetic snap to interactive elements, transformation on hover.
- perf
Performance budgets
A frame budget of 16.7 ms, caps on particle and octave counts, an asset budget, an adaptive DPR ladder.
- distribute
Distribution + SEO
Cloudflare R2 binary hosting, License v1.1, Open Graph, structured data, sitemap generation.
The whole stack
Thirteen sister-skills on one core, 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.
VIIILive demonstrations
Twenty-one distinct visual languages.
Five categories. Twenty-one universes. Each runs live in the screen below: flip through with the arrows, pick a name in the index, or open the full demo in a new tab.
Press play to load the live preview.
Live iframe loads only on demand. It saves you the asset traffic until you ask.
Encore
A neon proscenium that lifts when the curtain drops: one show, one seat, one applause.
Open full demo (opens in a new tab)IXInstall · the whole set
It comes with the whole set.
The 3D skill is never installed alone: it works with stryx:design and the brain, so it ships inside the set. Royalty-free under the Stryx Labs License v1.1: use it for any lawful purpose, including personal and commercial use. Source proprietary, distribution exclusive to stryxlabs.com.
- Open Windows PowerShell.
- Paste the line and press Enter.
- Restart Claude Code. This skill then loads with stryx:design when a request is about a cinematic 3D site.
PS>irm https://skills.stryxlabs.com/install.ps1 | iex
Installs all 94 skills, 32 agents and the brain program as one set. This is the lite version.
Full 3D version: the complete build as one big file.
Download the full 3D version · 25.5 GB · Windows (.rar)
File 3.0.0-windows-r5.rar, via Google Drive (opens Google’s page in a new tab).
The proof is in front of you. Every page of the Stryx sites, this one included, was designed and built with these skills. See the four sites.