Introduction
glyphcss is an ASCII polygon-mesh rendering engine for the DOM. It paints 3D meshes
(OBJ / glTF / GLB / VOX) into a character grid, then animates rotation via CSS
steps(N) keyframes. JavaScript runs once at scene init and again only when the user
drags or zooms — never per frame.
The mental model
Section titled “The mental model”A glyphcss scene is one <pre> per scene plus a sparse <div> hit layer.
The <pre> contains N pre-baked rotation frames stacked vertically; CSS animates the
strip with steps(N, end) over a configurable duration. Hotspots (one per registered
3D anchor) get their own @keyframes that step through projected positions in sync
with the strip.
Tradeoffs
Section titled “Tradeoffs”| glyphcss | CSS polygon renderers | |
|---|---|---|
| Cost dominator | grid cell count | polygon count |
| Per-polygon DOM events | opt-in via <GlyphHotspot> | ✓ (one node per polygon) |
| Texture / material support | wireframe + Lambert ramp + voxel face | full UVs, atlas, lighting |
| Per-frame JS work | none (CSS-driven) | none (CSS-driven) |
| Visual style | ASCII / glyph art | smooth-shaded |
glyphcss is the right tool when you want iconic, terminal-aesthetic 3D with handpicked interactivity — not when you need photorealistic texture mapping.
What’s next
Section titled “What’s next”- Quickstart — npm-installable demo in 30 seconds.
- Core Concepts — the strip flipbook, the hit layer, the camera contract.
- Gallery — tune live, see the renderer at work.