Voxel Island Diorama

About this style

Voxels, short for volume pixels, are the cells of a 3D grid, and voxel art builds every object out of identical cubes, much as pixel art builds images out of squares. Block-built sandbox games and free voxel editors made the look widely familiar, and artists took it up for small, toy-like dioramas. A floating island is a favorite subject because it fits a whole world, from roots to rooftop, into one turntable view. Game studios, illustrators and tech brands use it to feel playful and handmade.

Make a 10-second voxel diorama: a floating island builds itself layer by layer, sprouts trees, a tiny house and a waterfall, and turns slowly like a model on a turntable.

<inputs>
- Island name: Thistle Isle.
- Caption: "Population: two and a cat."
- Counter label: VOXELS.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Sky: a vertical gradient #4A5BC7 → #A9B5F4 → #D9DCFA; blocky white voxel clouds drift at different depths, two below the island.
Island, one unit per voxel: a 26×22 footprint from seeded noise; grass #7CC56A, two soil layers #9B6B44, rock #6E6A80 tapering over 10 layers to a stalactite tip #545066. On top: a pond #5CC4EE, four trees (trunks #7A4E2D, lumpy canopies #3D9A56 and #5BB868), a house (walls #F3E6CC, stepped roof #D8633A, windows #FFD98A, chimney) and a four-voxel cat #2B2B33.
Each voxel jitters ±5% in lightness and is darkened up to 20% by occlusion baked from its neighbors. One InstancedMesh per material of RoundedBoxGeometry (radius 0.06), roughness 0.9. A warm sun #FFF0D6 from the upper right with soft shadows, plus a lilac hemisphere fill, gives every cube three values: lit top, mid side, dark side.
Water: a two-voxel fall of #6FCBF2 with #CFF3FF foam runs from the pond over the edge and past the tip, each voxel at y = top − ((t·5 + k·0.5) mod length), shrinking away below. Smoke: three pale voxels on a 1.5s loop.
Camera: fov 28, 30° elevation, the island 55% of frame width near (1000, 570); it turns 50° on easeInOutSine, at rest by 9.0s, and bobs 0.15 units on a 4s sine.
Type: name in Pixelify Sans 600, 72px, white, at x 120, cap top y 110; caption in Pixelify Sans 400, 28px, #E6EAFF, beneath. Counter right-aligned at x 1800, baseline y 980: a 22px label over the 44px tabular count of voxels placed so far.
Build: each voxel scales from 0 with easeOutBack (1.5) over 0.22s, starts within a layer spread over 0.18s.
Premium is a clean silhouette, true unit cubes, darker creases, three values per face. Cheap is random colors, flat light and a fast spin.
Banned: textures on cubes, round shapes, mixed voxel sizes, outlines, bloom, turning past 60°, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: sky and drifting clouds; the counter reads 0.
- 0.6–3.4s: the island builds from the tip up, a layer every 0.2s, ending with the grass.
- 3.4–4.8s: trees grow, trunks a voxel at a time, canopies popping 0.25s apart.
- 4.8–6.2s: the house builds course by course; smoke starts; the cat appears.
- 6.2–7.4s: the pond fills and the waterfall runs over the edge.
- 7.4–8.4s: the name types on at 30ms per letter; the caption follows.
- 8.4–10s: hold; the turn eases out by 9.0s while water, smoke and bob continue.
Other lengths: scale the build beats; keep at least 1s of hold.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Bake layout, colors and occlusion once at load; build, water and smoke are closed-form in t.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for cubes of different sizes, a waterfall detached from pond or edge, a counter that disagrees with what is built, the title touching trees at any angle. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…