From a basalt terrace on a ring habitat at dawn, the rest of the ring climbs from the horizon into an ultramarine sky; daylight slides down the band, putting out its cities, then reaches the monoliths, whose glyphs light coral line by line and run out to a beacon. Inspired by Halo's rings.
Written and rendered by AI CSS Animations Oct 19, 2026
A ring habitat is a band-shaped world that spins to give its inner surface gravity, with walls along its edges to hold in the air. Larry Niven's novel Ringworld (1970) imagined one circling a star, and the idea runs through science fiction from Iain M. Banks's Orbitals to Bungie's Halo: Combat Evolved (2001), whose ring rises from the horizon and arcs across the sky above the player. Standing on one, the rest of the ring climbs from the horizon in a narrowing band, and distant parts of it can be in daylight while the ground nearby is still dark. Concept artists pair the view with monolithic alien architecture to sell its scale.
Make a 10-second 3D establishing shot of a ring habitat at dawn: from a terrace of monolithic alien architecture, the rest of the ring climbs from the horizon and arcs across the sky, daylight slides down it toward us, and glyphs carved into the monoliths light up line by line. <inputs> If I don't give you something, use the default and don't ask. - Ring: Eskara (fictional), 10,000 km across and 640 km wide. - Title: "ESKARA" - Line: "A ring 10,000 km across, at first light" - Length: 10 seconds. </inputs> <direction> - Look: a concept-art establishing shot with real geometry: we stand on the inner surface of a vast ring, so the ground ahead does not fall away to a horizon but rises: beyond a range of distant mountains the ring climbs into the sky as a narrowing band, its seas, deserts and clouds visible, its edge walls drawn as two bright lines, until it crosses the top of the frame. Dawn arrives from behind the camera, so the arch overhead is lit first and daylight runs down it toward us, the way sunrise touches high peaks before the valley. In the foreground, dark basalt monoliths carved with glyphs wake one line at a time. - Palette: sky zenith ultramarine #1C2470 through #3B5BB0 to celadon #BFE3CF at the horizon; at first a rose band #E9A9B4 just above the horizon with a slate-blue shadow band #5A6A9A beneath it (the habitat's own shadow), both fading as the sun rises; the lit band: land sage #8FB59A, ochre #D8B47A and rust #C27A55, seas #3E7FA8, clouds #F4F6F2, edge walls #D9DEE6 lit and #545C70 shaded; the band's unlit stretch #2B3560 scattered with warm city lights #FFC98A; distant mountains lilac haze #8C8FC2, their tops turning apricot #F2B48A at sunrise; valley mesas #6E8F86 in celadon haze #A9D3C4, a river #9FC9E0; the architecture basalt slate-violet #2E2A3E, sky-lit faces #5E5878 and sunlit faces #C9A98E; glyph light coral #FF7A5C with a core #FFD1B8. Coral glyph light against celadon haze and ultramarine sky is the complementary contrast; keep every glyph and beacon coral and everything natural cool or apricot. - The ring, at true scale in a far scene (1 unit = 1 km): the inner surface of a cylinder of radius 5,000 about the z axis, 640 wide, with edge walls 80 tall along both rims. The camera stands on the inner surface at the bottom of the ring, 2 m up, at mid-width, so the ground ahead curves upward without limit. A ShaderMaterial colors the surface from coordinates (angle around the ring, position across it): continents from seeded fBm with ragged coasts, a few long seas, rust deserts, mountain spines, cloud streets drifting slowly along the ring, and night-side city lights as clustered warm points that appear only where the surface is unlit. The walls are separate bands with fine vertical ribbing. Parts of the band at mid-sky stand about 100px wide on screen, narrowing toward the top of the frame. - Dawn, from physics: sunlight comes from behind the camera, 25° out of the ring's plane so it reaches the inner surface over the rim. Each point of the surface is lit where its inward normal faces the sun (with a soft 2° terminator and a warm apricot tint near it), so the far, higher parts of the band are lit first and the terminator runs down the band toward the horizon as the sun's angle rises over the piece. The walls cast a thin shadow along the band's near edge. City lights fade out as daylight reaches them. - Atmosphere: a 40 km layer over the floor. The sky is a ShaderMaterial dome: an elevation gradient through the palette, the rose and shadow bands opposite the sun at first, stars fading from the zenith as it brightens. Aerial perspective mixes the band toward the haze color by the length of its sightline through air, so its base, seen through the most air, dissolves into celadon at the horizon and its upper reaches stay crisp. Distant mountains (a seeded ridgeline 60 km out) form the visible horizon at y 690, the band rising from behind them. - The valley, in the far scene: rolling ground falling away from the terrace into a broad valley with flat-topped mesas, a winding river catching the sky, and low mist banks lying in the hollows, all hazed by distance. - The architecture, original and monumental, in a near scene (1 unit = 1 m) rendered over the far one with its own depth: a basalt terrace in the foreground; at the right a tapered pylon 70 tall (base x 1300–1700 on screen, rising past the top of the frame) with a chamfered spine down its face and a blade-like cantilevered cap; a long low wall of six glyph panels stepping down toward the valley along the lower left; a slim obelisk 26 tall at the left foreground around x 220–300, its tip near y 420 so it stays below the title; a straight channel cut into the terrace floor leading from the pylon's base to a squat beacon block at the terrace's lip near (980, 760). Every face is carved: the pylon's face carries nine horizontal registers of glyphs, the obelisk one vertical column, each wall panel two rows. Glyphs are original: angular marks generated from a seeded grammar on a 5 × 7 grid (strokes, notches, circles, dots), cut 0.3 deep as real grooves (geometry or a parallax-mapped height texture) so they read even before they light. Basalt: MeshStandardMaterial, roughness 0.85, with a fine seeded chisel normal map. - Glyph light: an emissive mask per register driven by uniforms, so each line of glyphs lights left to right with a 0.05 s bright leading edge settling to steady coral; lit grooves throw a soft coral light onto the stone around them (an emissive spill term) and the bloom catches them. Light never flickers. - Light: in the near scene, a HemisphereLight from the sky colors at 1.0 so the basalt reads (sky-lit faces at #5E5878, never below #4A4560) from the first frame; a DirectionalLight #FFD9B0 from behind the camera at low elevation whose intensity rises from 0 to 2.4 as the sun clears the far rim, with soft shadows (PCFSoftShadowMap, 2048), so first sunlight lands on the pylon's cap at 5.0 s and slides down its face, and the monoliths' long shadows stretch away toward the valley. ACESFilmic, exposure 1.1. Post: EffectComposer with UnrealBloomPass (strength 0.5, radius 0.5, threshold 0.85) so only glyphs, the beacon and the brightest clouds bloom, then OutputPass. - Camera: fov 50, yawed about 28° off the ring's direction of spin and pitched up 14°, so the band rises from behind the mountains near x 480 and arcs up and to the right, leaving the frame's top edge near x 1240; it pushes forward 6 m and cranes up 2 m across the piece on easeInOutSine. The far and near cameras share position and rotation, each in its own units. No shake. - Type (HTML over the canvas): title in Marcellus 400, 120px, tracked 0.3em, #F4F1EA, left-aligned at (120, 220) over the open upper-left sky; the line in Jost 400, 24px, uppercase, tracked 0.2em, #DCE9E4, beneath it. Both rise 12px as they fade in over 1.0 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: a structure that reads at true scale (a band that narrows as it climbs, edge walls as bright lines, haze at its base and crisp detail above), a dawn that obeys the geometry, basalt that is carved before it is lit, and coral light used only for the glyphs. Cheap: a flat ring sprite pasted in the sky, a band the same width all the way up, blue holographic glyphs, a dark foreground lost in shadow. - Banned: blue or cyan glyph light, holograms, spaceships, people, real game, studio or brand names, symbols or architecture copied from any existing game, a sun disc in frame, lens flares, a black sky, pure black shadows, camera shake, flicker, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.6s: before sunrise: the band climbs from behind the mountains into the ultramarine sky, its high arch already lit and its lower stretch dark and dotted with city lights; the rose band glows above the horizon; the monoliths stand clearly in cool sky light, glyph grooves visible but dark; the push begins. - 1.6–4.0s: daylight runs down the band toward the horizon: the terminator descends, seas and deserts take color, city lights go out ahead of it, the edge walls brighten into fine silver lines one stretch at a time; the stars fade and the rose band sinks. - 4.0–5.2s: the sun clears the rim behind us: the distant mountain tops turn apricot, the light reaches the mesas and the river, and at 5.0 s it lands on the pylon's cap and starts down its face; long shadows reach toward the valley. - 5.2–7.7s: the glyphs wake line by line: the obelisk's column from the bottom up (5.2–5.8 s), then the pylon's nine registers from the bottom up, starting 0.25 s apart from 5.5 s, each lighting left to right over 0.2 s, then the wall panels from the top step down (6.4–7.2 s). The 6.0 s frame is complete: the whole band lit and arching across the sky, sunlight on the pylon, the whole obelisk and the pylon's two lowest registers glowing, every line either fully lit or dark. - 7.7–8.4s: the light gathers at the pylon's base and runs along the floor channel to the beacon at the terrace lip, which wakes to a steady coral glow (8.3 s); the title and line rise in (7.8 s). - 8.4–10.0s: hold: the push eases to rest by 8.8 s; only the clouds on the band and the mist in the valley drift. For other lengths, stretch the descent of daylight and the glyph registers; keep the sunlight landing before the glyphs wake 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. - Use two scenes and two cameras: the far scene (ring, walls, sky, mountains, valley, in km, with logarithmicDepthBuffer: true) renders first, then the near scene (terrace and monoliths, in m) renders over it after a depth clear, both into the composer. The sun angle, the terminator, cloud drift, city-light fade, glyph masks, the channel's light and the camera are closed-form functions of t passed as uniforms; generate the glyph grammar, chisel normals and terrain once at load from a seeded PRNG. Call composer.render() once per seek in place of renderer.render(). </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 band rises from behind the mountains and narrows as it climbs with both edge walls visible, its base is hazed and its upper reaches crisp, daylight descends the band toward the horizon before it reaches the foreground, city lights show only on its unlit stretch, the basalt reads clearly from the first frame (never near-black), every glyph line is either fully lit or dark at 6.0 s, glyph light is coral everywhere, the title sits over open sky clear of the band, and the 6.0 s and final frames are complete compositions. 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