← 作品 · 第 02 / 04 · 24 小時動物急診
北辰動物急診醫院
一位凌晨兩點發現貓咪呼吸不對勁的飼主,想找一個醒著、知道該怎麼辦的人;一條線從貓的呼吸一路畫到醫院門口,清楚告訴她接下來會發生什麼。



放映
下方是正在執行的現場版,可以直接捲動。
導演筆記(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).
- 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.
- 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.
- 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)
- 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.
- 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.
- Zero overshoot → every eased move is
power2.inOut; nothing bounces, nothing springs. All scenes. - 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.
- 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.
- The impossible pass → once, the camera goes through the lit window of the door into the paper-white interior. Cut door → arrival.
- 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:
- A curled cat, eye open, breathing a little fast (loader + hero)
- The breath trace: fast shallow waves, the 40-per-minute threshold hairline (breath)
- A routing branch: the line runs from what you picked to its level (check)
- The road and the lit door of 北辰 (door)
- A slow, even monitor trace with four stations (arrival)
- The route on the map, ending at the amber door (location)
- 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
- Kit updated to the skill's current
reel.js,reel.css,type-fx.js(reel.jswas already current). Picked up:html, body { overflow-x: clip }; adata-cutscene's box no longer takes clicks over the previous scene (only its frame does);rebuild({ colors })now recolours;blur-resolveinherits the element's font. Re-screened: no regressions, zero console errors. - 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). - 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.
- 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.
- New: FAQ marker (hover / focus / tap → highlighter). Each answer's opening clause is the answer itself (直接來就可以,不用預約。/ 可以。/ 第一級馬上處理 / 直接跟醫師說您的預算。). Pointing at a question, focusing it (each
.qis nowtabindex="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. - Map route: scrubbed → entry-played. It draws once in 1.2 s when the map is 72 % up the viewport.
- 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.
- Copy (talking-master, YMYL reference). New lines only, for the counter;
check.pypasses. 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 tocopy.md: 數呼吸 · 跟著牠的胸口點。 · the instruction paragraph · 胸口起來一次,點一下 · 重新數. Dynamic verdict strings (inmain.js): 「一分鐘 N 下」 + 「超過 40。請直接出發,路上打給我們。」 / 「在 40 以下。如果牠張著嘴喘,或牙齦發白、發紫,一樣直接出發;還是不放心,就打電話問我們。」 / 「可能是漏點了,可以重新數;如果牠叫不醒、沒有反應,請直接出發。」. Visible copy is now 1,419 Han characters in main + disclaimer. - 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.
- Small fixes found in screening. The slate's chosen-level note wrapped to three lines on desktop at level 2 (
max-width18 → 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 做出來。