A black-and-white 1930s cartoon: Tippy, an original teakettle with rubber-hose limbs, white gloves and pie-cut eyes, dances a Charleston on a vaudeville stage at 120 BPM, animated on twos with film grain and gate weave, then the picture irises out.
Written and rendered by AI CSS Animations Oct 16, 2026
Rubber hose animation is the look of American cartoons from the 1920s and early 1930s, when arms and legs were drawn as bendy tubes without elbows or knees. It came with a set of conventions: white gloves that kept hands readable against black bodies, pie-cut eyes, and a world where every object bounced to the soundtrack. Studios moved toward more anatomical animation in the mid-1930s, but the style has returned through indie games, music videos and retro branding.
Make a 10-second 1930s rubber-hose cartoon: an original teakettle character dances a Charleston to the beat on a vaudeville stage, then the picture irises out. <inputs> - Character: Tippy, a dancing teakettle (design below). - Cartoon title: "Tea Time Trot". - Studio line: "A Dimwhistle Cartoon". - End card: "The End". - Tempo: 120 BPM. - Length: 10 seconds. If I don't give you something, use the default and don't ask. </inputs> <direction> Look: a black-and-white cartoon print from around 1930. Palette, nothing else: black #141312, paper white #ECE8DF, greys #4A4744, #8C8883 and #BDB8AF. Type: Limelight for everything (title 120px, studio line 40px, "The End" 110px), tracking 0.04em. Tippy, original and built from simple shapes: a squat round kettle body 300px wide in #BDB8AF with a 6px black outline; a lid that is a black bowler-hat dome with a round knob; a short black spout pointing right; a black handle looping over the back. On the front, two tall white oval eyes (36×58px) touching each other, each with a tall black pupil missing a 60° pie-cut wedge, and a wide smile with a dark grey mouth and a small tongue. Limbs are rubber hoses: single 12px black strokes, cubic Béziers from shoulder or hip to wrist or ankle, no elbows or knees, free to stretch ±20%. White four-finger gloves with black outlines, puffy cuffs and three stitch lines; big black oval shoes with a white highlight. Squash and stretch keeps volume: body scaleY s and scaleX 1/s, with s between 0.86 and 1.12. Stage: grey curtains (vertical folds in alternating #4A4744 and #8C8883 bands under a scalloped, black-edged valance), a plank floor in one-point perspective (#8C8883 with black plank lines converging on center), and a spotlight pool on the floor (a #ECE8DF ellipse at 30%) that follows Tippy. A potted daisy stands stage left and a sugar bowl stage right, and both squash on every beat too, because in this era the whole world dances. Beat: 120 BPM, beat n at n × 0.5s. A contact squash (s 0.88) lands on each beat and a stretch (s 1.08) on each off-beat. Animate on twos: drive all character and prop motion from tq = floor(t·12)/12, six drawings per beat, with sine easing inside each beat. Film at 24fps (film frame f = floor(t·24)): grain from eight precomputed noise tiles cycled by f at 9% opacity; gate weave of ±1.5px x and ±1px y per film frame from a seeded PRNG; 0–2 dust specks per film frame (2–6px, black or white) and a thin vertical scratch that lasts 4 frames, twice; a soft vignette (35% at the corners); exposure breathing of ±2% on a slow 0.5Hz sine, never jumping frame to frame. Iris-out: a black field with a circular hole, closing on Tippy's eyes with cubic-bezier(0.55, 0, 0.45, 1). Premium: everything on twos and on the beat, curves for limbs, pie-cut eyes, true black-and-white values, honest film wear. Cheap: smooth 60fps tweens, a sepia filter over a modern vector character, limbs that bend at joints. Banned: any color or sepia tint, elbows or knees, five-finger hands, character outlines thinner than 5px, smooth unstepped character motion, mouse ears or any resemblance to an existing cartoon character, modern fonts, heavy flicker, anything flashing more than 3 times per second. </direction> <structure> - 0.0–1.0s: title card: paper white with a grey radial vignette, an ornate double-rule frame with corner flourishes, "A Dimwhistle Cartoon" above "Tea Time Trot". Hard cut on the beat at 1.0s. - 1.0–3.0s: the stage; Tippy bounces in from the right in three hops that land on beats, arriving center stage with the shoes at y 880. - 3.0–5.0s: Charleston: heels swivel out and in on each beat, the leg hoses bow inward and cross at mid-length on beats 2 and 4, arms swing in big opposed loops, the head tilts ±8°. - 5.0–7.0s: hat pop: the lid flies up 160px on beat 1, spins one turn and lands back on beat 3; steam puffs from the spout on beats 2 and 4 (white circles that grow and fade over 0.4s). - 7.0–8.0s: big finish: jazz hands up, legs apart, a held pose that vibrates slightly on each beat. - 8.0–8.8s: the iris closes to a 170px-radius circle around Tippy's eyes; Tippy winks at 8.6s. - 8.8–10.0s: hold: the winking Tippy inside the iris and "The End" in white below it on the black, baseline 120px above the bottom edge. Grain, weave and dust carry on. Other lengths: add or remove whole bars of four beats, keep 120 BPM and twos, and end on 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. - window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative (growth, simulation, particles) is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Past the end, hold 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>; await document.fonts.load() for each face before assigning window.seek. - Engine: inline SVG for the stage and character, with path data rebuilt from the pose in every seek and the gate weave as a transform on the stage group; a canvas overlay for grain, dust, scratches and vignette. </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 that every limb is a smooth curve with no kinks (the Charleston leg cross is deliberate), gloves and shoes stay attached, each squash lands on a beat, the stepping on twos is visible, the film wear is present but never busy, and "The End" is legible. 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.
An 8-bit attract screen: a dusk forest scrolls in parallax layers as a tiny lantern-carrying hero walks, hops a log and…
A black-and-white manga page read right to left: rooftops, narrowed eyes, a silhouetted courier leaping through focus l…
A five-panel comic page made the old way: blue pencil roughs, weighted black inks, flat process color with Ben-Day dots…
Pim, an original terracotta-pot mascot rendered like a glossy vinyl toy, hops into a mint studio cove, waves, beams as…
More like this on the motion design inspiration board: Music video inspirationCharacter animation inspiration