Frame from Outbound campaign interface remake
Creator-shared remake prompt and processFull
TASK: frame-locked 1:1 remake of REF=[path/to/reference.mp4]. Swap ONLY: brand name→[NAME], logo→[path/to/logo.png|svg], palette→[hex list or "derive from logo"], platform UI→[e.g. LinkedIn→X], faces/screens→[source]. All else identical: layout, sizes, positions, timing, easing, camera, cuts, blur, cursor path, typing cadence, audio beat grid.
ACCEPTANCE: REF and remake stacked + frame-locked → same pose every frame. Cuts 0 frames off. Position/size error ≤1% of frame. Typing char-count, cursor, camera on the same frames. Differences allowed only where the swap forces them (word widths); report each.

PHASE 0 — ANALYSIS (no building yet)
- ffprobe fps/res/duration. Extract ALL frames 0-based to ref/full/fNNNN.jpg + audio to ref/audio.wav. 1fps contact sheets for overview.
- Detect cuts via per-frame mean-abs-diff spikes; confirm visually. Write SPEC.md: shot table (id, f0–f1, content, transition in/out), per-shot detail, component inventory, verbatim on-screen text in order, colour tokens sampled from pixels, font sizes from cap height, cursor paths (tip xy per frame), camera keyframes.
- MEASURE with numpy on ref frames (ink bounding boxes, flood fills, template match), never eyeball. Store per-frame sample arrays for every major move; the spec's prose is a guide, ref/full is truth.
- Audio: STT with word timestamps (narration table: line, start, end, text). Music BPM + beat phase (onset autocorrelation), drop time, loudness arc per section, hard-stop time. SFX hit times from onset/spectral analysis. Voice pitch/wpm.

PHASE 1 — ENGINE (you, before any agents)
- Single HTML page, stage at REF native resolution. http://window.seek(t) renders frame F=t*fps as a PURE function of F: no timers, no Date, no Math.random (seeded hash), no CSS transitions/animations. Shots register SHOT({id,f0,f1,render(lf,F)}) returning HTML; seek routes F to its shot. window.ready=true only after document.fonts loaded + all images decoded.
- core.js shared helpers: easing set, kf(F,keys,ease), samples(F,f0,arr) interpolating measured arrays, camera(inner,scale,tx,ty,origin,blur), directional motion blur (SVG feGaussianBlur), cursor (glyph MEASURED from ref, press-scale curve measured), ripple, text reveal, brand tokens, logo component (mask-image of logo so any fill/gradient works), avatar/persona pickers.
- Palette swap as ONE deterministic filter applied to each rendered HTML string (hex/rgb/rgba re-hued by band, lightness preserved) so hard-coded colours in shots can't leak the old brand. Bitmaps untouched.
- render.mjs (Playwright Chromium, deviceScaleFactor 1): modes stills <frames> | compare <frames> (ref left | ours right + labelled sheet) | full <f0> <f1>. Per-agent OUT dirs so parallel runs don't collide. Print page errors.
- http://sync.py: REF over remake stacked, frame-locked mp4. http://encode.py: PNG frames → h264 at REF fps, mux audio.

PHASE 2 — PARALLEL BUILD
- Split shots into 4 contiguous groups; one agent each; each writes ONLY shots/<G>.js (IIFE, helpers prefixed <G>_), never edits core.js (request changes from you). Give each: BRIEF.md (acceptance bar, swap rules, file rules, verify loop), SPEC.md sections, core.js API.
- Verify loop per shot: compare first/last frame, every keyframe, 2 frames into each transition; iterate until within tolerance. ≤15 frames per render call; one render at a time per agent.
- Report table: shot | frames | MATCHES/CLOSE/ROUGH | residual diff | frames that would drift when stacked | spec errors found vs ref.
- 5th agent = audio: royalty-free commercial-OK track (record URL+licence), time-stretch to REF BPM, cut on beats so drop/breaks/silences land on REF times; SFX synthesized (numpy) on REF hit times; mix script with VO slot table (REF start times, text swapped) that fits each line (≤8% stretch), ducks music under voice, loudness-normalizes (~-14 LUFS, TP ≤ -1). Never reuse REF music or voice.

PHASE 3 — INTEGRATE
- Unify shared glyphs/components across groups (cursor, DM window, logo) — one definition, everyone uses it.
- Full render all frames (2–3 parallel chunks max), encode with mix, run http://sync.py, build 1-per-second ref|ours contact sheet + sheets at every group seam (last 2 / first 2 frames). Inspect. Fix drift. Re-render. Scan all frames for leftover old-brand colour.
- VO: generate per line (any TTS), trim silence, place on slots, re-mix.

