A video file dragged into a message thread, and the replies it gets, cut closer with every one while a spoken caption runs underneath
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 5 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Entries *entries · array
The conversation in order. The first entry is already on screen when the shot opens; everything after it arrives on the measured beat.
now: 6 items
- Timestamp *timestamp · string
Thread timestamp, sitting above the first message.
now: Today 9:41 AM
- File name *fileName · string
The filename on the dragged file before it becomes a message.
now: Launch.mp4
- Captions *captions · array
Spoken captions, in frames. They sit in front of the cuts and do not move with them, because they belong to the voice rather than to the thread.
now: 3 items
- Brandbrand · string
Brand token id, one of the keys of BRANDS. Written for the light brands; the sent bubble takes accentAlt and the dropped file the accent.
now: frost
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A light message thread in landscape, opening on a video file being dragged into it with the cursor still on it and its filename underneath. A dashed drop target appears, the file snaps in and becomes a video message with a play button and a duration pill, and the thread scrolls up to take it. Then the replies land one at a time, each one cutting the shot closer on the conversation, with a three-dot typing bubble before the first of them. Bubbles pop from their own tail corner. A spoken caption sits along the bottom in a small white box, holding its size through every cut because it belongs to the voice and not to the thread.
