---
id: "2112875577388712123"
source: https://x.com/raunofreiberg/status/2112875577388712123
author: "rauno (@raunofreiberg)"
media: "video, 1168x848, 3.8s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Link Preview with Falling Word Physics

## Summary
A chat-app link preview card whose image area is a tiny physics playground: dozens of UI component names such as button, slider and dialog tumble in, pile up and then scatter, around a small "System" pill with a red dot. It shows how a rich, playful Open Graph preview can live inside an ordinary message bubble.

## Style
- Theme: mixed (dark device, light card)
- Mood: playful, crafted, tactile, nerdy
- Tags: link-preview, physics, kinetic-type, chat-ui, og-image, device-mockup, micro-interaction
- Category: Components, Motion

## Palette
| Role | Hex |
|---|---|
| Device frame | #1B1B1B |
| Device inner | #212121 |
| Preview canvas | #FEFEFE |
| Preview footer | #DDDEE0 |
| Desk backdrop | #C1C2C5 |
| Muted labels | #989899 |
| Word fill | #2A2A2A |
| Accent dot | #E8441C |

## Typography
- Falling words: condensed grotesk, bold, all caps, about 1.2% of frame height, randomly rotated. Closest free font: Archivo Narrow (700).
- Card title: system sans, semibold, about 1.6% of frame height. Closest free font: Inter (600).
- Card domain and timestamp: system sans, regular, muted grey. Inter (400).
- "System" pill: rounded sans in an outlined capsule, Inter (500).

## Layout
- 1.38:1 frame, cropped close on the lower-right corner of a dark tablet or laptop chat window resting on a light grey surface.
- Right-aligned message bubble about 33% of frame width, 16px radius, with a tail at the top right.
- Bubble splits into a 4:3 white preview canvas and a 56px light-grey footer with title, domain and a chevron.
- "Delivered" receipt right-aligned under the bubble; composer bar with mic and emoji icons along the bottom.

## Elements
- Physics canvas: about 80 short words, each a rigid rectangle that collides with the canvas walls and with each other.
- Centre anchor: 12px red circle and an outlined "System" capsule, both static and drawn above the words.
- Footer row: title in semibold, domain below in regular grey, 10px chevron on the right.
- Device: 24px outer radius, near-black bezel, soft drop shadow onto the desk.

## Motion
- 0 to 300ms: words drop in from above the canvas with slight random spin.
- 300 to 1300ms: gravity pulls them into a pile along the bottom edge; bounces settle with high friction.
- 1300 to 2400ms: an impulse throws the pile back up so words scatter across the canvas.
- 2400 to 3400ms: they fall and settle again; the clip loops seamlessly at 3.8s.
- The red dot and the pill never move; nothing outside the preview animates.

## Rebuild it
1. Build the message bubble in React: a rounded card (`rounded-2xl overflow-hidden`) with a `<canvas>` preview area (`aspect-[4/3] bg-white`) and a footer (`bg-neutral-200 px-3 py-2`).
2. Use a 2D physics engine (Matter.js or Rapier) in the canvas: create one rectangle body per word sized from `ctx.measureText`, plus static walls on the four sides.
3. Spawn bodies above the top edge with random x, angle and a small angular velocity; set `restitution: 0.15`, `friction: 0.6`.
4. Render each body by translating and rotating the context, then `fillText` in bold condensed caps.
5. Every 1.2s apply an upward impulse to all bodies to reproduce the scatter phase.
6. Draw the static red dot and outlined pill last so they stay on top.
7. Wrap the device in a dark frame (`bg-[#1B1B1B] rounded-3xl shadow-2xl`) over a light grey page, with the chat chrome (timestamp, receipt, composer) in muted greys.
8. Pause the physics loop when the card leaves the viewport (IntersectionObserver) and for `prefers-reduced-motion`.

## Generation prompt
A close-up product video of a dark tablet chat app on a light grey desk: a white link-preview card in a message bubble contains dozens of tiny black uppercase words, names of interface components, falling under gravity, piling at the bottom and bursting back up around a small red dot and an outlined capsule label; clean studio lighting, shallow depth, smooth looping motion, no brand logos.