TGK 2.0 — Demo Builder

Step 2 of 2

Brand the demo

Set the tenant name, customer context, and visual identity. Defaults auto-fill from the narration scaffold.

Narration scaffold Sets narration defaults — override per-scene in step 3.

Brand you're selling to * Your prospect — the company that will deploy Docusign. Its name, logo & color skin the whole demo.

Their customer, in the story * The end customer your prospect is serving in this scenario — who's being onboarded or signed.

Brand color *

Tenant logo

Shown in the shell topbar (e.g. Hillside). PNG, JPG, SVG, WebP · max 500 KB.

Customer logo

Shown alongside the customer's name (e.g. TGK Capital). Optional. PNG, JPG, SVG, WebP · max 500 KB.

System of record

Signature moment

DEMO URL · LIVE NOW

Step 1 of 2

Build your demo

Start from a sequence (or blank), or open an existing demo by subvertical — then arrange scenes from the library on the timeline. Click any scene to edit its narration.

← Guided mode Start from

Open an existing demo →

Subvertical Flow

Scene library 13 Scene templates · loading flipbook vignettes…

Tap any block to append · drag to place at a specific position Need a new vignette? Upload an MP4 →

Timeline 0 Click a scene to edit narration

Build the spine from Scene templates (or a Start-from sequence); drop in a Product demo to spotlight one capability.

3-scene minimum · 0 scenes

Admin tools

Admin operations

MP4 → flipbook pipeline, baked-in narration overrides, vignette + component editing. Gated by the admin password.

Add demo — MP4 → HTML Edit existing demo narration

A) Video / Figma → Vignette

Drop an MP4, a Figma export zip, or enter Figma API credentials. The server extracts keyframes, runs Claude vision on each consecutive pair to infer motion, then generates a self-contained brandable HTML vignette.

Input source

Scene threshold 0.40 Lower = more frames, finer motion · Higher = only major cuts

Drag an MP4 here or click to browse.

Slug

Status

Uploading… 0%

Saved Outputs

Loading…

B) Edit baked-in beat narration

Override per-beat head/lede in the canonical VERTICALS map. Saves to /stories/_shared/vertical-overrides.json; the shell merges over canonical at boot.

Vertical

Scene

Edit Beat

Headline

Lede

C) Edit existing vignettes

Browse flipbooks under /flipbooks/. Replace any with a fresh MP4 — the shell's iframe reload picks up the new vignette.

Replace vignette:

Path

New MP4

Processing… 0%

D) Current / Future state component editor

Browse /components/current-state/ or /components/future-state/. Replace with the same MP4 → vignette pipeline.

Type

Filter

Replace component: