Isometric Miniature City

About this style

Isometric miniature worlds show a scene from a fixed, elevated angle with no perspective distortion, a viewpoint familiar from city-building games; the toy-like finish echoes tilt-shift photography, which makes real streets look like models. Rendered as a floating diorama with rounded, toy-like forms and soft shadows, the style makes a whole system readable at a glance. Tech, real-estate and logistics brands use it to show many moving parts at once without clutter.

<inputs>
You're making an isometric miniature city that builds itself. I may supply any of these; if I don't give you something, use the default and don't ask.
- Place name: Pebble Harbor (fictional).
- Buildings: bakery, café, three-story apartments, corner shop with a clock tower, small library, plus a park with trees and a fountain.
- Time: afternoon into dusk, the clock running 4:00 PM → 8:00 PM.
- Length: 10 seconds.
</inputs>

<direction>
One city block on a thick floating slab (grass top #9BD26C, soil sides #8A5D3B) over a vertical gradient shifting from #D5EEFF→#FFE6D6 (day) to #2C2F5E→#E08467 (dusk).
Toy palette, six building hues at most: coral #FF7A6B, butter #FFD36E, mint #7FD8BE, sky #7CC6FE, lilac #B9A3FF, cream #FFF4E0; roofs a darker shade of their walls. Road #5B6170 with #F4F1E8 dashes; sidewalks #E7E0D2; windows #34405F by day, emissive #FFD27A at dusk.
Forms are chunky, with soft bevels (RoundedBoxGeometry, radius 0.04–0.08), like painted wood or vinyl. Readable-scale detail only: awnings, lamps, benches, a mailbox, lollipop trees.
OrthographicCamera at true isometric angles (45° yaw, 35.264° pitch), no perspective. MeshStandardMaterial, roughness 0.8. A hemisphere fill plus one directional sun with soft shadows (PCFSoftShadowMap, 2048 map) that lowers and warms so shadows stretch.
Motion: buildings rise floor by floor, each storey scaling up from 0 with easeOutBack (1.4) over 0.25s, 120ms apart; roofs drop from +2 units and bounce once. Trees and props spring in with ≤10% overshoot. Cars are rounded blocks with wheels: position = path(fract(t·speed + offset)), easing through corners. At dusk, windows switch on over 1.2s in a seeded order; lamps get small additive glow sprites. The diorama turns 15° across the piece (easeInOutSine).
Overlay: "Fredoka" 600 title, 64px, top-left; the clock in "Fredoka" 500, tabular numerals.
Authentic: a clean silhouette, one consistent angle, contact shadows grounding every object. Cheap: a rainbow clutter of tiny parts.
Banned: perspective cameras, texture images, heavy bloom, real brands or car models, 3D text, physics engines.
</direction>

<structure>
- 0–1.0s: the slab rises from below (easeOutCubic); road tiles drop in sequence around the loop.
- 1.0–4.0s: five buildings assemble in turn; roofs bounce.
- 4.0–5.5s: the park springs in (trees, fountain, lamps, benches); the first car enters.
- 5.5–8.0s: three cars loop; the sky warms; shadows lengthen; the diorama turns.
- 8.0–9.2s: dusk: windows and lamps light in seeded order; the background reaches night.
- 9.2–10s: the composition holds while cars keep circling; the clock reads 8:00 PM.
Other lengths: scale the beats proportionally and keep at least 0.8s of hold.
</structure>

<build>
One self-contained index.html (inline CSS and JS; Google Fonts via <link> are fine), a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Use three.js, truly needed here for depth, soft shadows and lit windows: a pinned CDN build (e.g. three@0.160.0 plus addons) via an import map, preserveDrawingBuffer: true, one render per seek.
window.seek(t) (t in seconds) sets every visual from t alone, clamping past the end to the last frame. No CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames. Window order and sizes come from a fixed-seed PRNG (anything varying per frame seeds from the frame number); never Math.random.
With no ?render in the URL, call seek from requestAnimationFrame so it plays in a browser; with ?render, don't start that loop.
</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: nothing intersecting, soft shadows present, cars on the road, title and clock clear of the diorama. 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…

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…

Liquid Chrome Blob

Made by us

A mirror-chrome metaball mass floats in a dark studio, buds into droplets that orbit and fuse with surface tension, the…