Cinematic UI 2.0中文

← Gallery · Roll 03 / 06 · Incident response and on-call

Lull

An engineer paged at 3 a.m. wants the outage gone and their bed back, until four keys turn the whole night into one short, well-cut sequence.

Watch live ↗Read the treatment

Lull — first frame
Director · film
Edgar Wright · Baby Driver (2017)
Medium
The product UI as the world: a simulated live console in DOM and inline SVG, physical keycaps and set type, on a night ground with monitor glow; no canvas, no images
The lead
Incident INC-2417: Quiet, Firing, Acknowledged, War room, Rolled back, Resolved, Postmortem, Quiet again.
The audience's part
Resolve a drill incident with the A, W, M and R keys (or buttons, or taps); your time carries into the postmortem and the final line.
Grade
#0e0f12#FF4A1C
Lull — frame 2Lull — frame 3

Screening

The live production, running below. Scroll inside it.

The treatment (treatment.md)

Written by the agent during production, unedited.

Open the full treatment

Lull — treatment

Fictional B2B SaaS: incident response and on-call. English, long copy (see copy.md). Demo; every figure illustrative.

1. Development

Product truth. Lull pages the right engineer, opens a war room with whoever shipped last, runs the mitigation attached to the service and drafts the postmortem from the timeline. Every one of those is a single key: A acknowledge, W war room, M mitigate / roll back, R resolve.

Primary action: Start free (Free tier, 5 responders, no card). Secondary: Book a demo (Business / security review). Pricing visible: Free / Team / Business + comparison.

Audience. Solution-aware to product-aware: they already run a pager and are comparing. Buying committee: the SRE on call (user, cares about noise and sleep), the engineering manager (owns the rotation, cares about load and follow-through), the CTO (signs: reliability, audit, spend).

Logline. An engineer paged at 3 a.m. wants the outage gone and their bed back, but the page lands on the wrong person, the room has nobody who shipped the change and the postmortem never gets written, until four keys turn the whole night into one short, well-cut sequence.

Audience arc. Arrive: "incident tooling is a heavy console I fight at night." Leave: "with Lull the night is four keystrokes I just performed myself, and it is priced per person who actually gets paged."

2. Casting session

Dramatic problem: dread into rhythm. On-call is fear of the unknown; the product's promise is that the response becomes muscle memory with a tempo. The page must feel quick and composed, never frantic.

Candidate Mechanism that solves it Signature shot Risk Wrong for
Edgar Wright — Baby Driver (2017; DP Bill Pope, ed. Paul Machliss & Jonathan Amos) Action cut to a track: every door, gear change and shot lands on a beat, so chaos reads as choreography The opening getaway, cut to the song; the "Harlem Shuffle" coffee run where the lyrics appear written on the street behind Baby Can tip into music-video cuteness Anything solemn, slow or luxury
Kathryn Bigelow — The Hurt Locker Procedural calm under threat: one wire, one step, a countdown, the suit The walk to the device in a long lens, heat shimmer War imagery on a SaaS page is tasteless; its tempo is a slow burn, wrong for click and key energy Products that must feel fast and light
Steven Soderbergh — Ocean's Eleven The plan explained while it is executed; each specialist recruited with one insert The crew assembling, the vault plan over the action Heist slickness is a costume ("the team" cliché) and the yellow grade is a cliché of its own A product about restraint

Cast: Edgar Wright, Baby Driver. The product is literally a sequence of keypresses; Wright is the director whose mechanics are percussive inserts and action on the beat. Bigelow set aside for tone and tempo; Soderbergh set aside because the heist would be costume, not mechanism. Competitor test: another pager could not use this unchanged: the film is built on Lull's four keys, their named states and the visitor's own time to resolve, which persists into the ending.

