Creation Pipeline — pattern gallery

The NEW atoms this suite adds on top of the Video Studio shell. Base components (buttons, fields, badges, radio cards, script panes) live in the video-studio gallery.

Reference

Pipeline stepper · all states

Done steps carry a check; the active step is the indigo pill; reachable-but-untouched steps are plain; future steps are .locked with a small lock badge. A .arr chevron sits between each.

Brief

Research

3 Plan + Video brief

4 Produce

5 Schedule

Generate → select → continue

The shared AI-stage rhythm: a .btn.ai Generate, selectable result cards (one .on), an editable custom field, then a footer Continue gated on a selection.

Hook angle 3 candidates for Fidelis Global · “Switch in 48 hours”

Pain-led

“Tired of payment fees eating your margin?”

Bold claim

“Move money across 40 currencies in one tap.”

Social proof

“12,000 founders already switched to Fidelis.”

Or write your own

Pick one option or write a custom angle to continue.

Request lifecycle · .dotrack

Tracks a media request from the planning surface into the Studio and back as a deliverable. Shown in all three states.

Requested In studio Delivered

Requested · queued

Requested In studio Delivered

In studio · generating

Requested In studio Delivered

Delivered · ready

VideoBriefConfig · mini

The compact config block carried into the Plan stage to brief the Video Studio: aspect, format, duration, pacing, audio and platform.

Aspect ratio

9:16 1:1 4:5 16:9

Format

Talking-head B-roll Text

Duration

15–20 seconds

Pacing

Calm Punchy Rapid

Audio bed

Voiceover + music

AI voice over a licensed bed

Music only

On-screen captions carry the message

Original audio

Keep the source clip’s sound

Platform

Reels TikTok Shorts Meta Ads

Master-detail · .md-grid + .tree

Campaign workspace layout: a campaign → ad-set → ad hierarchy on the left, the selected node’s pipeline on the right.

Campaign

Fidelis Q3 — Acquisition

Ad sets

Founders · 25–44 · LAL 1%

Pain-led · 9:16

Social proof · 1:1

New ad idea…

Retargeting · site visitors 30d

Bold claim · 4:5

Pain-led · 9:16

Ad pipeline for the selected node renders here.

In progress

Right pane placeholder

In a real screen this hosts the ad’s Hook → Copy → Media → Review stepper for the node selected at left.

AdPreview · .adpreview

Live preview of the assembled ad creative used in the Media stage right pane.

Feed preview · Reels

Fidelis Global