A gold and lapis zodiac wheel on aubergine velvet is filmed like fine jewellery: a raking macro over its engraving, then the sign ring clicks round like an astronomical clock, each glyph filling with coral enamel and its constellation joining in gold wire and set stones.
Written and rendered by AI CSS Animations Oct 19, 2026
The zodiac is the band of sky through which the Sun, Moon and planets appear to travel, which Babylonian astronomers had divided into twelve equal signs of 30 degrees by about the 5th century BC, each named for a constellation. The signs' glyphs, from the ram's horns of Aries to the joined fish of Pisces, took their familiar forms in medieval manuscripts. Zodiac rings turn on astronomical clocks such as the Prague astronomical clock of 1410, on astrolabes and on engraved jewellery. Watchmakers, jewellers and publishers still use the engraved gold wheel for luxury and calendar designs.
Make a 10-second 3D film of an engraved gold zodiac wheel: it turns like the dial of an astronomical clock, its constellations connect and its twelve glyphs light in sequence.
<inputs>
If I don't give you something, use the default and don't ask.
- Maker: Aldane & Thorne, Astronomical Jewellers (fictional).
- Title: "The Turning Year"
- Line: "An engraved zodiac wheel in gold and lapis, 24 cm across."
- Signs and dates, in order: Aries 21 March – 19 April · Taurus 20 April – 20 May · Gemini 21 May – 20 June · Cancer 21 June – 22 July · Leo 23 July – 22 August · Virgo 23 August – 22 September · Libra 23 September – 22 October · Scorpio 23 October – 21 November · Sagittarius 22 November – 21 December · Capricorn 22 December – 19 January · Aquarius 20 January – 18 February · Pisces 19 February – 20 March.
- Length: 10 seconds.
</inputs>
<direction>
- Look: a jeweller's object filmed like a high-end watch: a gold wheel inlaid with lapis lazuli on aubergine velvet, under big soft studio lights and one low raking light that makes every engraved line read.
- Palette: velvet #1E1226 with a soft lift #33203D behind the wheel; yellow gold #D6AE5C with highlights #FBE6A6 and shadowed gold #7A5A26; rose gold #C98E6E for the constellation ring; lapis #1B2A6B mottled with #2A3C8C, faint white calcite streaks #9FA9C9 and gold pyrite flecks #D9B45A; coral champlevé enamel #E8664D for lit glyphs; constellation stones #F4F6FF; type #F3E9D6, secondary #B8A6C0, accent gold. Coral against lapis is a warm-cool complement, and the gold holds them apart.
- The wheel, built like jewellery (1 unit = 1 cm, 24 across, 1.2 thick):
- the bezel: a yellow-gold ring from radius 11.2 to 12.0 with a reeded coin edge (360 fine grooves) and a face engraved with a degree scale: 360 ticks, every fifth longer, every thirtieth a heavy division;
- the sign ring, radius 8.6–11.0: twelve sectors split by raised gold ribs (0.12 wide, standing 0.06 proud); each sector's ground is lapis under clearcoat, carrying its glyph 1.7 tall as an engraved channel 0.04 deep, and its name in small engraved capitals (Cinzel 500, drawn into the texture after the fonts load) along the outer edge;
- the constellation ring, radius 4.2–8.4, in rose gold with a fine circular brushed finish: each sign's constellation sits in line with its sector as a stylized figure of 4–9 stars following its familiar stick figure (Leo's sickle and triangle, Scorpius's curling tail, Gemini's two parallel lines and so on); each star is a tiny rose-cut stone (a low faceted dome 0.12–0.26 across by brightness) in a raised gold bezel, and the lines between them start as faint engraved scratches;
- the center: a domed yellow-gold boss of radius 3.6 with an engraved 24-point star and a ring of guilloché waves around a milky moonstone cabochon (transmission 0.3, roughness 0.15);
- the pointer: a slim gold index arm on a small bridge fixed above 12 o'clock, its tip over the sign ring.
The sign and constellation rings turn together; the bezel, the pointer and its bridge never move; the boss counter-rotates at 4° a second, so its guilloché shimmers, easing to a stop by 9.0s.
- Engraving is real relief: draw every layer's lines into a 2048 height CanvasTexture at load, blur it 1px and convert it to a normal map plus a matching roughness map, the cuts rougher and 15% darker like oxidized grooves, so every channel catches the raking light. Draw the twelve glyphs as paths in code (even 0.12-wide strokes with slightly flared ends), never from a font, so none can render as emoji.
- Materials: gold MeshPhysicalMaterial, metalness 1, roughness 0.2 with a circular brushed roughness map, clearcoat 0.2; rose gold the same in #C98E6E; lapis roughness 0.35, clearcoat 1 at 0.05, with its mottling, calcite and pyrite in the color map; stones transmission 0.6, ior 2.4, roughness 0, thickness 0.2, so they flash from their facets as the wheel turns: sparkle from geometry, never sprites.
- Light, bright from the first frame: build an environment once with PMREMGenerator.fromScene from a room holding a large overhead softbox, tall strip softboxes left and right and a dim warm floor bounce, so the gold carries long soft reflections everywhere and never reads flat yellow or black. A key DirectionalLight #FFE7C4 at 2.4 from the low left (elevation 24°) rakes across the engraving with soft shadows (PCFSoftShadowMap, 2048) of the ribs and the pointer; a HemisphereLight #F6EEFF / #2A1830 at 0.7; a soft contact shadow under the wheel on the velvet. ACESFilmic, exposure 1.1. The lapis stays clearly blue.
- Clockwork motion: the rings advance clockwise one sign at a time, each 30° step taking 0.3s on cubic-bezier(0.5, 0, 0.2, 1) with a 0.6° overshoot that settles in 0.06s, like a detent, then resting. Step k (k = 1…12) starts at 2.7 + 0.48·(k − 1) s, so the twelfth step brings Aries back under the pointer at 8.34s.
- Lighting a sign: as each sign comes to rest under the pointer (Aries at 2.6s, before the first step), coral enamel flows along its glyph's channel from one end to the other in 0.25s with a brighter leading meniscus, and its constellation joins: a fine gold wire inlay (TubeGeometry radius 0.025, drawRange advancing) runs star to star over 0.3s, each stone catching a glint as its line arrives (emissive 0.4 easing to 0 over 0.3s, never a flash). Glyphs that have passed stay coral at 70%; the one under the pointer is at full.
- Camera: fov 28. It opens as a macro raking view across Aries' glyph and the bezel ticks, low (pitch 18°) and close, sliding across the engraving; by 2.6s it has pulled up and back to a three-quarter view (pitch 48°) of the whole wheel centered at (1180, 560), about 820px across; a slow 12° orbit through the procession; from 7.9s it rises to pitch 64° so the wheel reads almost face-on, centered at (1200, 545), about 860px across.
- Type (HTML over the canvas): kicker "ALDANE & THORNE · ASTRONOMICAL JEWELLERS" in Cinzel 500, 20px, tracked 0.2em, accent; title in Cinzel 500, 72px, #F3E9D6, two lines, top-left at (120, 120); line in Forum 400, 28px, secondary, beneath, at most 520px wide; at bottom-left a label "UNDER THE POINTER" in Forum 400, 20px, tracked 0.16em, secondary, over the caption, the sign under the pointer and its dates ("ARIES · 21 MARCH – 19 APRIL") in Cinzel 500, 26px, tracked 0.1em, which changes with a 6px rise as each sign lands. Text rises 12px as it fades in over 0.6s on cubic-bezier(0.22, 1, 0.36, 1). The type stays left of x 700.
- Premium: weighty gold with long soft reflections, engraving you can feel in the raking light, lapis with pyrite flecks, stones that sparkle from their facets, stepped clockwork motion. Cheap: a flat gold texture spinning smoothly with glowing neon glyphs and lens flares.
Banned: horoscope text or predictions, planets or moon phases, flat yellow gold, bloom or glow halos, lens flares, sparkle sprites, a starfield behind the wheel, a smooth continuous spin of the sign ring, emoji glyphs, anything flashing more than 3 times per second.
</direction>
<structure>
- 0.0–1.2s: a low macro pass across Aries' engraved glyph and the bezel ticks, reflections sliding along the gold.
- 1.2–2.6s: the camera pulls back to the whole wheel; the kicker, title and line rise in; at 2.6s Aries fills with coral and its constellation joins; the caption appears.
- 2.7–7.9s: the procession: the rings click round sign by sign, each new sign lighting under the pointer and its constellation joining, the caption changing; the camera orbits (the 6.0s frame: the wheel at rest between steps, Aries to Scorpio lit, eight constellations joined).
- 7.9–8.4s: the last step brings Aries back under the pointer; all twelve glyphs glow and every constellation is joined; the camera rises toward face-on.
- 8.4–8.8s: the camera settles.
- 8.8–10.0s: hold; the boss's counter-turn eases to a stop by 9.0s and everything is still.
For other lengths, change the step interval (at least 0.42s) and keep at least 1s 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 ring angle is a closed-form sum of the step easings; the enamel flow reads a per-glyph arc-length texture (each stroke drawn with its normalized length as a gray value) against a progress uniform; wires advance by drawRange; all height, normal and roughness maps are drawn 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 gold shows long soft reflections and never reads flat or black, every engraved line catches the raking light at 1280×720, the lapis stays blue, the glyph under the pointer always matches the caption, the ring is at rest at 6.0s and in the final frame with Aries under the pointer, every constellation follows its familiar figure, the stones sparkle without sprites, and the type stays clear of the wheel. 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 cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…
A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…
A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…
A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…
More like this on the motion design inspiration board: 3D motion design inspirationLine art animation inspiration