Three visual systems, one editor

A silent desktop-format announcement uses interface specimens as the argument: a friendly green UI becomes a more editorial purple system, then a vivid red system, before the actual styling controls appear. The viewer gets the promise in the first second through polished results, and the proof at about 0:12 when a component's parts are edited. An availability card closes the loop on what to do next.

Why it works

• At 0:00.25–0:00.75, six miniature specimens assemble into a grid, so the viewer can grasp the product category without narration.
• At 0:01.75 and 0:03.1, the same grid gains distinct palettes and UI personalities, demonstrating range rather than repeating one mockup.
• At 0:12–0:20, a toggle's track, thumb, and label are styled in a dark properties panel; this turns design taste into a visible workflow. The source reached 492,473 views at capture; that figure does not establish which beat viewers preferred.

Hook formula: Result first + visual pattern interrupt: {{PRODUCT}} produces a polished {{EXAMPLE_UI}} immediately, then reveals five supporting specimens in one grid.

Why it holds: The 0:00.25 object is larger than any later tile, so the eye has one clear entry point. The quick 0:00.50 expansion promises a whole system, while the palette reset by 0:01.75 raises a question: how many looks can this tool make?

Retention map: visual re-hooks at about 0:01.75 and 0:03.1; workflow re-hook at 0:11.8; payoff at 0:12–0:20; in-video availability CTA at 0:27.3; hard stop after an 11.7 s end-card hold. The post text, outside the video, provides the visit link.

Mix: 100% designed interface footage / motion graphics within one fixed, wide, front-on composition. No person, physical camera, talking head, or conventional b-roll appears.

Rhythm: The measurement reports one shot and seven major on-screen changes at 0:01.4, 0:02.8, 0:04.0, 0:05.2, 0:06.6, 0:11.8, and 0:23.8. The sheet also shows smaller state changes and a closing card by 0:27.3, so treat those seven as detected steps rather than every animation frame. Motion is front-loaded: the first 5 s has 11.2% average frame change per 0.1 s, versus 0% in the last measured 5 s.

Rules this editor follows (inferred):

• Keep the viewpoint fixed; create pace by changing design systems and UI states inside it.
• Introduce a whole system before isolating one editable component.
• Let the final availability line sit much longer than the earlier specimens.

Full shot list

• Look: Clean near-white #FBFBFA canvas, pale gray/off-white tile fields around #F3F2EF; soft shadows, rounded 8–18 px corners. First system uses mint #BFE8DB and bright spring green #19D94F; second uses deep plum #2B173B, lavender #9E83B6, warm cream #EDE7D5; third uses hot red #F0003B, navy #0B294B, cream, and black. Values are approximations from the sheets, not sampled brand specifications.
• Captions / typography: No subtitles. UI text is small, mostly black or charcoal. Use Inter or DM Sans for interface labels and controls; use Libre Baskerville for the large editorial serif specimen; use Inter ExtraBold for heavy sans specimens. Keep hero UI headlines around 16–22 px at 1280 × 720, controls around 10–15 px, and the final availability line around 20–26 px. Exact sizes are inferred from the frames.
• Graphics and overlays: Arrange six 16:9-ish specimen tiles in a 3 × 2 grid with even gutters. Make each specimen a distinct UI type: hero/action card, palette, form/workspace, typography, chart/notification, and content card. Use miniature shadows and glow sparingly. At about 0:04.4, a near-black editor panel takes the right side while the cards occupy the left.
• Editor demo: At about 0:12, move to a mostly white canvas with one toggle near center and a near-black properties panel on the right. Show track, thumb, then label styling as separate visible states at roughly 0:12, 0:15.6, and 0:19.5.
• Transitions: Fade/opacity and state swaps within the same fixed shot; no observed camera cuts, whips, or push-ins. The sequence fades to white around 0:24 before the end card emerges.
• Branding: The reference's specific logo, icons, exact palette arrangements, and UI text are its own signature. Reuse the six-card system → editor proof → availability structure with {{PRODUCT}} styling.

Measured: No audio track, no speech, no wpm, no pauses or pitch to profile.

Described: This is a silent visual announcement. Readability comes from the staged interface and short on-screen text rather than a narrator.

Voice direction: None. If adapting this format faithfully, let interface outcomes and controls explain the product without narration.

• Music: None; source file has no audio track.
• Sound effects: None.
• Silence and space: Full-length silence gives the motion and UI details all the attention.
• Mix targets: Not applicable to the source; there is no integrated loudness or true peak to report.

• Title: Product introduction plus capability; template: Introducing {{PRODUCT}} — design {{OUTCOME}}.
• Cover / thumbnail: On white, the large mint-bordered hero card sits at upper left, a faint plan card at upper right, and a small notification card below center. Sparse text and negative space make the green component the focal point; no face.
• Description: The post names the product, gives a concise capability claim, and links to visit it. Template: Introducing {{PRODUCT}}. Build {{SPECIFIC_OUTCOME}} with {{KEY_WORKFLOW}}. {{LINK}}.
• Audience signals: Capture: 492,473 views, 4,782 likes, 235 comments, 237 reposts (9.7 likes per 1,000 views). No most-replayed data or top-comment text is provided, so no specific audience preference can be inferred.

