A golden-hour time-lapse of a supercell over wheat plains: its stacked, striated tower turns under a spreading anvil, rose-lit mammatus swell beneath it, lightning glows softly inside the rain core three times, and the light deepens to amber as the clock runs an hour.
Written and rendered by AI CSS Animations Oct 19, 2026
A supercell is a thunderstorm with a deep, persistently rotating updraft called a mesocyclone, the kind of storm behind most large hail and strong tornadoes. On the open plains its rotating updraft can sculpt the cloud into stacked, banded striations that storm chasers call mothership clouds, under an anvil that spreads for tens of kilometers downwind. Pouch-shaped mammatus clouds often hang beneath the anvil, and a low evening sun can light them gold and pink. Storm chasers and weather photographers film supercells as time-lapses, which make the rotation visible.
Make a 10-second golden-hour time-lapse of a supercell over the plains: a rotating, striated storm tower under a spreading anvil, mammatus glowing beneath it, and lightning flickering softly in the rain core. <inputs> If I don't give you something, use the default and don't ask. - Title: "Mothership" - Line: "Supercell over the Tamsett Plains" (fictional) - Time-lapse clock: 19:05 to 20:05 - Length: 10 seconds. </inputs> <direction> - Look: a locked-off storm chaser's time-lapse at golden hour: one enormous rotating storm sits on a flat horizon, its striated flank lit peach and gold by a low sun behind the camera, its shadowed underside deep teal-slate, clear turquoise sky around it and wheat glowing in the foreground. - Palette: clear sky turquoise #5FAFC0 at the top easing to #A6D5CF and to warm #F2C690 low on the left; lit storm flank #F3B571, peach #F8CDA2, brightest lips #FFE8C6; storm shadow #3B5E6E to deep #1E3746; anvil top in sun #F6D9B8; mammatus lit rose-orange #F09A6E with mauve shadow #7A5A72; rain core #2A3E4B with a blue-grey veil #4E6878; lightning glow #E9E4FF; wheat in sun #E2B05A with #F3D08A tips, wheat in the storm's shadow #5F5E3A; gravel road #B79B74; poles and wires #3A2C24; title #FFF6E8, secondary #FBE3C8. Gold light against teal shadow is the contrast that makes the storm read as one sculpted mass. - Scale (1 unit = 100 m): the storm stands 20 km away; its base at 1.2 km; the striated tower 12 km wide, rising to an anvil at 9–11 km that spreads 45 km downwind to the right and out of frame. - The storm is a raymarched volume in a full-screen pass after the ground, which renders first to a render target with a DepthTexture so rays stop at the land and props: - tower: density inside a radius profile that steps outward at each of 7 striations like stacked plates, each band ending in a rounded, overhanging lip; domain-warped fBm (5 octaves) breaks the surface into billows; the noise turns about the storm's axis, counterclockwise seen from above, faster low than high, so the bands visibly rotate about 120° across the piece; - wall cloud: a lowered, rotating block under the base at the tower's rear left, 3 km wide and 600 m lower; - anvil: a broad, flat-topped layer at 9–11 km, thinning at its edges, overhanging a little to the left; its underside carries mammatus: about 220 pouches (flattened spheres 0.4–0.9 km across on a jittered grid, so each sample checks only its own and neighboring cells) hanging down, each swelling and sagging on its own seeded 6–12 s cycle; - rain core: right of the tower, a column of low-density, vertically streaked precipitation from the base to the ground, a bluish veil that softens the land behind it; - inflow: a low, ragged tail cloud feeding into the tower from the right at 1.5 km. Lighting: 64 primary steps with a fixed per-pixel jitter (the same on every frame, so nothing boils), 6 steps toward the sun with Beer–Lambert extinction, a Henyey–Greenstein phase (g 0.5), an ambient term from the sky (turquoise above, warm below) so shadowed cloud is teal-slate and never grey or black, and a powder term that brightens billow edges. The low sun reaches under the anvil and lights the mammatus rose-orange. - Sun: low behind the camera's left shoulder and out of frame, its elevation sinking from 7° to 2° across the piece and its color warming from #FFD49A to #FFB070; the storm's shadow falls across the far plains while the near fields stay in sun. - Lightning: three single strokes inside the rain core at 3.1, 5.4 and 7.8 s, each a soft internal glow (a point emitter inside the volume lighting it from within) that rises in 40 ms and decays over 250 ms, adding at most 8% to frame brightness: never a full-frame flash and no visible bolt. - Ground and props (meshes): a dead-flat plain to the horizon; wheat fields as a ShaderMaterial (rows converging in perspective, seeded patch tones, a slow ripple of brightness where wind crosses); a straight gravel road from the bottom center to a vanishing point under the storm; 14 wooden power poles along it with crossarms and three sagging wires (catenaries); a farmhouse and a wind pump (a lattice tower and an 18-blade wheel turning slowly) 2 km out on the left; a barbed-wire fence along the right verge. The far ground hazes toward #C9C2A8. - Camera: a tripod at 1.6 m, fov 62, pitched up so the horizon sits at y 760; a motion-control pan of 3° to the right across the piece on easeInOutSine. The tower is centered near x 1120, its base near y 700 and the anvil top near y 300; the anvil's left overhang ends near x 760, so nothing of the storm rises above y 290 left of x 1000 and the upper-left sky stays clear. Nothing shakes. - Type (HTML over the canvas, Archivo with its wdth and wght axes requested): title in Archivo (wdth 125, weight 800), 96px, uppercase, tracked 0.04em, #FFF6E8, top-left at (120, 110) over the clear turquoise; line in Archivo (wdth 100, weight 500), 26px, secondary, beneath; the clock in Archivo 500, 22px, tabular figures, right-aligned at (1800, 1010), reading "Time-lapse 19:05" and counting to 20:05. Title and line rise 10px as they fade in over 0.8 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: a storm that reads as one rotating machine: stacked striations that turn, glowing mammatus, a rain core with a hidden flicker, golden fields under a clear sky. Cheap: a grey cloud sprite, a gradient sky with a cartoon thundercloud, a lightning-bolt overlay. Banned: visible lightning bolts, full-frame flashes, rain on the lens, a tornado, the sun disc in frame, lens flares, sprite or cotton-ball clouds, noise that boils, birds, people, camera shake, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.2s: the storm already on the horizon, lit gold, its bands turning; wind ripples cross the wheat; the clock reads 19:05. - 1.2–3.0s: the title and line rise in; the striations turn, the wall cloud spins under the base and the inflow tail streams in from the right. - 3.0–6.0s: the anvil spreads; the mammatus swell and glow rose beneath it; lightning glows inside the rain core at 3.1 and 5.4 s; the storm's shadow creeps across the far plains. At 6.0 s the whole storm stands in strong gold light, mammatus lit, no glow on screen. - 6.0–8.8s: the sun sinks toward 2° and the light deepens to amber and rose, climbing the tower as the lower bands fall into shade; one last glow at 7.8 s; the pan eases to rest. - 8.8–10.0s: hold: only the bands turning slowly and the wheat rippling; the clock at 20:05. For other lengths, keep one hour of clock per 10 s and stretch the 3.0–6.0 s beat; keep 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. - Each seek renders the ground and props to their render target, then the storm pass over them. Rotation, band drift, mammatus cycles, sun angle, lightning and the clock are closed-form functions of t, passed to the shaders as uniforms. </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 storm reads as one striated, rotating tower with an anvil and mammatus rather than a generic cloud, shaded cloud stays teal-slate and never grey or black, the frame is bright and readable from the first second, each lightning glow stays inside the rain core and adds at most 8% brightness (log mean luminance around 3.1, 5.4 and 7.8 s), nothing boils between frames, the road, poles and wind pump read clearly, and the title sits 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