Voxels 3D Animation Experiment

By Dave Holloway

Images created using AI

A close-up portrait of an exhausted ancient Egyptian construction worker. He stares at the camera with a vacant gaze while clutching a gourd of water to his chest. His face is dirty and his skin scarred. The pyramids of Giza being constructed on the horizon

Getting all Minecraft with CSS

I recently stumbled across a great article on CoDrops written by Agustín Capeletto. The article discusses his concept of the Voxel – Minecraft styled 3d cubes arranged on a layered CSS grid that can be positioned to create all manner of weird and wonderful shapes. He’s even made a Voxel rendering engine!

This intrigued me, so I decided to play around building an interactive 3D text model with animations added via GSAP and native JS for the drag rotation.

You can view my live experiment here: https://daveholloway.uk/voxels

My example is a little heavy on the processing power, so can get a little laggy on some devices. The Voxel editor strips out unused faces to keep things leaner, but I had to include faces of every cube to enable the full 3D rotation. I’d therefore see this being more useful to smaller grids, maybe an 8×8 max instead of the 16×20 grid I’ve used below.

Still, it’s a cool structure with a lot of web animation potential.

About the author

Dave Holloway is a multi-award-winning designer, developer and strategist based in Leeds (UK). For 16 years, he ran a multi-award-winning creative agency working on a diverse range of projects for world-class clients. He now works in collaboration with creative agencies and brands across the globe. Whether setting the direction through intelligent brand strategy, or tactical execution through digital and offline channels, he helps businesses of all sizes to communicate more effectively.