Silhouette Dance

About this style

Silhouette animation goes back to Lotte Reiniger's The Adventures of Prince Achmed (1926), animated entirely with cut-out black figures and often cited as the oldest surviving animated feature film. In the 2000s, black silhouettes of dancers against flat bright color fields became a famous advertising look for portable music players, and the device spread through music videos and festival promotion. The style depends on pose: with no faces or detail, a dancer has to read from outline alone. It suits music, event and fitness brands that want energy without footage.

Make a 10-second dance film: bold black silhouettes hit pose after pose on the beat against flat color fields that cut on the bar.

<inputs>
If I don't give you something, use the default and don't ask.
- Event: Late Bloom, a dance night (fictional).
- Title: "LATE BLOOM", set on two lines.
- Line: "Fridays · Hall 9 · Doors 10 pm"
- Tempo: 120 BPM.
- Bar words: STEP, SWING, SPIN, JUMP.
- Length: 10 seconds.
</inputs>

<direction>
- Look: pure graphic silhouettes, one flat color per field, edited to the music. The power is in the poses: each dancer reads from outline alone.
- Palette: fields lime #C3F23A, hot pink #FF5FA2, cyan #33D6F2, orange #FF8A2B and violet #B58CFF, one per bar; silhouettes #0D0D0F; each bar's big word and the dancers' floor shadows in that field's color darkened to 82%; text #0D0D0F.
- Beat grid: beat n starts at (n − 1) × 0.5 s; a bar is four beats (2.0 s). Field cuts happen only on bar lines, at 0, 2, 4, 6 and 8 s, so the color never changes more than once in any second. Every beat lands a pose.
- Dancers: three distinct silhouettes, each a 2D rig of 15 joints (head, neck, chest, pelvis, shoulders, elbows, wrists, hips, knees, ankles) drawn as one black shape: tapered capsules for the limbs (thigh 46 → 34px wide, shin 34 → 22, upper arm 30 → 24, forearm 24 → 18), egg-shaped chest and pelvis, mitten hands with a thumb, and shoes with a heel. Full height 600px, feet on y 940. Each has a signature outline that follows through 0.08–0.15 s behind the body: dancer A a high ponytail (a 6-segment chain) and a short flared skirt; dancer B a round afro and wide trousers with flared hems; dancer C a bucket hat and an open jacket whose hem swings.
- Moves, a pose library defined by joint angles: hit-V (arms up in a V, one knee raised), point (one arm to the upper corner, the other hand on the hip), step-touch, arm wave (a wave rolling shoulder → elbow → wrist over one beat), body roll, kick, spin (the shoulders narrow as the body turns edge-on, the rig mirrors at that instant, then widens) and jump (knees tucked, 0.3 s in the air on a parabola). Each move's 0.12 s of anticipation against the move and its 0.18 s strike on cubic-bezier(0.2, 0.9, 0.2, 1) come just before its beat, so the pose lands exactly on the beat, then holds with a 2% settle; a cut opens on its first pose already landed. Feet stay planted unless stepping; knees and elbows never bend backward.
- Shadows: each dancer stands on a flat 220×24 ellipse in the darker tone that shrinks during jumps. There is no other floor.
- Big words: in bars 1–4 the bar's word fills the field behind the dancers in "Unbounded" 900, 420px, in the darker tone, centered at y 640 and sliding 60px left across the bar at constant speed.
- Group sizing: in group bars the dancers scale to 0.85 or 0.8 and stand far enough apart that no two silhouettes touch.
- Type: the title in Unbounded 900, 150px, #0D0D0F, on two lines at x 120 with baselines at y 420 and 580; the line in Unbounded 500, 30px, beneath on baseline y 650. A beat counter at bottom left: four 14px dots from x 120 at y 990, the current beat's dot filled and the others outlined.
- Premium: silhouettes that read instantly as people, weight and anticipation in every move, every hit on the beat, cuts only on the bar. Cheap: stick figures bouncing, poses landing between beats, color strobing on every beat.
Banned: earbuds, cords, music players or phones, faces or details inside the silhouettes, gradients, glow, field cuts more often than once per bar, stick-figure limbs, limbs bending backward, silhouettes merging into one blob, anything flashing more than 3 times per second.
</direction>

<structure>
- Bar 1, 0.0–2.0s, lime, STEP: dancer A alone at center, in the point pose from the first frame; step-touch left, right, left on beats 2–4, arms swinging and the ponytail following.
- Bar 2, 2.0–4.0s, pink, SWING: cut to dancer B at center: an arm wave on beats 1–2, a body roll on beat 3, a kick on beat 4, the trouser hems flaring.
- Bar 3, 4.0–6.0s, cyan, SPIN: cut to dancer C at center: a spin across beats 1–2 with the jacket swinging out, a point on beat 3, and a jump that takes off on beat 4 (5.5 s) and lands by 5.9 s.
- Bar 4, 6.0–8.0s, orange, JUMP: cut to all three in a row at x 560, 960 and 1360 (scale 0.85), landing a unison hit-V on 6.0 s, so the 6.0 s frame is three clean, matching silhouettes; then a canon: A jumps on beat 2, B on beat 3, C on beat 4, hair and hems following through.
- Bar 5, 8.0–10.0s, violet: cut to the closing pose at x 1060, 1360 and 1660 (scale 0.8): A in hit-V, B pointing to the upper right, C with hands on hips and one knee bent; "LATE" snaps in on 8.0 s, "BLOOM" on 8.5 s and the line on 9.0 s, each scaling 1.06 → 1 in 0.12 s.
- 9.0–10.0s: hold, completely still; the beat counter stops with all four dots filled.
For other lengths, add or remove whole bars before the closing bar and 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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter. No other libraries.
- Draw each dancer every frame by forward kinematics from the pelvis, all of its parts filled #0D0D0F in one path so overlaps merge cleanly. Pose keys sit in a table indexed by beat, and between keys the joints follow the anticipation, strike and hold curve; hair, skirt, hems and jacket are damped springs solved analytically from the pose times.
</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 beat time (0, 0.5, 1.0 … s) shows a held, readable pose, field cuts fall exactly on 0, 2, 4, 6 and 8 s and nowhere else, no limb bends backward or detaches, the three dancers stay distinct by outline and never merge, and the title sits clear of the dancers in the final frame. 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

8-Bit Pixel Art Scene

Made by us

An 8-bit attract screen: a dusk forest scrolls in parallax layers as a tiny lantern-carrying hero walks, hops a log and…

Manga Action Panel

Made by us

A black-and-white manga page read right to left: rooftops, narrowed eyes, a silhouetted courier leaping through focus l…

Comic Book Page

Made by us

A five-panel comic page made the old way: blue pencil roughs, weighted black inks, flat process color with Ben-Day dots…

Rubber Hose Cartoon

Made by us

A black-and-white 1930s cartoon: Tippy, an original teakettle with rubber-hose limbs, white gloves and pie-cut eyes, da…