Agustin Capeletto
@ekrof.bsky.social
CSS superfan. Vue/Nuxt enthusiast. Opensourcing from the southern hemisphere at https://layoutit.com and https://voxcss.com ✨
Volume rendering in CSS can be achieved by slicing a 3D scene into 2D grids along each axis. Each slice is a cross-section where occupied cells are painted and translated at fixed intervals.
The problem then becomes: how can we recreate each grid pattern with the least number of DOM nodes?
The problem then becomes: how can we recreate each grid pattern with the least number of DOM nodes?
January 31, 2026 at 12:44 PM
Volume rendering in CSS can be achieved by slicing a 3D scene into 2D grids along each axis. Each slice is a cross-section where occupied cells are painted and translated at fixed intervals.
The problem then becomes: how can we recreate each grid pattern with the least number of DOM nodes?
The problem then becomes: how can we recreate each grid pattern with the least number of DOM nodes?
Reposted by Agustin Capeletto
Well this is remarkable. 😮
Someone built a 3D voxel engine using plain ol’ DOM nodes, no canvas/webgl. And it’s surprisingly performant, since it culls any faces that aren’t currently visible.
Repo: github.com/LayoutitStud...
There’s even a nifty lil’ editor!
Someone built a 3D voxel engine using plain ol’ DOM nodes, no canvas/webgl. And it’s surprisingly performant, since it culls any faces that aren’t currently visible.
Repo: github.com/LayoutitStud...
There’s even a nifty lil’ editor!
January 12, 2026 at 4:28 PM
Well this is remarkable. 😮
Someone built a 3D voxel engine using plain ol’ DOM nodes, no canvas/webgl. And it’s surprisingly performant, since it culls any faces that aren’t currently visible.
Repo: github.com/LayoutitStud...
There’s even a nifty lil’ editor!
Someone built a 3D voxel engine using plain ol’ DOM nodes, no canvas/webgl. And it’s surprisingly performant, since it culls any faces that aren’t currently visible.
Repo: github.com/LayoutitStud...
There’s even a nifty lil’ editor!
Reposted by Agustin Capeletto
Experimenting with a new grid stack for 3D volume rendering in CSS. Try it! voxcss.com/gallery/
December 18, 2025 at 3:01 PM
Experimenting with a new grid stack for 3D volume rendering in CSS. Try it! voxcss.com/gallery/
Reposted by Agustin Capeletto
makin characters with the kids tonight, CSS minecraft style voxels.layoutit.com
Layoutit Voxels - 3D CSS Grid Generator
A voxel editor powered by CSS grid and 3D transforms. Build models with HTML cuboids!
voxels.layoutit.com
December 16, 2025 at 5:22 AM
makin characters with the kids tonight, CSS minecraft style voxels.layoutit.com
Reposted by Agustin Capeletto
Now this is cool! VoxCSS draws voxels by using CSS 3D cubes, but what's cool is they're organized in stacks of CSS grids along the Z axis.
December 15, 2025 at 4:02 PM
Now this is cool! VoxCSS draws voxels by using CSS 3D cubes, but what's cool is they're organized in stacks of CSS grids along the Z axis.
VoxCSS now supports voxel merging across all dimensions. Bigger scenes, fewer DOM nodes.
github.com/LayoutitStud...
github.com/LayoutitStud...
December 15, 2025 at 2:52 PM
VoxCSS now supports voxel merging across all dimensions. Bigger scenes, fewer DOM nodes.
github.com/LayoutitStud...
github.com/LayoutitStud...
Reposted by Agustin Capeletto
Imagine crafting vibrant 3D worlds directly in your browser with tools you already know. VoxCSS brings a DOM-based voxel engine to life, opening new possibilities for interactive web experiences using just HTML and CSS. Dive in: https://github.com/LayoutitStudio/voxcss
December 11, 2025 at 4:19 AM
Imagine crafting vibrant 3D worlds directly in your browser with tools you already know. VoxCSS brings a DOM-based voxel engine to life, opening new possibilities for interactive web experiences using just HTML and CSS. Dive in: https://github.com/LayoutitStudio/voxcss
Reposted by Agustin Capeletto
Agustín Capeletto keeps bending CSS into new dimensions... literally!
His latest article unveils a new terrain generator powered entirely by stacked grids and transforms.
A perfect piece to celebrate him on his birthday: tympanus.net/codrops/2025...
His latest article unveils a new terrain generator powered entirely by stacked grids and transforms.
A perfect piece to celebrate him on his birthday: tympanus.net/codrops/2025...
November 10, 2025 at 2:42 PM
Agustín Capeletto keeps bending CSS into new dimensions... literally!
His latest article unveils a new terrain generator powered entirely by stacked grids and transforms.
A perfect piece to celebrate him on his birthday: tympanus.net/codrops/2025...
His latest article unveils a new terrain generator powered entirely by stacked grids and transforms.
A perfect piece to celebrate him on his birthday: tympanus.net/codrops/2025...
A CSS terrain generator. No WebGL, just stacked grids and 3D transforms: terra.layoutit.com
October 22, 2025 at 3:44 PM
A CSS terrain generator. No WebGL, just stacked grids and 3D transforms: terra.layoutit.com
Reposted by Agustin Capeletto
Pure CSS meets voxel art! 🧊✨
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss
March 3, 2025 at 7:21 AM
Pure CSS meets voxel art! 🧊✨
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss
Agustin Capeletto takes us behind the scenes of the CSS Voxel Editor, showing how stacked grids, trans#3dc#css=#voxelartd#purecssext-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">forms, and perspective create a fully addressable 3D space—no JavaScript required: tympanus.net/codrops/2025...
#3d #css #voxelart #purecss