---
id: "2112538017864859683"
source: https://x.com/MotionByLeo/status/2112538017864859683
author: "Leo Motion (@MotionByLeo)"
media: "video, 1920x1080, 66.1s"
model: claude-opus-5-5
generated: 2026-10-22
---
# Grid-Paper Product Film for an AI Agent

## Summary
A minute-long product film set on light grid paper: a dark chat panel answers a support question, a wireframe globe with floating labels rotates, red squares pulse in a pattern, and integration badges connect across a modular grid. One accent color, crisp hairlines and calm pacing make a technical product feel precise and friendly.

## Style
- Theme: light
- Mood: precise, calm, technical, modern
- Tags: product-film, saas, grid-paper, wireframe-globe, chat-ui, motion-design, single-accent
- Category: Product video, Motion

## Palette
| Role | Hex |
|---|---|
| Paper | #F9F9F9 |
| Panel white | #FFFFFF |
| Grid line | #ECE7E6 |
| Hairline | #D9D9D9 |
| Ink | #2B2B2B |
| Dark panel | #1E1E1E |
| Accent red | #E8401C |
| Accent soft | #F2B3A3 |

## Typography
- UI copy in the chat: neo-grotesk, regular, small. Closest free font: Inter (400).
- Labels and tags: monospaced, uppercase, tracked out, in outlined capsules. Closest free font: JetBrains Mono (500) or IBM Plex Mono.
- Section words in square brackets as small mono labels.

## Layout
- 16:9 frame (1920x1080) on a light grid of about 64px cells with faint dots at intersections.
- Each scene centres one object (chat panel, globe, square pattern, integration row) with large empty margins.
- Cards and panels align to the grid; capsule labels hang off objects with thin connector lines.

## Elements
- Chat panel: dark #1E1E1E card, 16px radius, a user bubble top right, an agent reply with a small label, and an input field with a send button; ghosted cards behind it.
- Wireframe globe: thin grey latitude and longitude lines, one red square patch and dark patches on the surface, capsule labels with dots orbiting.
- Square pattern: a plus-shaped arrangement of 48px squares in red and soft red tints.
- Integration row: circular white badges with soft shadows linked by a small chain-link capsule, nested rectangles receding to the right.

## Motion
- Scene changes every 8 to 15s with clean cuts or a grid-aligned wipe.
- Chat: text streams in word by word (about 30ms per word); ghost cards drift slowly upward.
- Globe: rotates at about 15 degrees per second; labels follow anchor points with slight lag.
- Squares: pulse opacity in a checkerboard sequence, 150ms stagger, 600ms per pulse.
- Integration: badges pop in with a spring (scale 0.8 to 1, 400ms), the link capsule appears, nested rectangles zoom toward the viewer.

## Rebuild it
1. Create a grid-paper background with two CSS gradients: `linear-gradient(#ECE7E6 1px, transparent 1px)` and the vertical equivalent at 64px, plus a dot pattern via `radial-gradient`.
2. Build each scene as a React component centred on the grid; switch scenes with Motion `AnimatePresence` (fade and 8px slide, 400ms).
3. Chat panel: dark card with streamed text (reveal words with `staggerChildren: 0.03`) and an input row.
4. Globe: React Three Fiber `LineSegments` for latitude and longitude rings, a couple of colored quads on the surface, and HTML capsule labels (drei `Html`) anchored to points.
5. Square pattern: a CSS grid of squares whose opacity animates with Motion keyframes and per-index delays.
6. Integration row: circular badges with `shadow-[0_8px_30px_rgb(0_0_0/0.08)]`, use neutral placeholder icons, and a spring entrance.
7. Use the single accent #E8401C sparingly and keep everything else greyscale.

## Generation prompt
A clean minimal product motion film on light grey grid paper: a dark rounded chat panel answering a support question, a rotating thin-line wireframe globe with small outlined monospace labels and a red square patch, a plus-shaped pattern of pulsing red squares, and white circular app badges linked by a small chain icon; single red accent, crisp hairlines, calm precise animation, generic placeholder icons, no real brand names.