---
id: "2113087950351388955"
source: https://x.com/CollectUI/status/2113087950351388955
author: "Collect UI (@CollectUI)"
media: "video, 1080x1080, 27.7s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Text Wrapping Around a Drifting Balloon

## Summary
A two-column magazine page of justified text with a colourful hot air balloon floating through it; as you scroll, the balloon drifts up and across and the paragraphs re-wrap around its round shape in real time. A playful use of CSS shapes that feels like print layout come alive.

## Style
- Theme: light
- Mood: playful, editorial, clever, retro
- Tags: css-shapes, shape-outside, text-wrap, editorial-layout, scroll-animation, hot-air-balloon, two-column
- Category: Typography, Motion

## Palette
| Role | Hex |
|---|---|
| Paper | #FFFFFF |
| Grid line | #ECECEC |
| Ink | #0C0C0D |
| Balloon red | #E23A2E |
| Balloon yellow | #F5C518 |
| Balloon blue | #2A5DB0 |
| Balloon green | #3AA857 |
| Backdrop | #1B1B1D |

## Typography
- Section title: monospaced bold caps ("001.A: AESTHETIC SCROLLED LAYOUTS"). JetBrains Mono (700).
- Lead-in word: large bold sans ("CSS") as a run-in heading. Archivo (800).
- Body: small sans, justified, tight leading, two columns. Arial or Inter (400).
- Closing line: monospaced bold caps, two lines.

## Layout
- Square frame (1080x1080) showing a browser window on a dark wavy backdrop.
- Page on a faint square grid; title at the top left; text in two equal columns with a narrow gutter.
- The balloon (about 25% of the page width) sits across the gutter, so both columns wrap around it.

## Elements
- Balloon: photographic cut-out with patterned panels (red, yellow, blue, green) and a small basket.
- Text: dense lorem paragraphs with ragged wraps where they meet the balloon's curve.
- A small logo at the top left of the page.

## Motion
- Scrolling moves the balloon diagonally through the columns (up on scroll down) with slight sway.
- The text reflows on every frame to follow the balloon's outline.
- At the end the page clears to the closing line in the centre.

## Rebuild it
1. Lay out two columns with CSS (`columns: 2` or two flex columns), justified text, `hyphens: auto`.
2. Float a balloon image in each column with `shape-outside: circle(50%)` (or `url(balloon.png)` with `shape-image-threshold`) so text wraps around it.
3. Move the floats with a scroll-driven animation (`animation-timeline: scroll()`) or by updating `margin-top` and `left` from scroll position.
4. Add a faint grid background with two repeating linear gradients.
5. Use placeholder copy; the closing line can be any short phrase.

## Generation prompt
A white editorial web page with a faint grid, a bold monospaced title and two justified columns of small text that wrap tightly around a colourful patchwork hot air balloon floating across the gutter; as the page scrolls the balloon drifts up and the text reflows around its round shape; playful, print-inspired, clever CSS layout, no real brands.