Filmography check (last three: Fincher Zodiac, Anno Shin Godzilla, Sciamma Portrait): differs on director, medium (live product UI on a beat grid, not a drawn line / typeset documents / 3D glass), form (key-driven fixed-stage drill inside a document), type (Latin Bricolage Grotesque + Spline Sans Mono), lead (one incident's status), interaction (resolve an incident by keyboard), ending (status word swaps to "Quiet." with your own time in the line), instruments (keycaps, clock of the night, incident chip).

Mechanisms (each visible on screen)

  1. Action cut to the track → a 112 bpm beat grid. In the drill every keypress lands at once, and its consequences (Slack note, escalation cancelled, status page) post to the timeline on the next beats; a beat dot in the incident chip pulses while the incident fires. (drill, chip)
  2. The lyrics written on the set ("Harlem Shuffle" oner) → the copy's words live inside the product UI: the hero's live feed carries the incident, the drill's status word is the headline, section eyebrows are timeline timestamps (03:13 · Your turn … 23:00 · Quiet). (hero, drill, every section)
  3. Percussive inserts of mundane actions (gear stick, keys, coffee lids) → each key pressed cuts in a close-up of that keycap for one beat at the corner of the console. (drill)
  4. Baby picks the track; the job waits for it → the incident clock does not start until the visitor takes the pager; their time to resolve is theirs. Rewind (Baby restarts a song) → U replays. (drill, chip, final)
  5. Whip pans hide the joins → role tabs whip their panel sideways with a short smear; the cube-flip word tips like a key. (roles)
  6. Hard stops on the punchline → every move is expo/power-out, 0.2–0.5 s, zero overshoot (cube-flip's small back-out is the only give, on a key that has mass). (everywhere)
  7. The silence after the music (Baby's tinnitus hum, the ending's quiet) → after R the beat dot stops, the accent leaves the chip, and the last scene swaps "Resolved." to "Quiet." (chip, final)

3. Medium

Designed: the product UI is the world's material. A live, simulated console (DOM + inline SVG sparklines), keycaps as physical objects (top face, wall, travel on press), set type, a paper ground with a fine grain for the day and a night ground with a monitor glow. No canvas, no photographs, no AI images. This film's mechanism (action cut to a beat) becomes keypresses, timestamps and status swaps because the product's own drama happens in keystrokes and log lines. Why not 3D: nothing here is solid or glossy; the tension is timing. A rendered keyboard would be a prop.

4. Lead, location, assets

Lead: incident INC-2417's status (the big status word + its card). Verb: resolve. States: Quiet (loader) → Firing (hero) → Acknowledged → War room → Rolled back → Resolved (drill, by the visitor's keys) → Postmortem (draft card, highlighter) → Quiet (final, your time). Location: one night on call, 03:12 to 23:00. Night console → dawn (the ground turns to paper) → a working day of documents (standup, wiring, security review, budget, questions) → night again, quiet. Assets: none requested. All type, CSS and SVG; no library media, no generation. Real logos are not used: integrations are names only, marked illustrative.

5. Award pass

WORLD OBJECT   the keycap: loader (l·u·l·l typed), wordmark, every button and CTA (top face + wall + travel),
               tabs, pricing toggle, the "?" sheet, drill keys and inserts. Second object: the incident
               timeline timestamp, which heads every section and drives the clock instrument.
LEAD STATES    Quiet → Firing → Acknowledged → War room → Rolled back → Resolved → Postmortem → Quiet
LOADER         shot one: four keycaps type l·u·l·l at the wordmark position (one per beat) while the
               status word swaps Quiet. → Firing. The headline and Start free are in the DOM and on
               screen from first paint; the loader is the first 1.2 s of the hero, not a wall.
CUT MATERIAL   hero → drill: the alert row opens (clip expands from the INC-2417 row of the feed to the
               full frame — the gesture of opening an alert). drill → dawn: the swap bar at frame scale,
               in paper (the morning arrives as the bar). Flow sections and the final night push (a hard
               edge rising; the kit's overlap cut would hide the FAQ's last screen under the final frame).
               Exception: tab panels whip sideways (mechanism 5).
ACCENT         signal red-orange #FF4A1C = "needs a human: your move". The firing bar, the next key to
               press, the beat dot while firing, the cause to confirm, and the Start free keycap (the
               visitor's move). Leaves the chip after Resolve. Budget ≤ 4 % of any frame.
TYPE           Bricolage Grotesque (display at wdth 75 / opsz 96 / 800; text at opsz 14 / 400) +
               Spline Sans Mono (keys, timestamps, figures). Switch device: the keycap — any key named in
               a line is set as a real <kbd> cap. Display at the extreme: the status word 15–17 vw (hero,
               final) / ≤ 9 vw in the console; H1/H2 deliberately small (≤ 3.4 vw) because the status
               word carries the scale.
INSTRUMENTS    1 top-left wordmark of four caps · 2 top-right Start free keycap (↵) · 3 top hairline clock
               of the night 03:12 → 23:00 with section ticks (scroll) · 4 bottom-left incident chip
               (INC-2417 · state · your timer · beat dot) · 5 bottom-right "?" keycap: shortcut sheet.
VERB           resolve an incident by keyboard: A, W, M, R (tap on touch). Your time persists.
TRIGGERS       scrub: hero→drill opening, dawn read-fill + ground, clock. Entry-then-play: stats odometers,
               final swap. Autoplay: loader, live feed, beat dot. Click/tap: keys, tabs, pricing toggle,
               dialogs. Keyboard: A W M R U ?, arrows on tabs. Hover/focus: integration previews.
               Idle: the drill prompts the next key after 6 s. Input: responders → monthly total.
TYPE CAST      signature headline-swap (opening autoplay, drill keys, final entry) + cube-flip (tabs),
               odometer (stats on entry, prices on toggle), select-box (integration preview on hover),
               highlighter (postmortem cause, on R), read-fill (dawn statement, scrub).
RHYTHM         set pieces: hero, drill, dawn, final. Calm documents: numbers, roles, wiring, security,
               pricing, FAQ (≈ 70 % of the scroll). Phone: the drill re-blocks to status word on top and a
               thumb bar of four keys at the bottom; tables scroll inside their own box.

6. Trigger table

# Beat Performance Trigger Keyboard / touch path Reduced motion
1 Loader four caps type l·u·l·l at the wordmark autoplay (intro, once) none needed (decor) caps shown at rest
2 Hero status word Quiet. → Firing. (headline-swap) autoplay (intro, 0.9 s) n/a "Firing." at rest
3 Hero live feed: log lines on the beat, latency sparkline, beat dot autoplay loop, paused off-screen Pause feed keycap (Space/Enter) paused composed still + Play key
4 Hero → drill the INC-2417 row opens into the console scroll scrub (cut) Page Down / swipe hard cut
5 Drill A / W / M / R: status swap, keycap insert, timeline posts on the next beats keyboard + click/tap keys A W M R; buttons (Tab + Enter); tap instant state, no insert
6 Drill the next key pulses and the caption asks for it idle (6 s without input while on stage) same keys static "next" ring
7 Drill U rewinds to Firing (swap backwards) keyboard + click U / Replay button instant
8 Drill (after R) postmortem cause highlighted keyboard/click event (R) as 5 marker at rest
9 Dawn statement lit word by word (read-fill) and the ground turns from night to paper scroll scrub scroll / Page Down lit, paper
10 Numbers four odometers roll once to their exact value scroll entry, then play n/a final values
11 Roles cube-flip role word + panel whip click / tap ←/→ on the tablist, Home/End instant switch
12 Wiring preview updates, select-box frames the tool name hover / focus / tap Tab to a tile; tap box at rest
13 Pricing Monthly ↔ Annual: prices roll (odometer) click / tap Tab + Enter/Space instant values
14 Pricing responders → monthly total type / input number field, arrows same
15 Final status word Resolved. → Quiet. scroll entry, then play n/a "Quiet." at rest
16 Chrome shortcut sheet opens keyboard ("?") + click ? / Esc; button instant
17 Chrome clock of the night 03:12 → 23:00 scroll scrub n/a follows scroll

Scroll-scrubbed: 4, 9, 17 → 3 of 17 performances.

7. Type cast

Effect Job Trigger Where
headline-swap (signature) the lead changes state: a bar wipes, the status under it is replaced autoplay (opening), keyboard/click (drill), scroll entry (final) hero status word, console status word, final status word
cube-flip a choice with mass: the role word is a key face that tips to the next click / arrows Roles tab headline
odometer a real figure arrives and stops exactly scroll entry (stats), click (pricing toggle) Numbers, Team/Business prices
select-box inspector-style frame on the tool being previewed (DevTools' own gesture) hover / focus / tap Integration preview heading
highlighter points at the one line a human must confirm keyboard/click (R) Postmortem draft cause
read-fill the statement read aloud by the scroll scroll scrub Dawn

8. The audience's part

Action       press A, W, M, R in order (or tap the keys) while the console is on screen
Response     the key travels, a close-up insert cuts in, the status word swaps, the timeline posts on the beats
Consequence  the incident stays resolved for the rest of the page: chip "Resolved in 0:41", accent gone,
             postmortem card, and the final line quotes your time; U replays from Firing
Equivalent   buttons with labels (Tab + Enter), tap on touch; the wrong key gets a one-line hint

9. Shot list

# Scene Copy Shot / blocking Light / colour Build Cut out Length Energy Money frame Mobile
1 page (hero) eyebrow, H1, sub, CTAs, feed wide: H1 small top-left, live feed right, status word huge across the bottom night ink, monitor glow behind the feed, accent bar on "Firing." intro, feed loop, swap the INC row opens (data-cut 100) 240, data-hold (the feed is the development) 6 feed running, "Firing." landed stack: H1, CTA, feed 3 lines, word 24 vw
2 drill eyebrow, h2, console, captions, postmortem medium: console left, timeline right; insert keycap close-up night, accent only on the next key state function render(x, s); keys; idle swap bar, paper (data-cut 80) 340, data-hold 8 (performed) Rolled back / Resolved status top, log 3 lines, thumb bar
3 dawn statement close: one paragraph, 1.6–2.4 vw ground night → paper while the words light read-fill + colour scrub push 260 3 half lit, ground turning 6.4 vw text
4 numbers four stats wide row of four big figures, hairline rules paper odometer on entry push flow 4 figures landed 2×2
5 roles tabs, cube word, 4 features ×3 split: tabs + cube word left, panel right paper tabs, cube-flip, whip push flow 4 CTO panel tabs scroll, panel below
6 wiring 12 tools, preview dark slate panel of keycap tiles + preview card slate (a monitor in the room) hover preview, select-box push flow 4 Grafana selected tiles 2-col, preview first
7 security list + reliability note document column with a ruled audit-log list paper none (calm) push flow 2 — —
8 pricing 3 tiers, toggle, calculator, table three keycap-edged plans, Team raised; table below paper, accent on Start free only odometer, input push flow 5 annual, Team stacked, table scrolls in box
9 faq 7 Q&A two columns: heading left, details right paper native details push flow 2 — one column
10 quiet (final) eyebrow, h2, line, CTAs, the feed gone quiet rhyme of shot 1: status word huge across the bottom, the same feed panel now flat and filed night by push; accent only on Start free swap on entry (grey bar) footer 130, data-hold 5 "Quiet." + your time as hero

10. Skeleton

Energy: cold open at 6 (it is already firing) → spike at the drill (performed, 8) → long calm plateau of documents (2–5) → small lift at pricing → a quiet close. Turn: the visitor's R (~22 % of the scroll, when they act). Opens mid-action (an alert already paging). Ends on a rhyme: the hero's frame, same word position, the incident gone, your time in the line.

11. CRO decisions

  • One primary action, everywhere the same: "Start free" as the only accent keycap (chrome, hero, Free plan, drill end, final). "Book a demo" is the outline keycap, aimed at Business / security review.
  • Awareness: solution/product-aware → lead with the mechanism (four keys) and let them perform it, then proof, roles, wiring, security, price. Pricing is visible, no "contact us" walls except >200 seats.
  • Committee: the Roles tabs answer each signer in their language (sleep / load / cost and audit).
  • Objections next to the action: "No credit card" under every Start free; "viewers are free" at the price headline; refund window under the plans; Slack-down paging in Security and FAQ; migration and runbook prerequisites in FAQ; calculator turns per-seat into a monthly figure.
  • Pricing: price metric = responder (people who can be paged), which matches value and removes the "penalises adoption" risk for viewers. Three tiers by situation, Team marked "Most teams start here" with a reason (real rotation). Annual default, monthly one click away, saving stated as a number.
  • Friction: sign-up asks two fields (work email, team name); demo asks four; both state what happens next.
  • Proof honesty: all numbers labelled illustrative; no testimonials invented.

Every production on this site is a fictional brand. The output is real: made by agents using the skill.