Cinematic UI 2.0EN

← 作品 · 第 02 / 04 · 24 小時動物急診

北辰動物急診醫院

一位凌晨兩點發現貓咪呼吸不對勁的飼主,想找一個醒著、知道該怎麼辦的人;一條線從貓的呼吸一路畫到醫院門口,清楚告訴她接下來會發生什麼。

看現場 ↗讀導演筆記

北辰動物急診醫院 — 第一格
導演 · 電影
大衛.芬奇《索命黃道帶(2007)》
媒材
一條連續手繪的 SVG 線、排版文字與 CSS 光(夜晚的鈉燈光池、紙面上的檢查燈光池);不用 canvas、沒有照片
主角與弧線
一條筆線:蜷著還醒著的貓、呼吸軌跡、分流連線、道路與亮燈的門、監視器波形、地圖路線,最後是睡著的貓。
觀眾的戲份
自我檢傷:從六種症狀中選一個,線會把它分流到第 1 到 3 級;這個級別會一直留在撥號列上。
調色
#0b1417#ffb43a
北辰動物急診醫院 — 畫面 2北辰動物急診醫院 — 畫面 3

放映

下方是正在執行的現場版,可以直接捲動。

導演筆記(treatment.md)

這是 agent 在製作過程中寫下的工作筆記,維持原文(英文)未經修飾,供想看細節的人參考。

展開全文

Fictional demo. Site mode, zh-TW. Built on the Cinematic UI kit (reel.js, type-fx.js), no canvas.

1. Development

Product truth. A 24-hour emergency animal hospital in Taichung (北辰動物急診醫院, 台中市西屯區北辰路 24 號, 04-0247-0247: all invented; local numbers in Taiwan never begin with 0 after the area code, so the number cannot ring a real person). What it can honestly claim inside the fiction: a vet is on duty every hour of the year, triage by urgency, an estimate before any paid procedure, records handed back to the owner's own vet.

The one action. Call (tel:). Secondary: directions. Tertiary: the "is this an emergency?" self-check.

Logline. A pet owner who finds her cat breathing wrong at 2 a.m. wants someone awake who knows what to do; fear and not knowing whether it is "bad enough" stand in the way; one line, followed from the cat's breath to the hospital's door, shows her exactly what happens next, and the number is under her thumb the whole time.

Audience arc. Arrives believing: something is wrong, I don't know if this is an emergency, and I'm afraid of the wait and the bill. Leaves believing: I know whether to go now, someone will take her at the door, and nothing gets charged without me agreeing.

Controlling idea. Calm is a procedure: when every next step is known, fear has less room.

CRO (cro-master) — focus contract

