Show HN: VoxCSS – A DOM based voxel engine

Summary

VoxCSS A CSS voxel engine. A 3D grid for the DOM. Renders HTML cuboids by stacking grid layers and applying transforms. Supports colors and textures, interactions and culling, plus shapes, areas and projections. Works with Vue, React, Svelte, or plain JavaScript. Visit voxcss.com for docs and model examples. Installation npm install @layoutit/voxcss You can also load VoxCSS directly from unpkg. Here is a minimal example: < div id =" voxcss " > </ div > < script type =" module " > import { renderScene } from "https://unpkg.com/@layoutit/voxcss@latest/dist/index.js" ; renderScene ( { element : document . getElementById ( "voxcss" ) , camera : { interactive : true } , scene : { voxels : [ { x : 3 , y : 3 , z : 0 } , { x : 3 , y : 3 , z : 1 } ] , showFloor : true } } ) ; </ script > Framework Components Vue, React, and Svelte wrappers all expose the same components with identical props: <VoxCamera> controls the viewpoint (zoom, pan, tilt, rotation, perspective), while <VoxScene> receives the voxel array and manages the 3D grid and its decorations. import { VoxCamera , VoxScene } from "@layoutit/voxcss/react" ; export default function App ( ) { const voxels = [ { x : 1 , y : 1 , z : 0 , color : "#f00" } ] ; return ( < VoxCamera interactive > < VoxScene voxels = { voxels } /> </ VoxCamera > ) ; } API reference VoxCamera props zoom , pan , tilt – translate the camera in/out, vertically, and horizontally. , , – translate the camera in/out, vertically, and horizontally. rotX , rotY – rotate around the X/Y axis. , – rotate around the X/Y axis. perspective – control CSS perspective depth (or disable it). – control CSS perspective depth (or disable it). interactive – enable pointer drag controls. – enable pointer drag controls. invert – flip pointer drag direction. – flip pointer drag direction. animate – auto-rotate the camera; accepts true , a speed number, or { axis, speed, pauseOnInteraction } . VoxScene props voxels – array of voxel objects; optional (defaults to empty) to...