AI CSS Animations

Rangoli

Seen from above on a red-oxide floor, a rangoli is drawn ring by ring in rice flour and grainy colored powder: a rose lotus, marigold bands, green leaves and indigo paisleys, then rows of dots, before twelve clay diyas light one by one and their warm light falls across the powder.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
Canvas
Topics
Shapes · Line art
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Rangoli is a floor art of India, drawn at doorways and in courtyards in colored powder, rice flour, sand or flower petals to welcome guests and mark festivals, above all Diwali. It is traditionally drawn by women, freehand, letting powder trickle from between the thumb and forefinger, and its designs are usually symmetrical, built from lotus petals, leaves, paisleys and bands of dots. Regional forms include kolam in Tamil Nadu, drawn in rice flour around a grid of dots, and alpana in Bengal. At Diwali, the festival of lights, rangoli are ringed with diyas, small clay lamps burning oil or ghee, and households draw new designs every festival season.

The prompt

Make a 10-second rangoli film, seen from above: a symmetrical rangoli is drawn by hand in rice flour and colored powder on a courtyard floor at dusk, then the clay diyas around it are lit one by one.

<inputs>
If I don't give you something, use the default and don't ask.
- Title: "Light at the threshold"
- Line: "A rangoli for Diwali: rice flour, seven colors and twelve diyas."
- Counter label: "Diyas lit"
- Powders: rice-flour white, then marigold, turmeric yellow, rose, magenta, peacock blue, parrot green and indigo.
- Diyas: 12.
- Length: 10 seconds.
</inputs>

<direction>
- Look: a top-down time-lapse on a polished red-oxide floor at dusk, under a warm overhead lamp: powder with real grain and relief, laid down by a hand you never see, then warmed by small flames.
- Palette: floor red oxide #6A2A1F with soft mottling #5A2219, a polished sheen and a worn paler patch #7A3426 toward the bottom edge; chalk guide lines #E9DCCB at 45%; rice flour #F6F1E7; marigold #F49A1A; turmeric #F3C531; rose #EF5B8C; magenta #B0186A; peacock blue #0F74A8; parrot green #43A63A; indigo #2C2C7E; diya clay #B65A31 with rims #8E4324 and oil #D6982C; flame core #FFF6D6, body #FFB43C, tip #FF7A1E, base #4C7BE0; lamp light #FFE2B8; diya light #FFB45A; type #F6E9D2, secondary #E3C6A5.
- How the colors interact: on the red floor, green and peacock blue sit against their complement and vibrate; the white rice-flour outlines separate every color so no two touch; when the diyas light, their pools turn the white outlines gold, deepen the magenta and lift the marigold, and the polished floor carries a soft streak of each flame.
- The design, centered at (1200, 540) and 730px across, in eightfold symmetry from the center out:
  1. center: a turmeric disc 60px across with a magenta dot and a ring of eight white dots;
  2. lotus: eight pointed petals reaching from radius 30 to 120, rose toward the tip and magenta at the base (two powders laid side by side, not blended), each outlined in white, with a small green sepal between each pair;
  3. band, radius 165–190: alternating marigold and turmeric segments, edged inside and out by rows of white dots;
  4. leaves and buds, out to radius 255: sixteen parrot-green leaves with white midribs alternating with sixteen peacock-blue teardrop buds;
  5. paisleys, radius 255–325: eight indigo mango motifs, each with a magenta inner curl and a row of white dots following its curve, tips turning clockwise;
  6. border, radius 335–365: a scalloped white line with a marigold dot in every scallop.
  It is symmetric in structure but drawn freehand: each repeat varies ±3% in size and up to 2° in angle.