PITFALLS (seen in practice)
- Measure text widths only AFTER fonts load (measureText before load caches fallback widths → words collide). Lazy-init any width tables.
- Word-length changes from the brand swap shift centred layouts; keep shared elements on ref positions, absorb the delta in the swapped word, report it.
- Randomised bursts/particles won't match stacked; drive the visible ones from measured tracks.
- Ref whips may be crisp (no blur); check before adding motion blur.
- Headless Chromium may need to run outside any OS sandbox; use swiftshader/ANGLE if WebGL is involved.
- Never claim a shot matches without viewing ref|ours side by side for it.

DELIVER: remake.mp4 (with audio), sync-check.mp4, SPEC.md, source, and a list of every remaining difference vs REF with frame numbers.
Make it hereFree runs soon

Outbound campaign interface remake

A side-by-side launch promo presents outbound campaign entry, prospect cards, chat bubbles and calendar booking, with matching white layouts adapted from coral branding to blue Athra branding.

How it was made

Opus 5.5

Source and credit

X · Sep 26, 2026 · 632 likes · 123k views · 25 comments

Made with AI, according to the source

Published instructions: https://x.com/notdwd/status/2103959830423859595

Discovery collection

Original work by @gojiberryai

Look notesby Reference

A clean SaaS messaging and scheduling interface with sample conversations, calendar entries, user avatars, and brand marks.

Color
White and pale gray backgrounds, charcoal text, and bright blue-to-cyan accents; small coral and green details appear in some examples.
Type
Simple, lightweight sans-serif text, with blue or coral emphasis on selected words and actions.
Framing
Sparse interface mockups with ample whitespace; text, rounded message bubbles, controls, and small profile images are arranged in horizontal rows.
Structure
Rounded white app cards contain compact input bars, chat bubbles, or calendar blocks. The closing brand artwork shows small colored symbols beside lowercase wordmarks.

Remakes

Nobody has shared a remake of this one yet. Made your own version? Send it for review and credit.

More like this

0:30

A week of job applications

Full prompt

Opus 5.5

0:15

BlitzClean RAM and disk cleanup

Recreation brief

Opus 5.5

0:30

LaunchBuddy cards and rocket

Full prompt

Opus 5.5

0:30

ClimbX cards and mountain branding

Recreation brief

Opus 5.5

0:30

XFastest creator discovery promo

Full prompt

Opus 5.5

0:15

Stock query to purchase order

Full prompt

Opus 5.5

0:15

TypingMind cards and faceted logo

Full prompt

Opus 5.5

0:15

TypingMind panels on midnight blue

Full prompt

Claude

0:25

NotchView feature cards

Full prompt

Claude Code · Hyperframes

0:22

Ora 2 image cards and glass controls

Full prompt

Opus 5.5

0:50

Mascots and serif product launch cards

Full prompt

Opus 5.5

0:28

Shared meeting availability card

Recreation brief

@fayazara

0:33

Apartment plan and furnished 3D rooms

Full prompt

Opus 5.5 · Three.js

0:12

Glass prompt panels and course cards

Full prompt

Opus 5.5

0:30

Blue-and-white web skills commercial

Recreation brief

Claude Code

0:15

Pocketsflow checkout and halftone mascot

Recreation brief

Opus 5.5

0:30

GoodCase.ai case discovery promo

Full prompt

Opus 5.5 · Remotion

0:58

Shotbase capture and sharing cards

Full prompt

Opus 5.5 · HyperFrames

0:10

Gemini name reveal and interface

Recreation brief

Ordinary Folk

1:09

Hermes features in glowing line diagrams

Recreation brief

@NousResearch

0:59

Red aircraft from parts to clouds

Recreation brief

@emmanuel_2m

0:40

GTA mode in an isometric city

Full prompt

Opus 5.5

0:25

Foil-style floral greeting cards

Prompt described

Opus 5.5

1:20

Fable 5.5 feature and benchmark cards

Prompt described

Fable 5.5

0:23

Dump sticker packs and Pro

Full prompt

Opus 5.5

0:25

A 3D printer clears its build plate

Recreation brief

Opus 5.5

0:19

Clothing rail portfolio

Prompt described

Opus 5.5

0:40

Silver foldable phone showcase

Recreation brief

@everestchris6

0:16

UI cards with selection outlines

Full prompt

Opus 5.5

1:00

Video layers become an editable project

Recreation brief

Open Edit