{"id":48676602,"url":"https://github.com/LayoutitStudio/voxcss","last_synced_at":"2026-04-26T12:00:28.066Z","repository":{"id":324622310,"uuid":"1097690516","full_name":"LayoutitStudio/voxcss","owner":"LayoutitStudio","description":"A CSS voxel engine. A 3D grid for the DOM. Renders HTML cuboids by stacking grid layers and applying transforms. ","archived":false,"fork":false,"pushed_at":"2026-03-24T11:33:44.000Z","size":1569,"stargazers_count":417,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-25T14:41:34.568Z","etag":null,"topics":["3d-transforms","css-grid","voxel-engine"],"latest_commit_sha":null,"homepage":"https://voxcss.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LayoutitStudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-16T16:51:14.000Z","updated_at":"2026-03-24T11:33:49.000Z","dependencies_parsed_at":"2025-12-15T20:04:38.462Z","dependency_job_id":null,"html_url":"https://github.com/LayoutitStudio/voxcss","commit_stats":null,"previous_names":["layoutitstudio/voxcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/LayoutitStudio/voxcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayoutitStudio%2Fvoxcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayoutitStudio%2Fvoxcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayoutitStudio%2Fvoxcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayoutitStudio%2Fvoxcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LayoutitStudio","download_url":"https://codeload.github.com/LayoutitStudio/voxcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LayoutitStudio%2Fvoxcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32296259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T09:34:17.070Z","status":"ssl_error","status_checked_at":"2026-04-26T09:34:00.993Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d-transforms","css-grid","voxel-engine"],"created_at":"2026-04-10T17:00:19.078Z","updated_at":"2026-04-26T12:00:28.051Z","avatar_url":"https://github.com/LayoutitStudio.png","language":"TypeScript","readme":"# VoxCSS\n\nA 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, or plain JavaScript.\n\nVisit [voxcss.com](https://voxcss.com) for docs and model examples.\n\n\u003cimg width=\"1725\" height=\"865\" alt=\"voxscene\" src=\"https://github.com/user-attachments/assets/e3707a01-f257-4f62-9577-a9e08b3652e3\" /\u003e\n\n## Installation\n\n```bash\nnpm install @layoutit/voxcss\n```\n\nYou can also load VoxCSS directly from unpkg. Here is a minimal example:\n\n```html\n\u003cdiv id=\"voxcss\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"module\"\u003e\n  import { renderScene } from \"https://unpkg.com/@layoutit/voxcss@latest/dist/index.js\";\n\n  renderScene({\n    element: document.getElementById(\"voxcss\"),\n    camera: { interactive: true },\n    scene: {\n      voxels: [\n        { x: 3, y: 3, z: 0 },\n        { x: 3, y: 3, z: 1 }\n      ],\n      showFloor: true\n    }\n  });\n\u003c/script\u003e\n\n```\n\n## Framework Components\n\nVue and React wrappers expose the same components with identical props: `\u003cVoxCamera\u003e` controls the viewpoint (zoom, pan, tilt, rotation, perspective), while `\u003cVoxScene\u003e` receives the voxel array and manages the 3D grid and its decorations.\n\n```tsx\nimport { VoxCamera, VoxScene } from \"@layoutit/voxcss/react\";\n\nexport default function App() {\n  const voxels = [{ x: 1, y: 1, z: 0, color: \"#f00\" }];\n\n  return (\n    \u003cVoxCamera interactive\u003e\n      \u003cVoxScene voxels={voxels} /\u003e\n    \u003c/VoxCamera\u003e\n  );\n}\n```\n\n![apple](https://github.com/user-attachments/assets/f6764fe9-3a8f-45d0-8976-4b1b4d6ff760)\n\n## API reference\n\n### VoxCamera props\n\n- `zoom`, `pan`, `tilt` – translate the camera in/out, vertically, and horizontally.\n- `rotX`, `rotY` – rotate around the X/Y axis.\n- `perspective` – control CSS perspective depth (or disable it).\n- `interactive` – enable pointer drag controls.\n- `invert` – flip pointer drag direction.\n- `animate` – auto-rotate the camera; accepts `true`, a speed number, or `{ axis, speed, pauseOnInteraction }`.\n\n### VoxScene props\n\n- `voxels` – array of voxel objects; optional (defaults to empty) to render a blank scene.\n- `rows`, `cols`, `depth` – override the inferred bounds and explicitly set the 3D grid size.\n- `show-walls`, `show-floor` – toggle structural planes.\n- `projection` – pick `\"cubic\"` or `\"dimetric\"` presets to change the layer spacing (50/25px).\n- `mergeVoxels` – merge strategy for performance: `false` (default), `\"2d\"` (merge across `x`/`y` within each `z` layer), or `\"3d\"` (merge across `x`/`y`/`z`). If any voxel uses `z2`, the engine takes the `\"3d\"` render path.\n\n### Voxel data model\n\nEach voxel describes a single cell in the grid: \n- `x`, `y`, `z` –  required integer coordinates.\n- `x2`, `y2`, `z2` – optional for area footprints.\n- `shape` – `cube` (default), `ramp`, `wedge`, or `spike`.\n- `color` / `texture` – apply solid fills or image URLs per voxel.\n- `rot` – rotation in degrees; ramps/wedges/spikes snap to 90° increments.\n\nExample:\n```ts\nconst voxels = [\n  { x: 2, y: 2, z: 0, color: \"#f97316\" },\n  { x: 3, y: 2, z: 0, shape: \"ramp\", rot: 90, color: \"#94a3b8\" },\n  { x: 3, y: 3, z: 0, texture: \"/example.png\" }\n];\n```\n\n## Performance\n\nVoxCSS renders everything in the DOM, so performance is mostly determined by how many elements the browser has to manage. To reduce work, the engine does culling based on voxel neighbors and camera rotation, rendering only the outer surface of the model and skipping faces that are not visible.\n\nThe `mergeVoxels` prop can be essential for performance. It controls the stacked grid geometry and allows the engine to group voxels into larger merged elements, significantly reducing DOM node count.\n\n\u003cimg width=\"1600\" height=\"750\" alt=\"mergeVoxels\" src=\"https://github.com/user-attachments/assets/be13a202-7095-4d6d-aea3-6c87d647bb62\" /\u003e\n\n- `mergeVoxels=\"2d\"` merges adjacent voxels across x / y within each z layer.\n- `mergeVoxels=\"3d\"` merges across x / y / z. This switches the engine from voxel to volumetric rendering.\n\n## Loading MagicaVoxel (.vox) files\n\nUse the built-in parser to turn a MagicaVoxel `.vox` binary into a voxel object and feed it to `renderScene`:\n```html\n\u003cdiv id=\"voxcss\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"module\"\u003e\n  import { parseMagicaVoxel, renderScene } from \"@layoutit/voxcss\";\n\n  const model = await fetch(\"/models/example.vox\")\n    .then(r =\u003e r.arrayBuffer())\n    .then(parseMagicaVoxel);\n\n  renderScene({\n    element: document.getElementById(\"voxcss\"),\n    camera: { interactive: true },\n    scene: {\n      voxels: model.voxels,\n      showFloor: true\n    }\n  });\n\u003c/script\u003e\n```\n\n## Made with VoxCSS\n\n[Layoutit Voxels](https://voxels.layoutit.com)\n→ A CSS Voxel editor\n\n\u003cimg width=\"1000\" height=\"600\" alt=\"layoutit-voxels\" src=\"https://github.com/user-attachments/assets/a0c83010-3852-4180-95d8-a5d69b1b2ae5\" /\u003e\n\n[Layoutit Terra](https://terra.layoutit.com)\n→ A CSS Terrain Generator\n\n\u003cimg width=\"1000\" height=\"601\" alt=\"layoutit-terra\" src=\"https://github.com/user-attachments/assets/98ce47cb-831d-4680-b7fa-c105df202c1c\" /\u003e\n\n## License\n\nMIT.\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLayoutitStudio%2Fvoxcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLayoutitStudio%2Fvoxcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLayoutitStudio%2Fvoxcss/lists"}