- Powder that reads as powder: at load, rasterize every element into a color texture and a height texture. Each mask is filled with seeded grains (1–2.5px, tone ±10% of its color, with 4% stray grains of a neighboring color); edges are ragged, with loose grains scattered up to 3px out. Lines are 7–10px wide with a rounded crest; filled areas have a flatter top with faint parallel finger-drag streaks. The shader lights the height field so every line has a fine crest highlight and a shadow on its far side.
- Drawing order, as an arrival-time texture: each pixel gets the time the powder reaches it. Lines grow along their length at a steady hand speed (white outlines 900px/s, time-lapse), dots land one at a time 30 ms apart, and fills sweep from each petal's base to its tip in three finger strokes. Work goes ring by ring from the center out and, within a ring, one repeat after another clockwise, the way someone moving around the design would draw it. A pixel appears when t passes its arrival time plus a per-grain jitter of 0–60 ms, so the leading edge is grainy, never a smooth wipe. At the drawing point, a small puff of 20–30 grains falls and scatters on closed-form arcs.
- Guide lines: before any powder, faint chalk construction lines draw in, a circle at each ring radius and eight radial lines, which the powder then covers.
- Diyas: twelve sit on the floor around the design from the first frame, at radius 425, one every 30° starting at the top. Each is a pinched clay lamp seen from above at a slight angle: a 60px teardrop bowl with a raised rim, its spout pointing outward, faint finger marks, a pool of oil with a highlight and a cotton wick lying in the spout. Lit in clockwise order, each flame starts as a small bead at the wick and grows into its teardrop over 0.3 s (no flash). Flames are drawn upright, as if seen from a slight angle: 36px tall, with a blue base, a white-gold core and an orange tip, swaying ±3° at 1.1–1.5 Hz and changing height ±5% at 1.8–2.4 Hz with seeded phases; their brightness never varies more than 8%. Each lit diya adds a warm pool to the floor and to the powder's lighting (radius 220px, #FFB45A, up to 35%) and a soft streak of reflection in the polish.
- Light: the overhead lamp lights everything evenly and warmly from the first frame; as the diyas light it eases to 70%, never lower, so the pools read and the colors stay clear.
- Camera: straight down. A slow 4° clockwise turn and a 3% push-in across the piece, eased to rest by 8.4 s.
- Type (HTML over the canvas): title Rozha One 400, 84px, #F6E9D2, two lines, top-left at (120, 120); line Hind 500, 26px, #E3C6A5, at most 520px wide, beneath it; at (120, 880), the counter label in Hind 600, 22px, tracked 0.12em, over its count "0/12" in Hind 600, 44px, tabular figures. Everything stays left of x 700. Text rises 12px as it fades in over 0.6 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: powder you could brush away, with grains, raised crests and ragged edges, laid down ring by ring by an unseen hand, and real flames whose light falls on the work. Cheap: a vector mandala wiping in, glowing neon lines, emoji lamps.
Banned: neon or glow on the powder, blended gradients inside the powder, perfect vector edges, hands or people, deities or religious symbols, fireworks or sparklers, bokeh, lens flares, a flame that strobes, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.6s: the bare floor under the lamp with the unlit diyas around it; the chalk guides draw in; the title rises in at 0.3 s and the counter appears at 0/12.
- 0.6–1.8s: white outlines: the center, the lotus and the band edges flow on, ring by ring, clockwise.
- 1.8–2.6s: the outer outlines: leaves, buds, paisleys and the scalloped border.
- 2.6–5.0s: the fills, center out: turmeric and magenta at the center, rose and magenta petals, the marigold and turmeric band, green leaves and blue buds, indigo paisleys with magenta curls.
- 5.0–5.8s: dots: white rows run around the band and along each paisley, and a marigold dot drops into every scallop.
- 5.8–6.2s: the rangoli complete under the lamp (the 6.0 s frame: every ring finished, the twelve diyas still unlit, nothing mid-stroke).
- 6.2–8.4s: the diyas light one by one, clockwise from the top, 0.2 s apart; the counter climbs to 12/12; the warm pools overlap and the lamp eases down; the line rises in at 7.6 s.
- 8.4–10.0s: hold: only the flames sway.
For other lengths, stretch the fills; keep the diya lighting 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: Canvas: one WebGL canvas (preserveDrawingBuffer: true, drawn once per seek), its backing store sized from CSS size × devicePixelRatio, whose fragment shader draws the floor and reveals the prebuilt powder color and height textures through the arrival-time texture, lit by the lamp and the twelve diya lights passed as uniforms; a 2D canvas above it for the diyas, flames, reflection streaks and grain puffs ('lighter' compositing for the flames). Text is HTML over the canvas.
- Arrival times, grains and puffs are built once at load from a seeded PRNG (keep load under 8 s); the camera turn, the flame sway and every light's level are closed-form functions of t.
</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 powder reads as grains with raised crests and ragged edges at 1280×720, never as smooth lines; repeats are drawn in turn around the circle; colors never blur into each other and white outlines keep them apart; the design is symmetric with small freehand differences; the diyas sit at even 30° spacing and light clockwise in step with the counter; no flame strobes; the 6.0 s frame is the finished rangoli; nothing important comes within 60px of the frame edge. 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.

Similar prompts

More like this on the motion design inspiration board: Motion graphics inspirationLine art animation inspiration