Decision surface and stage:  homepage of an emergency vet, two states: (a) crisis at night on a phone, (b) research ahead on any device
Audience state:              (a) problem-aware, most-aware of urgency: needs where/now, nothing else; (b) solution-aware, comparing ERs
Dominant promise:            現在就有獸醫師,電話裡先幫您判斷要不要出發
Brand cue:                   北辰 + the fixed amber call control (the "pole star": the one thing that never moves)
Reason / mechanism:          24 h vet roster, triage by urgency, estimate before treatment
Minimum sufficient proof:    night staffing (2 vets + 3 nurses), equipment, triage steps with times, sample price slip, deposit rule
Primary next action:         撥打急診 (tel:), one tap from every frame
Secondary paths:             導航 (maps), 急診自我判斷 (#check)

Objections → proof (placed where the objection arises)

Objection Where Answer on the page
"Is this bad enough to go?" / "Am I overreacting?" hero → breath → check the breathing rule (40/min asleep, open-mouth in cats, pale/blue gums); the self-check with three levels; "電話裡先幫您判斷"
"Will I wait for hours?" arrival triage by urgency not queue; nurse at the door in 1–2 min; level 1 goes straight in; FAQ on waiting
"Can they really handle it at night?" team night roster, surgeon within 30 min, oxygen, X-ray/ultrasound, in-house labs, blood, OR, ICU
"The bill will shock me / they'll upsell" cost statement: estimate first, stop and ask if it goes over; price slip; deposit rule; FAQ: tell the vet your budget
"My pet has its own vet" FAQ records and imaging handed over
"Where, parking at night?" location entrance, 6 kerbside bays, 24 h car park, landmark

Friction decisions. No form, no account, no loader gate (copy and call control are in the HTML at first paint; the line draws behind them). No Lenis (smooth scroll adds lag to a hurried thumb; the reel's own 0.09 s playhead smoothing only affects the film, not the page). Tap targets ≥ 56 px. tel: everywhere the number appears. noindex (a fictional clinic should not be found by a frightened stranger).

What not to claim. No reviews, ratings, case counts or "best/first/guarantee" (Taiwan medical-ad rules; and nothing real to cite). Proof is process and roster only. Prices are labelled 示範價目 beside the slip, and the footer says the whole hospital is fictional and not medical advice.

Trade-offs, cinema vs. conversion (resolved for the product).

  1. The camera-locked line wants long pinned holds; a frightened visitor wants zero scroll. → The call control is outside the film (fixed slate / bottom bar) and never moves, fades or waits; total hold kept ≈ 24 % of scroll; the triage self-check is a flow scene, not a pin.
  2. The zoom-through the door is the turn; the arrival steps are information. → All four steps are always printed in full under the line; the scroll only lights the current one. On phones the arrival scene unpins and reads as a list.
  3. The typewriter super is the signature; typing delays reading. → It only ever types a super of ≤ 16 characters, in ≤ 0.4 s, and the headline and number never type.

2. Casting session

Mechanism that solves "fear → control" Signature shot Risk Wrong for
David Fincher — Zodiac The camera is locked to its subject with machine precision; time-and-place supers name every moment; procedure shown as inserts of paper The pen-tip of one line stays fixed on screen while the night slides past it Cold; Zodiac's case-file greys can read as menace Anything that needs warmth carried by the picture alone
Yasujirō Ozu — Late Spring No camera motion, every change a cut; frontal address A low, still frame of the waiting room with one change Pillow shots are empty beats: a frightened visitor cannot afford them Urgency
Steven Spielberg — Close Encounters The light of the thing on faces before the thing Owner's face lit by the hospital's window Awe and wonder are the wrong emotion; sentimental A clinical promise

Cast: Fincher, Zodiac (2007, Harris Savides; shot on the Viper, clean digital night, sodium practicals). Ozu set aside because stillness-as-ritual spends the visitor's time; Spielberg set aside because wonder is not what a scared owner needs. Fincher's habit of locking the camera to the subject is the dramatic problem solved: in a night where everything moves, one thing holds still. Could a competitor use this unchanged? No: the locked subject is this hospital's own verb (following one animal's breath through triage), and the thing that never moves is its call control.

Mechanisms (each points at a frame)

  1. Time-and-place supers (Zodiac's "Vallejo, California / July 4, 1969") → every pinned scene opens with a mono super, typed: the hero's is the visitor's real clock: 「02:14 · 台中西屯 · 急診開著」. Scenes: night, breath, door, arrival, final.
  2. Camera locked to the subject → the pen-tip of the lead line is fixed in screen space while the world (cat, breath, road, door, monitor) tracks past it. Scenes: breath, door, arrival.
  3. Zero overshoot → every eased move is power2.inOut; nothing bounces, nothing springs. All scenes.
  4. Inserts of paper and procedure → the price slip is a perforated clinic slip set in small exact type; the arrival steps are a printed procedure under the trace. Scenes: arrival, cost.
  5. Top light, the subject in a pool → each ground has one soft pool of light from above (exam lamp on paper, sodium on night). All grounds.
  6. The impossible pass → once, the camera goes through the lit window of the door into the paper-white interior. Cut door → arrival.
  7. Dense, small, exact type; the camera moves only when the subject moves → headlines deliberately small; the line only advances on scroll; between stations it holds.

3. Medium

Designed: one continuous drawn line (SVG stroke), set type, and light (CSS grounds). No photographs (no animals in distress), no canvas. This film's mechanism becomes a single pen line whose tip the camera never lets go of, because the whole promise is "we follow your animal through the night without losing it." Why not 3D: nothing here should be solid or glossy, and the first frame must paint instantly on a phone at night. Why not photographs: the medium has to be humane; a line can breathe without suffering. Format: night ground #0b1417 with a sodium pool; paper #f3f1ea with an exam-lamp pool; line 2 px at rest scale. Shift: the ground shifts night → paper once, through the door (and back to night for the end).

4. Lead, location, asset call

Lead: one line. The verb is triage (follow, sort, stabilise). States:

  1. A curled cat, eye open, breathing a little fast (loader + hero)
  2. The breath trace: fast shallow waves, the 40-per-minute threshold hairline (breath)
  3. A routing branch: the line runs from what you picked to its level (check)
  4. The road and the lit door of 北辰 (door)
  5. A slow, even monitor trace with four stations (arrival)
  6. The route on the map, ending at the amber door (location)
  7. The same curled cat, eye closed, breathing slowly (final). Rhyme.

Location. One night in Taichung: a living room, a road, a door, an exam room. One light logic: a single source from above. Supporting cast. Supers, the price slip, the call control. Asset call. Answered in the brief: no paid generation. Everything is SVG / CSS / type, authored here. Fonts: Chiron GoRound TC and Martian Mono (Google Fonts, SIL OFL). No library photos needed.

5. Screenplay — final copy (after talking-master)

Talking-master pass: 您 throughout (healthcare); every answer leads with the answer; disclaimers kept once each where they change a decision (self-check is a reference, prices are demo, footer); no 破折號, no 套話; "記下開始的時間" kept (a vet asks for seizure duration: an instruction, not homework). check.py flags 催促「現在就」: kept on purpose, it is the triage instruction 「現在就出發」, not marketing urgency. Trimmed in the pass: one FAQ (transport, duplicated by the self-check results), the location CTA pair (duplicated by the fixed call), equipment lines, the footer.

Visible copy: 1,368 Han characters in main + disclaimer (1,419 including the fixed chrome). copy-check.mjs: 74/74 lines present with JS on and off. The list below is copy.md:

02:14 · 台中西屯 · 急診開著
半夜發現牠不對勁,
北辰動物急診醫院全年 24 小時都有急診獸醫師值班。電話接通後,我們會先幫您判斷要不要馬上出發。
04-0247-0247
不確定算不算急診?先看這裡
狗、貓、兔和小型寵物都看,不用預約。
第一步 · 看呼吸
先看牠怎麼呼吸。
讓牠躺著別動,看胸口一起一伏,數 15 秒。睡著時超過 10 下(等於一分鐘 40 下)、貓咪張著嘴喘,或牙齦發白、發紫,請直接出發。
急診自我判斷
牠現在怎麼了?
點一個最像的狀況。
選一個,我們告訴您該多快過來、路上先做什麼。這是參考分級,實際仍以醫師的判斷為準。
呼吸很喘、張著嘴呼吸
抽搐超過 3 分鐘,或一直反覆
吃到巧克力、百合、葡萄、老鼠藥或人吃的藥
公貓一直蹲砂盆,卻尿不出來
被車撞或從高處摔下,看起來沒事
吐了一兩次,精神和食慾都還好
讓牠保持涼爽,自己選舒服的姿勢,不要硬抱緊。出門時打給我們,到門口就有人接手。
移開周圍會撞到的東西,手不要伸進牠嘴裡。記下開始的時間,車上用毛巾輕輕包著。
先不要自己催吐。把包裝或剩下的東西一起帶來,醫師能看出吃了多少。
這可能是尿道阻塞,幾個小時內就可能變危險。用外出籠帶來,路上不用餵水。
今晚就來一趟
內出血和氣胸一開始常看不出來。用硬紙板或毛巾當擔架,讓牠平躺著移動。
通常可以先在家觀察。如果一直吐、吐出血,或開始不吃不動,就直接過來。
抵達 · 北辰路 24 號
門口的燈整夜亮著。
急診入口在正門,夜間直接停在門口的臨停格。進門不用先掛號,先把牠交給護理師。
依急迫程度看診,
不是依掛號順序。
護理師先看呼吸、心跳、牙齦顏色和意識,大約一兩分鐘。
直接進處置室
呼吸困難、抽搐、大量出血或昏迷,先給氧、止血、穩定,手續之後再補。
約 15 分鐘
告訴您可能的狀況、要做哪些檢查、大約多少費用,您同意後才開始。
住院觀察、轉回原本的獸醫院,或帶回家照顧,病歷和影像都會交給您。
夜班一樣有兩位急診獸醫師。
每一班固定兩位急診獸醫師、三位護理師。需要開刀時,外科醫師 30 分鐘內到院。
可調濃度和溫度,喘的動物先進這裡。
數位 X 光與超音波
十分鐘內看到胸腔和腹腔。
血液與血氣分析
院內檢驗,不用等外送。
與犬貓捐血計畫合作,半夜也能備血。
24 小時都能開刀。
住院動物整夜有人巡視。
先估價,您點頭才開始。
任何會產生費用的檢查或處置,醫師都會先說明項目和大概金額。費用可能超出估價時,我們會先停下來跟您確認。
北辰動物急診 · 常見費用
夜間急診掛號 22:00–08:00
日間急診掛號
X 光(每張)
1,500–3,000
氧氣艙(每小時)
住院或手術押金,出院時多退少補
10,000 起
可付現金、信用卡、LINE Pay。
示範價目,非實際收費。
出發前常被問到的事
要先打電話,還是直接過去?
直接來就可以,不用預約。路上先打一通電話,我們能先備好氧氣或藥物,您一到就能處理。
牠有固定看的獸醫院,還能來嗎?
可以。穩定之後,我們會把病歷、檢驗和影像整理好,讓您帶回原本的醫院繼續追蹤。
夜間急診要等多久?
要看當下有幾位重症病患。第一級馬上處理;其他狀況會先告訴您大概要等多久,等候時護理師會定時再看一次。
擔心費用負擔不了怎麼辦?
直接跟醫師說您的預算。很多狀況不只一種處理方式,醫師會說明各自的差別,再跟您一起決定。
北辰路 24 號,正門就是急診入口。
台中市西屯區北辰路 24 號
門口有 6 格臨停車位,夜間可以直接停;後方 50 公尺有 24 小時停車場。
從台灣大道轉進北辰路,第二個路口右手邊,白色招牌「北辰 24」。
P · 24 小時停車場
P · 門口臨停 6 格
02:14 · 北辰路 24 號 · 急診開著
打這支電話。
04-0247-0247北辰動物急診醫院是虛構的示範,地址、電話和價目都不是真的。本頁不能取代獸醫師的診斷;動物正在危急時,請立刻聯絡最近的動物醫院。

6. Storyboard

Form: document with set pieces. Three set pieces (breath+door share the locked line; the self-check is the click-driven piece; the arrival is the turn), six calm flow documents. Structure: documentary inside a night: thesis (call now) → evidence (breath, check) → witness (arrival) → verdict (cost, FAQ, location) → card. Skeleton. Energy: cold open at the peak, then descending, one spike at the turn (8 7 9 5 8 3 3 2 3 4). Turn early-middle (~38 %, the door). Opens mid-action (the cat is already breathing wrong; the clock is already running). Ends on a rhyme (the same cat, asleep).

The award pass

WORLD OBJECT   the pen line itself, and the clinic's own paper: the trace, the triage tag, the price slip. Reaches: loader (draws the cat), cuts (the line carries the eye; the window iris), buttons (a hairline underline that is the line; the call button's amber is the door's light), progress (nav underline drawn by a stroke), cursor (system), footer (the line ends in the cat)
LEAD STATES    cat awake → breath trace → routing branch → road & lit door → monitor trace with stations → map route → cat asleep
LOADER         shot one: the line draws the cat in 1.3 s behind already-present copy; the super types the visitor's own clock. It becomes the hero
CUT MATERIAL   the line itself carries every cut (copy masks out, the pen keeps drawing); the one exception: an iris through the door's lit window (the impossible pass) into paper
ACCENT         amber #ffb43a: "the light is on, act here". Only: call controls, the door window, the status dot. ≤ 3 % of any frame
TYPE           Chiron GoRound TC (all CJK: rounded, steady, legible under stress) · Martian Mono (every number, time and super: tabular, narrow width axis) · switch device: every figure inside a CJK line drops into Martian Mono · display deliberately small (H1 ≤ 3.6 vw) because the line carries the scale; one monumental exception, the phone number at 11 vw in the final frame
INSTRUMENTS    1 identity + live status "● 急診開著 · 現在 HH:MM" (a Zodiac super that is true) · 2 the fixed call control (desktop top-right; phone bottom bar, two buttons): the pole star · 3 chapter index whose underline is a drawn stroke · 4 after the self-check, the chosen level rides in the call bar
VERB           the visitor triages: picks what is happening, the line routes it to a level, and that level stays with them (call bar, arrival)
TRIGGERS       (Rev. 2) seven kinds: autoplay (cat drawn, hero super typed), loop (the cat breathes), time (live clock; the 15 s breath window), scroll scrub (the locked-pen camera, the copy wipes, read-fill: 3 of 16 performances), scroll entry → play (supers, the map route, the final line), click/tap (triage; tap-along breath count), hover/focus/tap (FAQ marker). The call control has none: it never moves
TYPE CAST      (Rev. 2) signature typewriter supers + odometer (breath rate), headline-swap (triage level change), highlighter (FAQ answer), blur-resolve (final line), read-fill (cost statement)
RHYTHM         set pieces: night/breath (locked line), check (click), door → arrival (the turn), final card. Calm documents: team, cost, FAQ, location. Phone: arrival unpins into a list; the bottom bar is always there

Shot list

# · slug Beat Copy (short) Shot Camera Blocking Light / colour Build Cut out Len E Money frame Mobile cut
1 · INT. LIVING ROOM — 02:14 Cold open, mid-action super (live clock) · 「半夜發現牠不對勁,直接打來。」 · call, maps, check link WS, frontal, eye level Lock-off Cat curled right-centre, breathing ~0.7 Hz; copy left; call fixed top-right Night, sodium pool top-left SVG cat (authored), type Copy masks out; the pen keeps drawing (line carries) 200 8 0.3: cat whole, copy set Cat top 40 %, copy lower, bottom bar
2 · THE BREATH Evidence 1 「先看牠怎麼呼吸。」 + the rule MS, locked on pen Camera locked to pen; world slides left Pen fixed at 70 % x; fast waves pass; the 40/min hairline arrives Night Procedural breath path, mono labels in SVG Push (check rises over it, opaque) 260 (cut 60) 7 0.75: threshold hairline beside the copy Pen at 72 % x, 30 % y; copy lower
3 · THE CHECK The visitor's part 「點一個最像的狀況。」 6 options, 3 levels Flow, eye level — Options left, result right; the line draws from the pick to the level Night, flat DOM buttons, inline SVG connector Push flow 9 chosen state Stacked; result below, focused
4 · EXT. 北辰路 24 號 — NIGHT Turn approaches 「門口的燈整夜亮著。」 WS, frontal Locked to pen, then lets go to frame the building Road → facade → door with amber window Night; the window is the only light Procedural facade path Iris through the window (zoom ×5) 260 8 0.85: the whole facade, window lit Building top half
5 · INT. TRIAGE — LIGHT The turn: what happens 「依急迫程度看診,不是依掛號順序。」 + 4 steps MS, locked on pen Locked; holds at each station Slow trace; four stations; steps printed under, current lit Paper, exam-lamp pool Procedural trace; step list Push (team rises) 340 (cut 80) 9 0.9: all four lit Unpinned list, static trace
6 · THE TEAM Proof roster + 6 equipment inserts Flow — Two columns, inserts as tagged rows Paper Type Push flow 5 — One column
7 · THE SLIP Proof against cost fear 「先估價,您點頭才開始。」 statement + slip Flow, insert — Statement (read-fill) left, perforated slip right Paper, slightly darker slip Type, CSS perforation Push flow 3 — Statement, then slip
8 · QUESTIONS Interrogation 5 Q&A Flow — Open accordion-free list (all answers visible) Paper Type Push, ground to night flow 3 — Same
9 · THE ROUTE Practical address, parking, landmark, map Flow — Map line (the lead as route) right, text left Night Inline SVG map Push flow 2 — Map above text
10 · INT. LIVING ROOM — LATER Final image, rhyme 「無論幾點,打這支電話。」 + 04-0247-0247 at 11 vw WS as 1 Lock-off Same cat, eye closed, ~0.22 Hz; number across the bottom Night Same cat path — 160 4 0.6 Cat top, number full width
credits Footer fictional / not medical advice / fonts — — — Night — — — 1 — —

Continuity sheet. Type entrance: typed super (1, 2, 4, 5, 10: the motif), line-mask rise for H1/H2 in pinned scenes only (1, 2, 4, 5, 10), read-fill once (7). Light event: the window lights (4), the ground turns to paper (4→5), back to night (9→10). Camera: lock-off (1, 10), locked to pen (2, 4, 5), the pass (4→5). Reasons. 1 and 10 share a frame so that the eye and the breathing are the only change. 2, 4, 5 share the locked pen because the procedure is one continuous act. The flow scenes are flat and still on purpose: they must be trusted and read. Short laptop. Line scale by min(W, H); arrival step text drops to 15 px, the trace band shrinks to 28 svh. Ultrawide. The pen anchor moves to 64 % x and the world scale grows with height, so the line fills the room; copy measure capped. Hold budget. Pinned holds (length − 100 − cuts): night 30 + breath 100 + door 80 + arrival 160 + final 60 = 430 vh of ≈ 1,800 vh desktop (≈ 24 %). On phones arrival unpins: ≈ 270 vh. Screens to the call: 0 (it is always on screen). Screens to the self-check: one tap (hero link) or ≈ 4 screens of scroll.

The audience's part

Action       pick the symptom closest to what you see (one of six buttons)
Response     the line draws from your pick to its level; the level, title and what to do on the way appear; the call button sits beside it
Consequence  the level rides in the call bar for the rest of the visit ("第一級 · 現在就出發"), and the arrival scene tells you what that level means at the door
Equivalent   buttons are real <button>s: Tab + Enter/Space; tap on touch; result is an aria-live region and receives focus on phones

7–9. Build and screening notes

Type-fx cast (Revision 1; superseded by the Revision 2 type cast below). typewriter — the Zodiac super, typed in ≤ 0.4 s on every pinned scene (hero clock, breath, door, arrival, final) and once more on the visitor's own triage level (the super the visitor causes). read-fill — once, on the cost statement (the only statement paragraph). Headline, number and body never animate per character.

What was built. No canvas. One fixed SVG holds the lead: six path pieces measured once, drawn by dash offset; leadAt(m) gives the whole pose (length drawn, lock, anchor, zoom, paper iris, breathing) from the reel's master time, so every frame is reproducible; the reduced cut renders its own still of the line inside each pinned frame. The camera lock: world transform = anchor − pen(L)·scale, so the pen-tip stays put. The pass: the world zooms ×(computed) about the lit window while a paper layer is clipped to that window's screen rect, so the window becomes the room.

Screening passes (4). 1: copy and line collided in breath (copy moved under the line, door copy above it); paper ground leaked under location (paper now ends at location); mobile hero super crossed the cat (anchor raised); final number overflowed on phones and sat on the headline (specificity fix, 12.2 vw). 2: supers sat at rest before their entrance (start at p = 0); triage connector jogged (now runs straight into the result's rule). 3: landscape phone sliced the hero and stacked the nav (short-frame cut), ultrawide type too small (grows ≥ 1900 px); call bar now reserves room for the chosen level on phones. 4 (after the blind test screening): the line now rides in every document eyebrow as a small steady trace, line labels enlarged, arrival trace lowered so the persisted level never touches the station labels; a sodium spill under the door.

Blind test screening (fresh agent, contact sheets only). Read the product, the call action and the lead (cat → breath → door → cat) correctly; named the door/paper pass and the final number as the climax. Its two notes (documents lose the lead; tiny line labels) drove pass 4.

Measured change vs. energy. breath 2–3, door 5–8, arrival 1.3–2 (its development is the pen holding at stations and the step rules thickening: small in the measure, visible by eye), final 2. The energy spike of the turn is the cut (the pass), not the arrival hold: arrival's planned energy is revised to 6.

Jury pass. Same subject in most frames and changed at the end: yes (the doc pages now carry it as the eyebrow trace). Accent findable at a glance: the amber is only the call control, the door window and its spill, the status dot and the chosen level. Chrome recognisable without the hero: the amber call is the door's light; the nav underline and eyebrows are the line; the supers are the clock. Cuts: copy is wiped in the pen's direction while the line carries the eye; the one exception is the window iris; flow scenes push (physical, opaque grounds). No plain fade anywhere.

CRO self-audit of the built page

Check Result
Primary action in first viewport, one tap from every frame Yes: fixed slate button (desktop), fixed bottom bar with 撥打急診 + 導航, 58 px tall (phone); tel: on every number; the final frame's giant number is itself a tel: link
One dominant promise 「半夜發現牠不對勁,直接打來。」 + "we'll help you judge on the phone"
Objections answered where they arise breath rule → self-check → arrival (wait) → team (night capability) → cost (estimate first, deposit, budget FAQ) → location (parking)
Friction No forms, no gates, no smooth-scroll lag, copy and call in HTML at first paint; reduced-motion cut shows every word
Proof honesty No reviews, ratings or superlatives; prices labelled demo next to the slip; fictional in the footer; noindex
Verdict No further change needed for the demo. Real-clinic next steps (not built, would need real data): Google Maps rating/link and LINE OA as a secondary contact (Taiwan trust norms), a real map link, the vet roster with names and licence numbers

Revision 2 — trigger variety and the type department

Same director, film, logline, lead, world object, copy and CRO decisions. Two things changed in the skill's rules: a film needs at least four kinds of trigger (scroll scrub no more than about a third of the performances), and a type department of three to five moves around the signature, each with one job and its own trigger. Revision 1 had the signature (typewriter) and read-fill, and almost every performance was scrubbed by scroll. The constraint that decides everything below is unchanged: a frightened owner at 2 a.m. on a phone. Nothing here delays, hides or gates information or the call. The call control never animates; it stays one tap away in every frame.

What changed

  1. Kit updated to the skill's current reel.js, reel.css, type-fx.js (reel.js was already current). Picked up: html, body { overflow-x: clip }; a data-cut scene's box no longer takes clicks over the previous scene (only its frame does); rebuild({ colors }) now recolours; blur-resolve inherits the element's font. Re-screened: no regressions, zero console errors.
  2. Supers: scrubbed → entry-played. The typed Zodiac super on breath, door, arrival and final now types once, in 0.38 s, when its scene reaches main (and resets if the visitor scrolls back above it). The headline's line-mask rise stays on the scroll, because it is part of the cut. Under screening the clock is frozen, so entry beats jump to their end (f.capturing).
  3. New: counting breaths (tap + time + odometer). The breath scene tells the owner to count chest rises for 15 seconds, and holding a count in your head at 2 a.m. is hard, so the check section now has a tap-along counter. The first tap starts a 15 s window; each tap adds one; at the end the rate per minute rolls up on an odometer to its exact value with the verdict beside it. Over 40: 請直接出發. Under 12: you probably missed taps, recount; if it won't wake, go now. Otherwise: under 40, but the other danger signs still mean go. The thresholds are the page's own rule (40 a minute asleep), not a new claim. Desktop: under the check headline, left column. Phone: after the six options, so the triage still comes first.
  4. New: the triage title swaps when the level changes (click → headline-swap). If the visitor already has a level and picks a symptom at a different level, a dim bar (#2b3d43, never the accent) wipes the old title away and the new one rises in its place, in 0.5 s. Same level: nothing moves. First pick: the title is just there, with no animation in front of the answer. The instruction text under it never waits.
  5. New: FAQ marker (hover / focus / tap → highlighter). Each answer's opening clause is the answer itself (直接來就可以,不用預約。/ 可以。/ 第一級馬上處理 / 直接跟醫師說您的預算。). Pointing at a question, focusing it (each .q is now tabindex="0") or tapping it draws a straw marker (#f1d27a, not the amber) behind that clause, one at a time. The words never move. Every answer is fully readable without it.
  6. Map route: scrubbed → entry-played. It draws once in 1.2 s when the map is 72 % up the viewport.
  7. Final line: mask-rise → blur-resolve, entry-played. 「無論幾點,打這支電話。」 comes into focus character by character over 1.1 s (blur 8 px, light tracking) when the final card arrives: the night settling. The giant number under it is static and readable from the first frame.
  8. Copy (talking-master, YMYL reference). New lines only, for the counter; check.py passes. No superlatives or promises. The thresholds repeat the existing rule. 「請直接出發」 is kept as written (an instruction, not urgency marketing, as in Revision 1). The verdicts give a next step instead of 「別擔心」. Added to copy.md: 數呼吸 · 跟著牠的胸口點。 · the instruction paragraph · 胸口起來一次,點一下 · 重新數. Dynamic verdict strings (in main.js): 「一分鐘 N 下」 + 「超過 40。請直接出發,路上打給我們。」 / 「在 40 以下。如果牠張著嘴喘,或牙齦發白、發紫,一樣直接出發;還是不放心,就打電話問我們。」 / 「可能是漏點了,可以重新數;如果牠叫不醒、沒有反應,請直接出發。」. Visible copy is now 1,419 Han characters in main + disclaimer.
  9. CRO decisions kept. The call control is still outside the film, fixed and static. The counter is optional, below the triage on phones, and has no form, no data capture and no gate. The FAQ stays all-open.
  10. Small fixes found in screening. The slate's chosen-level note wrapped to three lines on desktop at level 2 (max-width 18 → 21 em). A headline-swap stage indent was removed so the title aligns with the level label. A highlighter stage indent was removed so the answer's first line doesn't step in.

Trigger table

Beat Performance Trigger Keyboard / touch path Reduced-motion state
1 hero the line draws the cat (loader = shot one) autoplay, once (1.3 s intro) none needed (copy and call are in the HTML first) cat fully drawn
1 hero the hero super types the visitor's clock autoplay, once (intro) — typed
1, 10 the cat breathes (~0.7 Hz awake, 0.22 Hz asleep) loop (reel time) — still pose
slate 「急診開著 · 現在 HH:MM」 idle / time (real clock, 20 s refresh) — same (text)
2, 4, 5 the locked pen: breath → road → door → pass → triage trace scroll scrub scroll, keys, touch each scene's still of the line
all pinned copy wiped in the pen's direction; headline lines rise scroll scrub (the cuts) same entrances complete
2, 4, 5, 10 typed super scroll entry → play (0.38 s) same typed
3 route line to the level; level typed click / tap <button> + Enter/Space; tap instant
3 title swaps when the level changes click / tap same chosen title shown at once (state-bound)
3 → chrome, 5 the level rides in the call bar and on arrival click (consequence) same same
3b tap along with the chest; 15 s window counts down tap / input + time <button>: Space/Enter per breath; tap count and seconds update; bar hidden
3b breaths a minute roll up to the exact value end of the window → play (0.7 s) — exact value at once (state-bound)
7 cost statement lit in reading order scroll scrub (read-fill) scroll fully lit
8 marker behind the answer's first clause hover / focus / tap Tab to the question (tabindex=0); tap marker appears instantly for the chosen one (state-bound)
9 route drawn to the door scroll entry → play (1.2 s) — drawn
10 「無論幾點,打這支電話。」 resolves from blur scroll entry → play (1.1 s) — sharp
every frame call control none: never animates (1 px press only) tel: link; bottom bar on phones same

Scroll scrub drives 3 of 16 performances (the camera, the cuts, read-fill), about a fifth.

Type cast (type department)

Effect Job Trigger Where
typewriter (signature) the Zodiac super: time and place, true autoplay (hero), scroll entry (breath, door, arrival, final), click (the triage level) supers; triage level label
odometer the breath rate stops on its exact value end of the 15 s window counting breaths, 「一分鐘 N 下」
headline-swap says "your level changed" click, only when the level changes triage result title
highlighter points at the answer inside an answer hover / focus / tap FAQ, first clause of each answer
blur-resolve the night settles: the last line comes into focus scroll entry final card line
read-fill the estimate promise read in order scroll scrub cost statement

Legibility rules held: no effect animates medical guidance per character. The triage instructions, the breath rule and the verdicts are plain text that is there at once. Per-character motion only touches the one-line mono supers, a 6-character title and the 9-character final line. The fonts in every effect are the page's own (Chiron GoRound TC inherited; Martian Mono for digits). Loaded faces on the page: only those two (checked in the browser). No clipped glyphs in the screened rest or mid frames.

Screening (Revision 2)

screening.mjs on http://localhost:5763 (served by npx serve, stopped after): desktop, laptop, mobile with --cuts → screening-r2/; --reduced desktop + mobile → screening-r2/; act script (screening-act.mjs) → screening-r2-act/ (40 / 40 / 36 frames: every non-scroll trigger and every type-fx effect, mid-flight and at rest, set exactly through window.__film, __breath, __faq, __titleFx). Zero console errors. One flag: the desktop arrival dead-hold, the same as Revision 1 (the pen holding at the stations and the step rules thickening do not register in the brightness measure; judged by eye). copy-check.mjs: 77 / 77 with JS on and off. Reduced-motion state-bound checks: after picking 1 then 5, the level-2 title is shown at p = 1; 12 taps give 「一分鐘 48 下」 at once; the hovered FAQ marker is at full width.

Weaknesses. The map's amber door square sits right beside the 「P · 24 小時停車場」 label, so the door can read as the car park (inherited from Revision 1; not changed here). The headline-swap blanks the title for about 0.2 s between levels, though the instructions beside it never wait. The FAQ marker is a soft straw tone on paper, gentle by design and easy to miss. The breath counter assumes the owner can see the chest; it does not replace the vet's count.

本站所有作品都是虛構品牌;成品是真的,全部由 agent 使用這個 skill 做出來。