A painterly space-opera dusk: an enormous pearl-white sphere hangs over a walled hill city as rose clouds drift, small ships rise on cream and jade light trails, a freighter crosses its lower limb, and the sunset climbs the sphere as the city's lights wake. Inspired by Destiny's Traveler.
Written and rendered by AI CSS Animations Oct 19, 2026
Space-opera matte painting sets a vast, quiet object over a human place at dusk or golden hour, painted in soft masses of color rather than hard detail, so its scale reads as calm awe instead of threat. Bungie's Destiny (2014) built its world around the Traveler, a huge pale sphere hanging over humanity's last walled city, and the game's concept art made that image famous. The look borrows from 19th-century landscape painting and from the hand-painted matte backdrops of classic science-fiction film. Game studios, film concept artists and illustrators still paint establishing shots this way.
Make a 10-second painterly space-opera establishing shot at dusk: an enormous pale sphere hangs over a walled city, clouds drift, small ships rise on trails of light, and the camera pushes in slowly as the sun sets. <inputs> If I don't give you something, use the default and don't ask. - City: Haverlight (fictional). - Title: "HAVERLIGHT" - Line: "The walled city beneath the sphere" - Length: 10 seconds. </inputs> <direction> - Look: a concept painting that moves: a real 3D scene rendered and then painted over in code, so every form becomes soft, flat-edged patches of color like oil or gouache laid with a loaded brush, while silhouettes stay crisp. Calm, vast, warm against cool. The sphere is the subject: pale, whole, enormous, and never menacing. - Palette: sky zenith indigo #2E2F5E through violet #6A5A8C and rose #D38C8C to apricot #F6C08B at the horizon, with a thin glowing band #FFE7B8 low at the left where the sun has gone; the sphere ivory #EFE7DA on its lit side, a warm terminator #F2C9A6 and a lilac shadow #8F86B0, its rim catching #FFF4E4; clouds lit coral #F29F86, mid #B97A8C, shadow plum #5C4A73; the city wall ochre stone #B98B6A lit and #4D4466 in shade; towers #7A6E92 hazed toward the sky; windows #FFC978; ship trails cream #FFE3B0 and pale jade #9FE0CC; the foreground ridge deep plum-olive #2F2B3A with rose rim light #E9A08C on grass tips; title #FFF3E2, line #E7D3D6. Warm light and lilac shadow on the same objects is the whole scheme; jade appears only in two trails, a cool accent against the rose. - The scene (1 unit = 100 m), back to front: - sky: a gradient dome with high cirrus streaks (stretched noise bands) lit rose underneath; - the sphere: radius 30, about 3 km above the city's center and 150 units from the camera, centered on screen near (1180, 330) and about 500px across at the start; whole, with no breaks or openings. Its ShaderMaterial: a pearl base with soft wrap lighting (so the terminator is broad and gentle), fine concentric growth lines around an axis tilted 20° (luminance ripples of ±3%, like nacre), one thin equatorial seam, a Fresnel rim, and a faint band of pale light that travels along the seam once every 6 s; - cloud banks: two layers of billboarded cloud masses (seeded fBm shapes with flat bases) drifting left to right at different speeds, one passing below the sphere and partly in front of its lower edge, lit from the sun's side; - the city: on a broad hill, dense towers and stepped terraces rising toward the center beneath the sphere (instanced boxes and tapered spires with setbacks, seeded heights), windows as an emissive CanvasTexture whose lit fraction is a uniform; around it the great wall, 3 tall and arcing across the midground from x 120 to 1800 near y 700–800, with a buttress tower every 8 units, two gate arches and a row of beacon lamps along its parapet; - mid-ground: a dim plain with a river catching the sky's apricot; - foreground: a dark ridge across the bottom (y 880 to the bottom edge) with tall grass blades that sway on slow traveling sines and two wind-bent umbrella pines at the left. - Ships: six small craft lift from inside the wall at 2.2, 2.6, 3.0, 3.4, 6.8 and 7.4 s on closed-form curves that climb past the sphere's right side; each is a dark sliver with one warm light, trailing a ribbon of light (a camera-facing strip along its recent path, 1.2 s long, fading toward its tail), four cream and two jade. A freighter, a long hull with a stepped superstructure and a row of steady running lights, crosses in front of the sphere's lower limb from right to left over 4.0–8.0 s, silhouetted against it, its engines a soft warm glow. - The painterly pass, the key to the style: render the scene to a target, then an EffectComposer ShaderPass with a generalized Kuwahara filter (8 sectors, Gaussian weights, radius 7px at 1080p scaled by devicePixelRatio, sharpness q 8), so areas flatten into brush-sized patches while edges stay sharp; then a second pass that multiplies a seeded canvas-weave texture at 6%, adds a faint directional bristle texture (fine streaks following the local image gradient, 4%), and lifts the blacks toward #2A2340 so nothing is pure black. The title and line stay crisp HTML above it. - Light: a low sun out of frame at the left, its elevation falling from 4° to −1° across the piece (a DirectionalLight #FFC58F at 2.2, warming toward #FF9F7A), lighting the sphere, cloud tops and the city's west faces; a HemisphereLight #8E86C4 / #3A2F4A at 0.9 for the lilac shadows; ACESFilmic, exposure 1.1. As the sun sinks, the line between light and shadow climbs: buildings, clouds and finally the sphere fall into lilac from the bottom up, so in the last seconds only the sphere's upper-left crescent still glows rose. The scene is bright and legible from the first frame: the sphere is the brightest large form throughout. - Camera: fov 38, from the ridge 40 m up, a single slow push-in of 8% toward the sphere with a 2° tilt up across the piece on easeInOutSine, ending with the sphere about 560px across. No shake, no cuts. - Type (HTML over the canvas): title in Bellefair 400, 104px, tracked 0.18em, #FFF3E2, left-aligned at (120, 200) over the indigo sky; line in Josefin Sans 400, 24px, uppercase, tracked 0.22em, #E7D3D6, beneath it. Both rise 12px as they fade in over 1.0 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: a scene that reads as painted (flat brushy patches, crisp silhouettes, canvas tooth), warm light and lilac shadow on every form, real scale (a vast sphere, a long wall, tiny ships), and light that changes as the sun goes. Cheap: a plain gradient sky with a white circle, a blur filter posing as paint, neon trails, a sphere with a dramatic crack or glowing eye. - Banned: a broken, cracked or hollow sphere, faces or eyes, designs, names or logos from any real game, explosions, lasers, lens flares, bloom beyond the painted glow, blur filters standing in for paint, pure black, camera shake, anything flashing more than 3 times per second. </direction> <structure> - 0.0–2.0s: the wide view: the sphere glowing warm on its left side over the hill city, clouds drifting beneath it, grass swaying on the ridge, a third of the windows lit; the push begins. - 2.0–4.0s: four ships lift from inside the wall one after another, their cream and jade trails curving up past the sphere's right side. - 4.0–6.0s: the freighter slides in from the right and crosses in front of the sphere's lower limb, its running lights steady; the seam's light band travels; the clouds drift on. The 6.0 s frame is complete: the sphere, the freighter in silhouette against its lower edge, two trails still arcing, the lit city and wall. - 6.0–8.2s: the sun sinks: lilac shadow climbs the towers, then the clouds, then the sphere until only its upper-left crescent glows rose; windows rise to 90% lit; the beacon lamps along the wall light one after another from left to right (6.6–7.8 s); two more ships lift. - 7.8–8.6s: the title and line rise in over the indigo sky; the freighter leaves the frame at the left. - 8.6–10.0s: hold: the push eases to rest by 9.0 s; the clouds, grass and trails keep drifting slowly. For other lengths, stretch the ship and freighter beats; keep the sunset climb over at least 2 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. - Call composer.render() once per seek in place of renderer.render(): the render pass, the Kuwahara pass, the canvas-and-bristle pass, then OutputPass. The sun angle, cloud drift, ship and freighter paths, trail strips (rebuilt from each ship's closed-form path over the last 1.2 s), window fraction, beacon lamps and camera are closed-form functions of t; the city, clouds, grass and textures are generated once at load from a seeded PRNG. </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 every frame reads as a painting (brushy flat patches with sharp silhouettes, not blur), the sphere is whole and pale with warm and lilac sides and stays the brightest large form, the wall and towers read as a walled city, ships and the freighter read as craft at real scale, the sunset climbs the sphere from the bottom up after 6 s, nothing is pure black, the title sits on clear indigo sky, 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 inspirationMotion graphics inspiration