Made of something.
Spatial 1.0 · Silk, 16 g/m², 2.4 m/s wind
Pages, made physical. Paper, cloth, glass.
Turn any frame into a material that bends, dents, tears, and shatters. The text stays real HTML.
Spatial 1.0
Aluminum 1.2 mm · Dents past yield
Silk, pinned at the top edge. Grab it and pull. The wind keeps it moving.
Aluminum, pinned at the corners. Drag to bend it, or click to strike it. Past its yield point it keeps the dent.
varial-spatial · loading
Real physics. Measured, not faked.
- Real materialsSilk, kraft paper, aluminum, tempered glass, and more, each with measured stiffness.
- Bends and dentsSheets crease, dent, and spring back. Metal keeps the dent.
- Tears and shattersPaper tears along the pull. Glass cracks first, then breaks.
- Wind and gravityGusts and gravity act on every sheet. The screen edges can hold them in.
- Layers in spaceLift any layer onto its own surface. It rides the page or floats in front.
Still a real web page. Text stays text.
Search engines and screen readers get real HTML. Links work, text selects, and nothing turns into a picture.
<varial-space>
<header class="banner">
<h1>Spring drop</h1>
<a href="/shop">Shop now</a>
</header>
</varial-space>
<script type="module">
import { defineVarialSpace } from './varial-spatial.js'
defineVarialSpace()
</script>
- Semantic HTMLThe markup stays in the page, under the material.
- Screen readersThey read the page, not a canvas.
- No WebGPU?It falls back to the plain page, with a simple dissolve.
- Reduced motionRespected. The effects step aside.
One app. Five workspaces, one file.
Design Product, brand, vector, and photo on one infinite canvas.
Good questions. Short answers.
What does a visitor need?
A browser with WebGPU. Without it, the page works as normal HTML and transitions become a simple dissolve.
How big is it?
About 200 KB compressed, with the physics engine included.
Is it accessible?
Yes. The HTML stays in the page, so screen readers, search, and text selection all work. Reduced motion turns the effects off.
Do I need to write code?
No. Set it up in the Spatial section of Design’s inspector, press Simulate to try it on the canvas, then Export web. Developers can use the runtime on any page.