Skenra – web-native 3D + Motion
for AI and humans
SkenraBeta
What is 3D + Motion?
Elegant real-time 3D + Motion to learn, teach and create.
Where 3D + Motion can shine – Examples
- Editorial, storytelling & data
- Technical drawings
- Product & education
- Generative art
The problem
3D + Motion is
too hard and siloed.
The opportunity
bring 3D + Motion
to everyone’s AI toolbox.
Boston 2026 Finishers
Rubik’s Cube
Laplace Forces
Newton’s Cradle
Why is 3D + Motion so hard?
There’s a lot of architectural friction, making it hard and costly for humans and AI.
Why is 3D + Motion so hard?
3D + Motion is not web native like SVG is.
Why is motion 3D so hard?
3D sits outside the web platform — bolted on, not integrated.
-
Content
Unlike text, SVG, images, video and audio, 3D is not expressed as HTML
elements as it could be — it's boxed inside a black-box
<canvas>. - Scripting The only glue you have between two worlds, each with its own animation, styling and interaction model. Need to manage complex mappings.
- Style No easy way to share styling and theming between 3D and the rest of the page.
- Events Two separate event systems — connected only by hand-written mapping glue.
- Drag & drop No native way to drag and drop content between HTML and 3D in either direction.
- Rendering 3D is a canvas: no overlap with the page. HTML can only sit on top as an overlay — never as a first-class citizen of the 3D scene.
It needs to be easy!
Making 3D + Motion web-native
- Content Elements for 3D content
- Scripting Single model and conventions
- Style CSS values and variables
- Events Full DOM events support
- Drag & drop Drag & Drop between HTML and 3D
- Rendering Interleaving 3D and HTML content
This is what Skenra brings.
What is Skenra?
A web-native, expressive, real-time 3D + Motion framework with the same dual nature SVG and HTML have:
Declarative when you want it, imperative when you need it.
Same standards everyone already knows.
Why not re-use existing 3D frameworks?
| Platform integration | Three.js | Babylon.js | Skenra |
|---|---|---|---|
| 3D as Custom Elements | — | — | ✓ |
| HTML scripting model | — | — | ✓ |
| CSS colors, blend modes, variables | — | — | ✓ |
| DOM events model | — | — | ✓ |
| 3D / HTML drag & drop | — | — | ✓ |
| Interleaved 3D/HTML rendering | — | — | ✓ |
Three.js and Babylon.js are excellent at rendering, physics, and content production — not at integrating with the platform.
Why not extend existing frameworks?
Would be working against their grain, and impact architecture and performance.
Three commitments
- web native
- expressive and graphical
- real-time and interactive
web-native – you (and AI) know how to use it.
-
DOM & structure
Custom Elements, parent/child hierarchy,
appendChild,querySelector. -
DOM events
Click a 3D object, get a
pointerdown. -
Web Animations API
element.animate([...], {duration, easing}). CSS easing strings. - CSS blend modes multiply, screen, overlay — the same vocabulary CSS already uses.
-
CSS colors
"#ff6347","coral",rgb(...)— whatever CSS accepts.
web-native – declarative and imperative at heart
Imperative
// Imperative — correct, but opaque const scene = document.createElement('a3-scene'); const sphere = document.createElement('a3-sphere'); sphere.setAttribute('radius', '2'); // …paint setup, material, camera, light… scene.appendChild(sphere); sphere.animate([…], { duration: 2000 });
Declarative
<!-- Declarative — same scene, same result --> <a3-scene> <a3-sphere radius="2"> <a3-surface-paint material="coral"/> <a3-keyframe-animation duration="2000" .../> </a3-sphere> </a3-scene>
Same scene. Same result. Only one is making it easier for models to read, edit, diff, and round-trip.
web native – 3D + Motion blends in, like SVG in HTML.
Loading scene source…
expressive & graphical
expressive & graphical – every knob reachable
Properties are live.
Extensible WGSL shaders.
real time every frame on budget
Live editing, AI iteration
Skenra — works at WebGPU speed.
Serve two audiences by design
For humans
A 3D engine where existing web knowledge transfers directly. The barrier to entry is "do you know HTML?" — not "are you a 3D expert?"
For AI
Scenes as documents instead of imperative programs. Declarative HTML (or JSON for MCP apps) that models read, write, edit, and round-trip naturally — no boilerplate, no setup ceremony, no special API surface to learn. Imperative scripting is an opt-in solution.
AI authorability is a natural consequence of being web-native — not a bolted-on feature.
Blended in the page, not shoehorned
Because the scene graph lives in the DOM, HTML elements and 3D objects coexist on the same page — and Skenra ships sophisticated overlay primitives to compose them.
Live HTML annotations anchor real HTML — markdown, SVG, interactive widgets — to 3D positions, tracking the camera, scaling with depth.
Depth-aware occlusion. HTML overlays render behind, in front of, or partially occluded by 3D geometry.
Standard pointer events. Clicks on 3D fire DOM events on the corresponding scene node. The user never sees the seam.
Drag-and-drop unlocked. Drag HTML onto 3D objects and drop 3D objects onto HTML — native HTML5 drag-and-drop crosses the seam in either direction.
<input type="range">depth-occluded by 3D, live A working slider — real focus ring, real thumb you can drag — sits in 3D space. A passing geometric form crosses in front of it: the thumb gets clipped, reappears when exposed, and stays draggable through the seam. This is the moment.
Part of a rich web experience — not bolted on.
with a 3D figure flowing inside the column Prose paragraphs in a narrow column. An inline pull-quote, a code block. And — flowing inline with the typography, respecting the column width and baseline grid — a small 3D figure that animates in place. The figure's caption: "Embedded in this article. In Claude Code. In Claude Design. In MCP. As an Artifact." One image, one caption, all four ecosystem touchpoints landed at once.
Let humans and AI think in 4D
Think in 4D
Use Skenra in your slides
Allow AI and humans to think in 4D to learn, teach and create.
How can we boost motion 3D?
Specialized training
Open source Skenra
Lead the platform where humans and AI can learn, teach and create.