300×40
Knot tessellation (fictional)
CatTower Chrome · v3 fictional preview
Rendering that
Rendering that
looks like liquid metal.
Chrome Engine renders reflective, environment-lit surfaces in the browser — real geometry, real reflections, no pre-baked tricks. This is a fictional demo of the liquid-chrome theme.
120fps
Target frame rate
0
External assets
1
File, self-contained
What makes it real
Depth from a render, not a drop-shadow.
The hero object is generated procedurally and lit by a synthetic environment. CSS can imply 3D; this is 3D — the reflections move because the geometry does.
Procedural geometry
A torus-knot built in code — no model files, nothing to license, nothing to download.
Environment lighting
A synthetic room environment lights the metal, so reflections read as a real space — generated, never fetched.
Honest performance
Pixel ratio capped, render loop paused when off-screen or hidden, motion off when you ask for less.
≤2dpr
Pixel-ratio cap
1.0m
Metalness
.14r
Roughness
Pipeline
Three tiers, one page.
This demo layers the whole stack: native scroll-driven for the progress bar, Motion for these reveals, three.js for the chrome. Each degrades gracefully.
- Tier 0 — native. The top progress bar is pure CSS
animation-timeline: scroll(). - Tier 1 — Motion. Section content reveals on scroll with a gentle stagger.
- Tier 2 — three.js. The hero object is a live WebGL render, with a CSS-orb fallback.