The source has zero spoken words. Use this as a visual-copy template, with short original UI labels rather than narration:

[0:00–0:01.5 · RESULT FIRST] Large {{HERO_COMPONENT}} with a 3–6 word benefit headline; reveal five related specimens.
[0:01.5–0:03.1 · NEW LOOK] Replace the grid with {{STYLE_B}}; use one 3–5 word editorial headline.
[0:03.1–0:06.9 · THIRD LOOK] Replace it with {{STYLE_C}}; show a distinct palette and different component copy.
[0:06.9–0:11.8 · WORKFLOW BRIDGE] Hold the grid and expose {{EDITOR_PANEL}}; use only real control labels.
[0:11.8–0:23.8 · PROOF] Isolate {{COMPONENT}} and show {{PART_1}}, {{PART_2}}, and {{PART_3}} being styled.
[0:23.8–0:27.3 · RESET] Fade to white.
[0:27.3–0:39.0 · CTA] Display {{AVAILABILITY_LINE}} with small {{PRODUCT_MARK}} glyphs; hold.

Script prompt (paste into any AI assistant with this file attached):

Plan a silent, 39-second, 16:9 interface announcement for {{PRODUCT}}. The audience is {{AUDIENCE}} and the core capability is {{CAPABILITY}}. Write only original short UI microcopy, a visual beat sheet with the seven time ranges in section 10, and a list of six specimen cards for each of three clearly different looks. Use one component as proof: show three editable parts in sequence. End with {{AVAILABILITY_LINE}}. Keep claims specific and verifiable. Do not write narration, subtitles, or a copy of the reference's UI text.

Voice prompt: No voice is needed; render without an audio track.

Visual prompts:

• Six-card system: Create six original, polished UI specimens for {{PRODUCT}} in a 3 × 2 grid on near-white. Include {{HERO_COMPONENT}}, a palette card, typography, a notification, a chart or data card, and a content card. Use {{STYLE_A_PALETTE}} and {{STYLE_A_FONT}}. Front-on orthographic view, rounded corners, subtle shadows, clear alignment.
• Alternate systems: Rebuild those specimen roles with {{STYLE_B_PALETTE}} and {{STYLE_B_FONT}}, then {{STYLE_C_PALETTE}} and {{STYLE_C_FONT}}; change layouts and copy while preserving the grid footprint.
• Editor proof: Wide white canvas, single {{COMPONENT}} at center, near-black properties panel on the right, three states showing edits to {{PART_1}}, {{PART_2}}, and {{PART_3}}; precise product UI, no hands or people.

Caption spec: No subtitles. Use embedded interface labels in Inter/DM Sans and a short closing availability line in Inter Medium, centered on white.

Music prompt: None; export silent.

1. Design six specimen roles and make three visual treatments that are unmistakably different in color and type.
2. Build the 1280 × 720 fixed canvas and align the cards to a repeatable 3 × 2 grid; prepare a black opening frame.
3. Animate hero first, then the five companions over the first 0.75 s. Hold the completed first system to 0:01.5.
4. Crossfade or replace the grid with looks B and C at about 0:01.5 and 0:03.1. Introduce the editor sidebar around 0:04.4.
5. From 0:11.8, isolate one component and visibly change its track, thumb, and label with readable sidebar states.
6. Fade to white from 0:23.8; reveal {{AVAILABILITY_LINE}} around 0:27.3, then hold to 0:39.
7. Export without an audio track. Review at native size and at mobile feed size; make sure the product promise is clear from the first second.

• A finished UI example appears by 0:00.25 and a full specimen grid by roughly 0:00.75.
• The three visual systems are immediately distinguishable while sharing the same grid roles.
• The editor proof begins near 0:12 and shows three real component parts by 0:20.
• UI words remain legible enough for their role; no sentence-length subtitles or voiceover were added.
• The availability line appears near 0:27.3 and remains visible for at least 9 s.
• The file is 1280 × 720, around 39 s, and has no audio track.
• The title/description state a concrete capability and supply the destination link outside the video.

• The creator's signature (don't copy): The specific Graphical product UI, its green/plum/red themes, sample copy, glyphs, logo, and availability artwork.
• The transferable format (do copy): Start on a finished result; show three coherent visual systems; reveal the component-level editing controls; close with a spare availability card and a long hold.
• Use your own interface assets, type choices, and product claims.

_{Source: https://x.com/joshpuckett/status/2107175379903594714 · measured with dissect 1.1.0 on 2026-10-07 · palette values, font matches, and some transition descriptions are inferred from the contact sheets}