Inflatable Balloon Type

About this style

Foil balloons are made from two sheets of metallised plastic film heat-sealed around the edge, so when they fill they puff into pillows with a flat crimped seam and fine crinkles beside it. Letter and number balloons in this material became a fixture of party decoration. Inflated, puffy 3D lettering is also a recurring look in branding, packaging and social graphics, where it reads as soft, friendly and celebratory. The convincing versions get the material right: seams, wrinkles and soft colored reflections.

Make a 10-second inflatable type piece: pastel foil balloon letters fill with air, float up trailing curly ribbons, wobble and settle into a word.

<inputs>
- Word: HELLO (3–6 letters).
- Tagline: "Our new shop opens Saturday."
- Brand: Merrybell Party Co.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Set: a seamless blush sweep, floor #F8DFDA into backdrop #F4D2CD. Foils in letter order: lilac #C7B2F4, mint #A2E3CD, butter #FFDF8A, sky #9ECFF6, peach #FFBD9A. Text #5C3540.
Letters are inflated from a font, not bevelled: draw each glyph of Baloo 2 800 at 512px, take a distance transform inside it, and build a dense grid mesh with height z = A·√d (d = distance to the outline), A set so the widest stroke bulges 35% of its width; mirror it for the back. The outer 6px stays flat as a crimped seam.
Crinkles sell foil: pinch creases every 14–18px around the outline, fading 40px inward, plus a few seeded diagonal crinkles, as height; strength 1 when flat, 0.25 when full.
Material: MeshPhysicalMaterial, metalness 0.9, roughness 0.16, clearcoat 0.6, reflecting an environment baked once from a white overhead panel, a pink card and a lilac card: those colored reflections read as foil. Soft shadows on the sweep. Each letter trails a curly white ribbon, 140px, ending above y 780.
Inflation: a letter starts as a crinkled sheet slumped on the floor (A = 0). Over 1.0s A goes 0 → 1.08 → 1 as crinkles relax and it rises to float height, overshooting 20px. Floating, it tilts as a damped spring, θ = 9°·e^(−2.2τ)·cos(5.5τ), plus a ±1.5° idle sway; each arrival nudges its left neighbor.
Layout: word centered, baseline y 600, cap height 300px, neighbors overlapping 4–8% at alternating depths. Brand in Outfit 500, 22px, uppercase, tracking 0.18em, baseline y 850; tagline in Outfit 600, 38px, baseline y 910; both centered. Camera fov 30, straight on, pushing in 4%.
Premium is real foil: sealed seams, crinkles catching light, colored reflections, a little weight. Cheap is a puffy bevel font with a glossy gradient.
Banned: mirror chrome, iridescent foil, bevel-and-emboss, glitter, confetti, letters scaling in, spinning, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.8s: five flat, crinkled foil sheets lie slumped on the floor.
- 0.8–4.6s: the letters fill left to right, 0.7s apart, each puffing up over 1.0s and rising to float height, ribbon swinging beneath.
- 4.6–6.0s: the row wobbles and settles; arrivals bump neighbors.
- 6.0–7.2s: the key swings 15°; one soft highlight crosses all five letters.
- 7.2–8.4s: brand, then tagline 0.3s later, rise 16px and fade in over 0.6s on cubic-bezier(0.22, 1, 0.36, 1).
- 8.4–10s: hold; only the idle sway continues.
Other lengths: keep each inflation 1.0s, scale the stagger, hold at least 1.2s.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Build each glyph's distance field once at load; each seek sets heights, then recomputes normals.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for seams and crinkles lost at 1280×720, letters intersecting mid-wobble, flat pastel without colored reflections, ribbons crossing the type. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…