A little yellow car drives the one road around a tiny planet of soft hills, 38 trees, a pond and a house, the world rolling under it, then the camera pulls back to show the whole planet floating in a peach sky as the car turns into the drive.
Written and rendered by AI CSS Animations Oct 18, 2026
Tiny planets began as a photographic trick: a full 360° panorama is mapped with a stereographic projection so the ground wraps into a small globe with the sky around it. 3D artists took the idea further into whole miniature worlds, with houses, trees and roads wrapped around a sphere in soft, toy-like materials, and video games have built entire levels on small round planets. The curve makes a whole place readable at once, and a vehicle circling it shows the scale instantly. Studios use the look for playful brand films, game trailers and travel stories.
Make a 10-second 3D film of a tiny planet: a little car drives the one road around a miniature world of hills, trees, a pond and a house, while the camera pulls back to reveal the whole planet. <inputs> If I don't give you something, use the default and don't ask. - Planet: Kettlewick (fictional). - Title: "Round the block" - Line: "Kettlewick: one road, one house, 38 trees." - Car: a small yellow two-door hatchback. - Length: 10 seconds. </inputs> <direction> - Look: a soft, sunny toy world: smooth rounded forms, saturated but gentle colors, warm sunlight and long soft shadows, floating in a peach sky. Not voxel and not low-poly: every form is smooth and beveled. - Palette: sky #FFC9A3 at the top easing to #FFE7CF behind the planet with a soft #FFF3E4 halo; grass #8CCB6A with lighter #A9DC84 meadow patches; road #5E6375 with #FFF1D6 center dashes and #E9E2D3 curbs; pond #59B8D9 with a #A7E1EE rim; house walls #FFF4E2, roof #E0674A, door #3E6FB0, lit windows #FFE7A8; trees #3F8F5B and #6CB65E on trunks #8A5A3C; fence #FFFFFF; car #FFC42E with windows #2E3A4F, tires #2A2A2E and headlights #FFF6D8; clouds #FFFFFF; type #4A2E2A, secondary #8A5A4E. - The planet: a sphere of radius 3, gently displaced by seeded low-frequency noise (±0.08) into soft hills, kept smooth along the road and under the house. The road is a ribbon 0.36 wide with curbs (0.04 wide, raised 0.015) running one full great circle tilted 24° to the equator, with dashed center markings, plus a short drive to the house. On the surface: the house on a gentle rise beside the road (a box with rounded edges, a pitched roof with eaves and a ridge cap, a chimney, two framed windows and a door, a front path and a mailbox), a pond with a rim and two lily pads, 38 trees of two kinds (round crowns on tapered trunks, and conifers of three stacked rounded cones), a white picket fence around the garden, a few boulders and dots of flowers. Everything stands on the surface along its normal, placed by a seeded PRNG with no overlaps and nothing on the road. - The car, built like a real small car at toy scale: a body 0.42 long with a rounded lower shell and wheel arches, a cabin with a sloped windscreen and rounded side windows (dark glass with a highlight), bumpers, round headlights and tail lights, four wheels with tires and hubcaps, and a tiny roof aerial. It drives at 0.9 units/s: its position is the great-circle point at its distance s, its up is the surface normal and its heading the road's tangent; the wheels turn by distance ÷ wheel radius and the body rocks ±1° on a slow sine. - Motion: early on the planet turns under the car like a treadmill, so the car holds its place near the bottom center of the frame while the world rolls toward it; as the camera pulls back, the planet slows to a gentle 6°/s turn. Solve the planet's rotation backward from the end: at 8.8 s the house and the parked car face the camera at three-quarters. - Light, sunny from the first frame: a key DirectionalLight #FFF1DD at 2.4 from the upper left (elevation 40°) with soft shadows (PCFSoftShadowMap, 2048, a shadow camera fitted tightly to the planet) so trees, house and car cast long soft shadows that bend over the curve; a HemisphereLight #FFE9D6 / #7FAF6A at 1.0; a warm rim light from behind so the planet's edge glows against the sky. Every object also has a soft contact shadow (a blurred dark disc at 30%, laid on the surface). ACESFilmic, exposure 1.05. The planet's shaded side stays clearly green, never dark. - Clouds: five puffy clouds (clusters of 4–6 slightly flattened spheres) orbit 1.0 above the surface on their own tilted circles, slowly, never crossing the car. - Camera: fov 35. It opens close behind and above the car, the horizon curving across the frame at about y 380 with sky above it and the car at about (960, 700); it follows for a few seconds, then pulls back and rises in one continuous move (easeInOutSine) to a three-quarter view of the whole planet, about 760px across and centered at (1200, 560). It never passes through trees or clouds. - Arrival: the car turns into the drive and stops by the mailbox at 7.8 s, easing over 0.8 s with its wheels stopping with it; the windows warm on and a ribbon of soft smoke curls from the chimney. - Type (HTML over the canvas): title Paytone One 400, 88px, #4A2E2A, top-left at (120, 110); line Nunito 600, 28px, secondary, beneath; text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: smooth toy forms, soft long shadows that wrap the curve, a car with real parts that sticks to the road, a world you'd want to visit. Cheap: a green ball with cones stuck on it, a car floating off the road, flat lighting. Banned: voxels or blocky low-poly, dark or starry space backgrounds, a car that slides or leaves the road, objects floating above or sunk into the surface, people or characters, bloom, outlines, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.6s: close behind the car on the road as the world rolls toward it; trees and the pond come over the horizon; the car's shadow runs beside it. - 1.6–3.0s: still following; the house appears over the curve ahead; the title rises in at 1.8 s. - 3.0–5.6s: the camera pulls back and rises in one move; the planet's roundness reveals itself and the clouds orbit. - 5.6–7.0s: the whole planet in three-quarter view, turning slowly, the car heading for the house (the 6.0 s frame: the whole planet, the car on its near side). - 7.0–7.8s: the car turns into the drive and stops by the mailbox; the windows warm; the line rises in at 7.4 s. - 7.8–8.8s: the planet's turn eases to a stop with the house facing three-quarters toward the camera; the chimney smoke curls. - 8.8–10.0s: hold; only the smoke drifts. For other lengths, stretch the follow and the slow turn; keep the pull-back at 2.6 s and at least 1 s of hold. </structure> <build> - One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code. - window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame. - Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop. - Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek. - Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas. - The car's distance along the road, the planet's rotation and the camera are closed-form functions of t; all placement is seeded once at load. </build> <check> Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the car's wheels touch the road in every frame and it never slides or leaves it, nothing floats or sinks, shadows are soft and follow the curve, the planet's shaded side stays green, the camera never enters geometry, there are exactly 38 trees, and the title stays over clear sky. Confirm seek(10) and seek(11) match, so the final frame holds. </check>
Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…
A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…
A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…
Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…
More like this on the motion design inspiration board: 3D motion design inspiration