A cherry-red modeling balloon inflates on a turquoise sweep and twists itself bubble by bubble into a dog, with wrinkled pinches, a squeak at every twist and long window highlights on the latex, then stands, wags its tail and tilts its head.
Written and rendered by AI CSS Animations Oct 18, 2026
Balloon twisting, also called balloon modeling, shapes long, narrow latex balloons into animals and objects by twisting them into bubbles and holding the shapes with lock twists. The usual balloon is known as a 260, about 2 inches across and 60 inches long when fully inflated. The dog is the classic first figure: nose, ears, neck, front legs, body, back legs and tail, all from a single balloon. Party entertainers, toy brands and 3D artists use the look for its glossy latex, bright color and playful squeak.
Make a 10-second 3D film of a balloon animal: a long modeling balloon inflates and twists itself into a dog, squeaking at every twist, then wags its tail. <inputs> If I don't give you something, use the default and don't ask. - Brand: Bimble & Pop (fictional), party entertainers. - Title: "Good dog." - Line: "One balloon, ten bubbles, three lock twists." - Steps: 1 Inflate · 2 Nose and ears · 3 Neck and front legs · 4 Body and back legs · 5 Tail - Balloon: cherry red. - Length: 10 seconds. </inputs> <direction> - Look: a bright, playful studio still life: one glossy latex balloon on a saturated turquoise sweep, under big soft lights that lay long window highlights along every bubble. - Palette: sweep #2BB3A8 on the floor curving up to #46C7BC behind; latex cherry #E3263A, deepening to #A8122A in the pinches and glowing #FF7A86 where it's thinnest; contact shadows deep teal #0F5E59, never grey; type #FFFFFF, secondary #D6F5F1, accent #FFE16B. - The balloon (1 unit = 10 cm): a 260-style modeling balloon, radius 0.25, inflated to 8.7 units with a 0.6-unit uninflated tip at the tail end (a flat, slightly wrinkled ribbon 0.12 wide) and, at the head end, the tied nozzle: a small rolled ring and a tight knot. Each bubble is its own LatheGeometry sausage whose profile holds the full radius through the middle and rounds into a narrow pinch (radius 0.05) at each twist, bent slightly along a short curve; never a plain capsule. Twists show: at every pinch, 4–6 short spiral wrinkle ridges in the darker red (thin torus segments), and the bubbles bulge 6% where they meet. - Bubbles, from the nozzle: nose 0.8, ear 0.6, ear 0.6, neck 0.7, front leg 0.9, front leg 0.9, body 1.2, back leg 0.9, back leg 0.9, tail 1.2 (8.7 inflated in all), then the limp tip. - Material: MeshPhysicalMaterial #E3263A, roughness 0.16, clearcoat 1 at roughness 0.06, sheen 0.25 with sheenColor #FF9AA4, transmission 0.18, thickness 0.4 and attenuationColor #B0102A, so edges glow lighter where light passes through; the knot and tip a little matte (roughness 0.35). Build an environment once with PMREMGenerator.fromScene from a long overhead softbox and a tall strip at left: every bubble must carry a long soft white window highlight down its length and a smaller kicker highlight. - Light, bright from the first frame: a key DirectionalLight #FFFFFF at 2.2 from the upper left (elevation 55°) with soft shadows (PCFSoftShadowMap, 2048), plus a soft contact shadow (a blurred ellipse, #0F5E59 at 40%) under each foot and under the balloon while it lies flat; a HemisphereLight #E8FFFC / #1E8E86 at 0.9; a warm rim light from behind right so the red separates from the turquoise. ACESFilmic, exposure 1.05. - The dog pose (dog facing right: x forward, y up, z toward the camera, floor at y 0): the head junction at (1.15, 2.05, 0); the nose runs forward to (1.95, 2.15, 0); the two ears rise and fold back to (0.85, 2.6, ±0.22) and lock at the head junction; the neck runs down to the shoulder at (0.95, 1.4, 0); the front legs run from the shoulder to feet at (1.05, 0.25, ±0.3) and lock; the body runs back to the hip at (−0.25, 1.4, 0); the back legs run to feet at (−0.35, 0.25, ±0.3) and lock; the tail rises from the hip to (−0.7, 2.25, 0), its limp tip flopping back. The feet rest exactly on the floor. - Twisting, all solved from t: the balloon starts lying straight along x on the floor as a limp ribbon and inflates from the nozzle, the inflated front racing along at 7 units/s behind a rounded bulge. Each twist pinches over 0.18 s while the bubble beyond it spins 2.5 turns about the balloon's axis (the highlights stay put while the wrinkle ridges wind round), then gives a squeaky squash: both neighboring bubbles compress 8% along the axis and bulge 5%, springing back on 1 − e^(−9s)·cos(16s). Each lock twist folds its bubbles: blend each bubble's two end points from the straight chain to the dog pose on cubic-bezier(0.3, 0, 0.2, 1) over 0.5 s, keeping every bubble's length constant (it bends rather than stretches). When the dog stands, it settles onto its feet with a 4% squash. - Squeaks: at each twist and lock, the word "squeak" in Baloo 2 700, 26px, white at 85%, pops beside the pinch (scale 0.6 → 1 on the same spring), rises 10px and fades over 0.4 s, tilted ±8°; never more than two on screen and never over the dog's head or the title. - Steps strip (HTML): centered at y 970, five numbered 34px circles joined by a 2px line, each with its label in Quicksand 600, 24px; the current step's circle fills with the accent and dark text and its label turns white; done steps keep a #D6F5F1 fill. - Camera: fov 30, pitched 14° down. It opens wide enough to hold the whole straight balloon (x 260–1660), then dollies in as the dog forms, ending with the dog about 620px tall, centered at (1200, 540) and turned 25° toward the camera; a slow 10° orbit across the piece. - Type: kicker "BIMBLE & POP" in Quicksand 700, 20px, tracked 0.18em, accent; title Baloo 2 800, 120px, #FFFFFF, top-left at (120, 110); line Quicksand 600, 28px, secondary, beneath. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1). - Premium: real latex with long window highlights, translucent edges, pinches with wrinkles, bubbles in true proportion and a dog that stands on its feet. Cheap: red capsules glued together, a matte plastic dog, a flat grey shadow. Banned: hands or people, faces or eyes on the dog, foil or metallic balloons, floating, popping, confetti, bloom, outlines, anything flashing more than 3 times per second. </direction> <structure> - 0.0–0.6s: the limp balloon lies across the sweep; the kicker and title rise in; step 1 lights. - 0.6–1.9s: it inflates from the nozzle to the tail, the bulge racing along, leaving the limp tip. - 1.9–3.2s: step 2: three twists make the nose and ears (three squeaks); the ears fold back and lock, and the head lifts. - 3.2–4.4s: step 3: the neck and front legs twist and lock; the front stands on its legs. - 4.4–5.6s: step 4: the body and back legs twist and lock; the back stands and the dog settles on its feet. - 5.6–6.4s: step 5: the tail rounds and lifts; the camera completes its move, and at 6.0 s the whole dog stands in three-quarter view. - 6.4–7.8s: the dog wags: the tail swings ±14° at 2 Hz for 1 s and eases out, the head tilts 8° toward the camera and back, and it makes one small hop. - 7.8–8.8s: the line rises in; everything comes to rest. - 8.8–10.0s: hold. For other lengths, change the gaps between steps; keep each twist's own timing 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: 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. - Every bubble's end points, bend, spin and squash are closed-form functions of t from the step times; rebuild or transform the bubble meshes from them each seek. </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 bubbles stay joined at every twist with no gaps or overlaps, each keeps its length, all four feet touch the floor at the end, every bubble carries a long window highlight and translucent edges, the squeak words stay clear of the dog's head and the title, and the steps strip matches what's happening. 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 inspirationCharacter animation inspiration