Text–Object Interleave

Why it works

The text sits one layer behind the product, and the product covers about 1/3 of the wordmark, which creates a front layer and a back layer. The sentence breaks in the middle and the device becomes part of it, so the eye travels from the left word through the screen to the right word. Translation is shown through occlusion: the word goes in as black source text and comes out as gradient-colored translation, with no arrows.

Spec

Timing

Film 11s with hard cuts at 3.2s and 7.8s. Wordmark-rise scene 0–3.2s: product lights 0–1.15s, sinks while the wordmark rises 0.9–2.7s (1.8s, 54 frames). Pass-through scene 3.2–7.8s: source text slides in 1.0s (30 frames; 3.75–4.75s and 5.85–6.85s), translation emerges 0.4s (12 frames; 4.75–5.15s and 6.85–7.25s). Slot-in scene 7.8–11.0s: device drops in 8.55–9.05s (0.5s, 15 frames), light ring glows 9.05–9.65s (0.6s, 18 frames)

Easing

Wordmark rise, device drop, translation emerging and lockup cubic-bezier(0.16,1,0.3,1) (expo.out); source text slide linear; product lighting power2.inOut; word lighting and ring glow power2.out and power2.inOut

Camera

Fixed perspective camera, 20° fov, distance 34 units, medium close-up. When the wordmark rises, the case sinks from top 350px to 515px (165px, about 15% of frame height) while the wordmark rises 255px; slow drift: case scale +2.5% in the first scene, earbud scale +2% in the second

Subject

Layer order: text at the back, 3D product in the middle, text in front. In the pass-through scene the translation is clipped to start at the earbud tip (x 1060px) and the source text is hidden past x 820px; in the slot-in scene the sentence splits into two groups with a 400px gap, one earbud wide, and the left words light first (8.05s), the right words second (8.3s)

Sync

The light ring turns on after both word groups have lit and the device has dropped in (9.05s); the translation emerges at the earbud's sound outlet (tip at 1060px, 580px) and its language label follows 0.12s later

Style

Black background in the first and last scene, light gray #f5f5f7 in the middle one; wordmark vertical gradient #ff5a0a → #ff7a26 → #ffb27a → #ffd2ad (Archivo Black 340px), translation gradient #4b2dff → #9b33ff → #ff2f8a (background-clip: text), sentence words #5e5e63 lighting to #f5f5f7

Prompt

People describe it as

• The text rises up from behind the product
• A phone slides down between two pieces of text
• The text passes through the earbuds and comes out in another language

Often confused with

• Word-by-Word HighlightWord-by-Word Highlight controls reading pace on plain text; Text–Object Interleave puts text and object into an occlusion relationship.
• Dispense Line-upDispense Line-up has objects slide out of the main subject in turn, synced word by word with the caption; Text–Object Interleave emphasizes the front-and-back layering of text and object.