Developer Tools

voxfolio

The open-source framework behind this site — a 3D voxel island homepage with a visual map editor, MDX content and WebXR.

Repository
Next.jsTypeScriptReact Three FiberThree.jsMDXWebXR

voxfolio is the framework behind this website, and I've decided to open-source it. The islands, the voxel text, and the panel you're reading this in all come from it.

Full disclosure: although the idea and the system architecture design are mostly done by me, most of the code implementation was by AI.

voxfolio in action
An island grows in, switches to night, swaps to the projects gallery, shows a hover card and opens an article.

What it does

  • Voxel island homepage. Terrain, titles and buttons are all instanced voxels, and the island grows in when the page loads.
  • Visual map editor at /editor. Paint the ground, build upward in 3D, and place and style elements. During development, changes save straight to JSON files.
  • MDX content in an animated glass reading panel, with the camera reframing the island below it.
  • Multiple islands. A button can swap the whole scene to another terrain in place.
  • Hover cards, light and dark themes, atmosphere presets, generated surroundings, and a Nixie counter.
  • Mixed reality. On a WebXR headset, the island sits on a virtual table in front of you.
The voxfolio demo island
What you start with: a demo island where every button is named after the feature it shows off.
The voxfolio map editor
The map editor at /editor.

Try it

Clone the repo, run npm install and npm run dev, and the site is at localhost:3000 with the editor at /editor. Or deploy your own copy to Vercel straight away. It's MIT licensed.