Crystalline monolith

OBSIDIAN

One block of computed glass. Real transmission, real refraction — the scene behind it bends through the body as you turn it.

Material Transmission
Environment Procedural
Stack Tier B
Rotate

01 — Refraction

Light enters. It does not leave the way it came.

A physical material with an index of refraction near 1.5 samples the framebuffer behind the mesh and bends it through the volume — so the type, the glow, the whole stage pours through the crystal and comes out the far side recoloured.

IOR 1.5Thickness · absorptionChromatic edgeClearcoat sheen

02 — Cut

Facets are just opinions about a normal.

The body is a flat-shaded icosahedral solid — every face owns one normal, so light snaps between planes instead of smearing. Scroll drives a slow morph that breathes the cut between sharp and faceted, geometry as choreography.

Geometry
Faceted solid
Procedural icosahedron, flat normals, displaced on scroll — generated in-browser, nothing shipped.
Environment
Room PMREM
A pre-filtered procedural environment gives reflections and the light the glass refracts.

03 — Engine

Orbit is the interface.

Scroll is the camera rig: it cranes around the monolith, tilts, and pushes in for the close. ACES tone mapping and an optional bloom pass carry the highlights — a product film with no video file.

Tone
ACES filmic
Filmic curve + sRGB output so highlights roll off instead of clipping to white.
Budget
Single context
One renderer, devicePixelRatio capped, loop gated on visibility + on-screen.
Degrade
CSS gem
No WebGL or no addons → a static faceted gemstone. Reduced-motion → one still frame.

Cut your own

Refract it.

$ npx cinematic-scroll-skill
clawhub.ai/mustbesimo/cinematic-scroll