勾稽

Fictional B2B SaaS demo (accounting, e-invoicing, month-end close for Taiwanese SMEs). Cinematic UI 2.1.0 production, one of three parallel test demos. Every number, integration, certification and customer story on the page is illustrative and labelled so; the footer says the product is fictional.

1. Development

Product truth. One ledger where the e-invoice, the bank deposit, the voucher and the CPA's review are the same record, matched automatically (勾稽 = cross-checking figures until they tie). The honest claim: the month closes on working day 3 instead of day 10–15 (illustrative), because matching and voucher entry stop being manual.

Audience (buying committee). 負責人 (owner, signs, pays, wants to see last month's profit early) · in-house 會計 (does the work, fears migration and a new tool) · external 會計師事務所 (reviews; a recommender and a channel; fears being locked out or forced onto a client's tool).

Logline. An owner who learns last month's profit only in the middle of this month watches one invoice, lost among 1,284, tie to its deposit, post itself, collect three signatures and close the books by the third working day.

Audience arc. Arrives believing: month-end is two weeks of Excel and chasing, and new software just moves the mess. Leaves believing: the books can close on day 3, every figure traceable to its paper, and my CPA can work in it too.

Controlling idea. A close is fast when every figure can show its paper.

2. Casting session

Dramatic problem: trust through procedure. A finance buyer believes speed only when they can watch the procedure happen and see who signed what.

Candidate	Mechanism that solves it	Signature shot	Risk	Wrong for
Hideaki Anno — Shin Godzilla (2016)	Bureaucratic procedure as the drama: every person, room, document and minute captioned on screen in heavy Mincho; hard cuts through meetings and paperwork	A caption plate "第 1 天 09:05　自動勾稽" over a document insert that cuts hard to the next step	Costume (kaiju, orange NERV screens); too cold	Warm consumer brands
Quentin Tarantino — Kill Bill Vol. 1	Numbered chapters with title cards; split screen; crash zoom on the boldest claim	Split screen: invoice left, bank line right, until they tie	Playfulness and violence costume undercut a finance buyer's trust	Anything that must feel careful
Saul Bass — Anatomy of a Murder titles	Cut-paper bars choreographed with type, the idea as one symbol	Bars that become ledger columns	Abstract: carries a title sequence, not 4,000 characters of reading; bars-as-ledger is the obvious reach, and the last copy-heavy B2B demo was already diagrammatic	Dense documents

Cast: Anno, Shin Godzilla. Tarantino set aside because the chaptered form is already in the brief and his tone works against trust; Bass set aside because he solves a title sequence, not a long document, and his diagrammatic grammar sits too close to the Dogville production. Competitor test: a rival could caption its process, but not with this invoice (QY-40718263), this three-seat sign-off (製表／覆核／核准) and this receipt. The direction is made of Taiwanese accounting paper.

Mechanisms (each pointable on screen)

1. Captions name everything (people, room, time, document) in heavy Mincho → every chapter card and every close step carries a super: date, weekday, time, room ("3月2日（一）09:00　會計室").
2. Procedure is the plot; meetings and paperwork are cut fast → the close is a pinned sequence of seven document inserts, each step cut on hard, never faded.
3. Hard cuts only, no dissolves → type and inserts cut on with tl.set in one scroll tick; chapter cards arrive as black leader and their words snap on.
4. Screens of data as drama → product UI appears as typeset forms (bank list, match lines, voucher, review note, report, ledger), never a dashboard screenshot.
5. Long static frontal holds of infrastructure → reading chapters are motionless; integrations are one static frontal diagram of pipes into one ledger.
6. Decisions climb a chain of signatures → three seals (會計 製表 → 會計師 覆核 → 負責人 核准); the visitor takes one seat.
7. Documentary grade with a single red → paper, black, ink; vermilion (朱) only where something is signed.

Filmography. Last three: Bresson (print/ink, Chiron Sung), von Trier (SVG plan, Chiron Hei + Archivo, magenta mark, checkbox route), Antonioni (archival photos, Anton). This differs on director, medium (typeset forms, thermal receipt, black title cards — no outline plan, no photographs), form (chapters with title cards), skeleton (cold open · early turn · mid-action · card of words), type (compressed Noto Serif TC 900 supers + Martian Mono), lead (an invoice number), interaction (a seal), ending, and instruments. Versus 經緯 (the other copy-heavy B2B): no plan drawing, no magenta, no outlines; black/paper with hard cuts.

3. Medium

Designed: set type, printed forms and flat black cards; no canvas, no images. This film's mechanism — captioned procedure cut hard — becomes heavy Mincho supers over typeset accounting documents because the drama of Shin Godzilla is in the labels and paperwork, and an accountant's paperwork is literally the product. Supporting medium: the thermal-paper e-invoice proof (電子發票證明聯) with a procedural SVG barcode and QR stand-ins. Why not 3D: nothing here is solid or glossy; it is paper and numbers.

4. Lead, cast, location — and the asset call

Lead: invoice QY-40718263 (NT$52,500, 禾豐精密, fictional). The verb is tie out. States: printing (loader) → issued (hero receipt) → lost (one of 1,284 in the wall, unmatched) → tied (match line to deposit 52,470, difference 30) → posted (voucher 借/貸) → reviewed and signed (three seals) → closed (已結帳 stamp, the room goes dark) → filed (one line of the 401 total, final card). It also lives in the chrome: the bottom-left status shows its current state everywhere. Supporting cast: the bank list, the voucher, the CPA's note, the owner's phone report, three seals. Location: a company's accounting room, early March, under flat office light: paper ground, black title cards as the "leader" between chapters. Asset call: answered in the brief — no paid generation. Everything is SVG/CSS/type. No library images were needed (no find-footage run). Fonts: Google Fonts (OFL).

5. CRO notes (cro-master)

Focus contract. Surface: SaaS homepage / demo page. Stage: solution-aware (knows accounting software exists; comparing approaches) with problem-aware owners. Dominant promise: 月結提早到第 3 天，每一筆都對得上. Brand cue: 勾稽 + the invoice number. Mechanism: invoice–deposit–voucher matched in one ledger. Minimum proof: the close shown step by step + fictional cases with before/after + security articles + visible prices. Primary action: 預約 30 分鐘示範. Secondary (different readiness): 免費試用 14 天, no card.

Decisions

• One primary action, repeated at logical points (hero, nav, after close, pricing Growth/Group, final form); the trial is always visibly subordinate (text link or outline), never a twin button.
• Pricing visible: "NT$1,500 起（年繳）" in the hero micro-line and a 方案與價格 nav link; three tiers named by fit (入門 / 成長 / 集團), a monthly/annual toggle, one recommendation with a reason ("多數公司選這個"), overage terms (no cut-off, NT$150 per 100), CPA seats free, prices ex-tax, labelled illustrative.
• Value anchor near price: labour-cost framing (30 h × NT$350 ≈ NT$10,500 vs NT$3,500), not a discount.
• Buying committee: features by role; the visitor's seat reorders the role chapter, adds a role note at pricing and preselects the form.
• Objection → proof

  Objection	Answer on page
  My CPA won't use it	CPA seats free, invite flow, FAQ 1, CPA case (fictional)
  Do I have to replace my software?	FAQ 2 (use only invoicing + matching, export vouchers)
  Migration will stop work	第六章 three weeks, trial close against old reports; FAQ 7
  Is my data safe / compliant?	第五章 seven articles incl. 商業會計法 retention, 個資法, lock + two-person edits
  Will the trial charge me?	"不需信用卡" under CTA + FAQ 5
  Over the invoice limit?	Pricing note + FAQ 6
  What happens in the demo?	FAQ 10 + post-submit expectation under the form

• Friction: form has five fields (name, company, email, role, invoice volume — both used for routing); states what happens after submit; no phone required. LINE not offered as primary (B2B; email OK per Taiwan rules) — noted as a test candidate.
• No fake urgency, no superlatives, no 一站式/賦能 phrasing.

Trade-offs, cinema vs CRO, resolved for the product

• First frame without a headline (award reel) vs outcome + CTA in the first viewport: the receipt prints for ~1 s as shot one, then the headline and CTA cut on; they are in the DOM from the start.
• Chapter cards cost scroll: cards are 120 vh (20 vh hold), the index jumps past them, the CTA is fixed.
• Set piece pinned 7 steps: it is the proof of the promise (the close develops), so it earns the pin; everything read (prices, FAQ, articles) flows.
• One accent for signatures also colours the CTA: booking is a decision the buyer signs, so the meaning holds.

6. Storyboard

Form: chapters — ten chapter cards (black leader) over flowing documents, one pinned set piece (the close), one interactive document (the seat). Hold budget target < 25 % of scroll.

Skeleton: energy cold open (the receipt prints, the promise lands at once) → calm problem → turn early (~25 %, the 已結帳 stamp) → level documents with small rises (seat, prices) → card of words. Opens mid-action (a receipt printing). Ends on a card of words ("下個月，第 3 天收工。") with the form.

The award pass

WORLD OBJECT   the accounting document set: thermal e-invoice proof, bank list, voucher (傳票) with the
               double-ruled total, close sheet with three seal boxes. Reaches: loader (receipt prints),
               chapter cards (black leader with supers), CTA (a vermilion seal block), progress (a ledger
               column filling, closed by a double rule), status (the invoice's state), focus ring, footer
               (a voucher's total line).
LEAD STATES    printing → issued → lost in 1,284 → tied (Δ30) → posted → signed ×3 → closed (room goes
               dark) → filed (one line of the 401 total)
LOADER         shot one: the e-invoice proof prints line by line in steps (thermal head) and stays as the
               hero's right-hand column; the headline cuts on as the print finishes
CUT MATERIAL   black leader: each chapter card pushes up as a black sheet and its words cut on hard;
               inside the close every step cuts hard. Exception: at 已結帳 the room around the ledger
               goes dark (the only change of ground inside a shot), matching into the black chapter card
ACCENT         vermilion 朱 #C8321B — "signed here, a decision" — seals, the 已結帳 stamp, the demo CTA; ≤ 3 %
TYPE           Noto Serif TC 900 (supers, cards, headings; compressed 0.86 on cards) · Noto Serif TC 400 body ·
               Martian Mono figures. Switch device: the inverse slug — one term set white-on-black inside a
               line, like a caption plate. Display extreme: chapter words ≥ 15 vw; body 18 px
INSTRUMENTS    (1) top-left wordmark + current chapter super "第二章　三天結帳" (opens 目次);
               (2) right-edge ledger column: progress line with 一…九 chapter ticks, a double rule at the end;
               (3) bottom-left invoice status "QY-40718263｜已勾稽" + its time; (4) top-right seal CTA
VERB           tie out / sign: the visitor presses and holds a chop onto their own box on the close sheet
               (會計／會計師／負責人) — R2: a hold, not a tap; the seat persists (role chapter order, pricing
               note, form preselect, status line)
TRIGGERS (R2)  8 kinds over 13 performances, 3 scrubbed (23 %): autoplay (receipt prints) · scroll scrub (card
               words, the close's inserts, read-fill on one statement) · scroll-entry-then-play (odometer, stamp,
               the slip typing each new state, the highlighter) · hover/focus/tap (voucher figures trace to their
               paper) · input (invoices a month → plan, fee, items for a person) · click (monthly / annual flips
               the price board) · hold (the seat's chop) · idle (the system types the one open item)
TYPE CAST (R2) signature odometer + stamp (proof, verdict; both entry-played) + department: split-flap (a
               figure the visitor's choice changes: click, input) · select-box (a figure shows its paper:
               hover/focus/tap) · typewriter (the system's voice in the status slip: state change, idle) ·
               highlighter (the clause security rests on: entry) · read-fill (the one statement: scroll)
RHYTHM         set pieces: receipt (loader), the close (7 steps, pinned), the estimate (R2, input, on the
               dark room's ground), the seat (interactive). Calm documents: problem, integrations, security
               articles, migration, prices, cases, FAQ.
               Phone: cards re-set vertical (vertical-rl) on the right edge; close steps over-under

Visual grammar

Grid: 12 columns, a left caption column (sticky chapter supers) and a 30 em reading column; documents sit on the right like papers on a desk. Density: dense document, wide margins, alternating with one-thing frames (cards, the wall, the stamp). Depth: flat. Edges: documents held inside margins like papers; card words bleed. Texture: faint paper grain; thermal paper slightly greyer. Chrome: a persistent slate.

Shot list

# · slug	Beat	Copy	Shot	Camera	Blocking	Light / colour	Build	Asset · closest	Cut out	Len	E	Money frame	Mobile
0 · INT. PRINTER — 18:42	Cold open / title	Receipt lines; H1 每一張，都對得上。; lede; CTAs	MS frontal	Lock-off	Receipt prints down from a slot (right); super top-left; H1 cuts on bottom-left (L-layout)	Flat paper, black type, one vermilion CTA	DOM receipt, SVG barcode/QR	Procedural · any	Push to black leader	100 (flow)	7	Print finished	Receipt top, H1 below
1 · CARD 一 月底	Act card	第一章 月底 + super	Card of words	Lock-off	Word snaps on bottom-left, super vertical right	Black	Type	—	Push	120	3	Word on	Vertical word right
2 · INT. 會計室 — 3/2 09:00	Ordinary world	Ch.1 copy	Document	Static	Reading column + the wall of 1,284 numbers, the lead inverse, 41 marked	Paper	JS-generated wall	Procedural	Double rule → push	flow	2	The wall	Wall narrower
3 · CARD 二 三天結帳	Act card		Card			Black			Push	120	4
4 · INT. 會計室 — 3/2–3/4	Inciting → turn	7 steps	Caption plate left, document insert right, step rail bottom	Lock-off; inserts cut hard	Bank rows print; match lines draw + odometer; Δ30 resolves; voucher lines post, double rule; CPA note; phone report + three seals; stamp 已結帳, room goes dark	Paper → black at the end	Typeset forms, SVG lines, type-fx odometer + stamp	Type · ECU safe	Ground match into black card	760	4→9	Stamp landed (still 0.97)	Over-under, 70 % length
4b · INT. 會計室 — after 17:30 (R2)	Price of the proof	試算 copy, input, 3 output rows, CTA	One sheet under the light	Static	Black ground continues from the dark room; a paper 試算表 with one input and three rows	Black + paper sheet, one vermilion button	DOM + type-fx split-flap	—	Push (black into black card)	flow	5	Figures landed on the board	Sheet full width, label column narrows
5 · CARD 三 三個位子	Act card					Black			Push	120	3
6 · INT. 結帳單	Visitor's part	Ch.3 copy + sheet	Document	Static	Sheet with three boxes; visitor seals one; role panels reorder	Paper, vermilion seal	DOM + GSAP time tween	—	Push	flow	5	Sealed sheet	Boxes stacked
7 · CARD 四 串接 / 8 · flow	Infrastructure	Ch.4	Low frontal diagram	Static	Six pipes into one ledger	Paper	SVG	—	Push	120 / flow	2	Diagram	Diagram vertical
9 · CARD 五 安全 / 10 · flow	Law	Ch.5 articles 第1–7條	Document	Static	Articles set like a statute	Paper	Type	—	Push	120 / flow	2
11 · CARD 六 搬家 / 12 · flow	Plan	Ch.6	Gantt	Static	Three weeks as bars in a ledger	Paper	CSS	—	Push	120 / flow	3		Bars stacked
13 · CARD 七 價格 / 14 · flow	Resolution / deal	Ch.7	Eye level, high key	Lock-off	Toggle, three plan columns, table	Brightest paper	DOM	—	Push	120 / flow	4	Plans	Plans stacked, table scrolls in its own box
15 · CARD 八 客戶 / 16 · flow	Witnesses	Ch.8	Case files	Static	Three files with before → after figures	Paper	Type	—	Push	120 / flow	3
17 · CARD 九 問答 / 18 · flow	Interrogation	FAQ ×10	Document	Static	問／答 details	Paper	details	—	Push	120 / flow	2
19 · 終	Final image	下個月，第 3 天收工。 + form + credits	Card of words	Lock-off	Huge words on black; the lead as the 401 total line; form on paper	Black, one vermilion button	DOM form	—	—	flow	6	Final words	Words vertical-safe

Reasons: every card repeats one frame on purpose (the black leader is the editorial voice; only the word changes); the close is the only scene with inserts and the only pin with development; reading chapters never move. Energy 7 3 2 4 9 3 5 2 2 3 4 3 2 6 — cold open, a dip, the turn early, then level with small rises. The lead changes in the chrome and in four documents; it ends as one line of a total.

The audience's part

Action       press and hold 「按住蓋章」 in one of three boxes on the 115 年 2 月 close sheet (R2; was a tap)
Response     the impression inks in under the pressure for 0.6 s with a vermilion bar along the box; at full
             pressure the chop lands; release early and it lifts, and the sheet says to hold about half a second
Consequence  the role chapter puts your role first and marks it; pricing shows a role note; the demo
             form preselects your role; the bottom-left status adds "您：會計師"; remembered per visitor
Equivalent   real <button>s: hold Space or Enter; long-press on touch; a screen reader's activation (a click with
             no key or pointer behind it) and reduced motion seal at once; never required

Type-fx cast: odometer (proof: 已勾稽 1,243 張, once, step 2) and stamp (the verdict 已結帳, once, the turn). The visitor's seal is a separate object (a square 印 impression), not a type move. R2 adds five department moves and moves both signatures to entry-play: see "Revision 2" below.

Short laptop (1366×640): the close's caption plate scales by svh; the document insert max-height 62svh. Ultrawide: card words grow with vw; reading column capped, the caption column widens.

7–8. Animatic and principal photography — what changed from the board

• Started from kit/site-dom.html wiring (no canvas). Files: index.html, assets/site.css, assets/site.js, assets/kit/{reel.js, reel.css, type-fx.js} (kit copied unedited). GSAP 3.15.0 and Lenis 1.3.26 pinned from jsDelivr.
• Reshoot 1 (sameness): nine identical full black cards read as a slideshow on the first sheet. Major acts (一 月底, 二 三天結帳, 三 三個位子, 七 價格, 九 問答) keep the full 120 vh leader; minor chapters (四 串接, 五 安全, 六 搬家, 八 客戶) become a strip of leader (a ~58 svh black band, flow, no pin). Same grammar, two weights.
• Reshoot 2: the close's step rail collided with the status instrument and its counter boxes did not render → explicit numbered boxes, rail lifted above the status; the voucher's 合計 line cut on hard instead of fading.
• Reshoot 3 (mobile): the hero frame clipped its micro-copy → the hero frame is unpinned and auto-height on phones, the receipt is smaller, and the status instrument hides during the hero; band cards re-set vertical.
• Props inside the documents (illustrative records, not claims): bank rows (台和機電, 森野工業, 恆昌五金, 金流撥款), invoice numbers QY-40718180…288, voucher No. 115-02-0418, 黃會計師事務所（虛構）, 王小姐（虛構）, the owner's phone P&L (4,812,300 / 1,203,075 / 361,240 / 2,064,500), the ledger balances, the 1,284-number wall (seeded).
• Copy that appears only after interaction (talking-master check passed): the seat confirmation 「已記下：您坐在「…」的位子。下面的內容，先從…的需要開始。」, three role notes at pricing, the form's validation and confirmation messages (nothing is sent anywhere).

9. Screening record

• Server: own npx serve -l 5753 demo-ledger (byte ranges), stopped at the end.
• Sheets: screening/contact-{desktop,laptop,mobile}.jpg (with --cuts and --act shots.mjs), contact-{desktop,mobile}-reduced.jpg, contact-{ultrawide,tablet,landscape}.jpg.
• Console: 0 errors, 0 page errors, 0 failed requests on every viewport. Only flag: dead-hold act_cta-hover → act_cta-focus — two act shots of the same button (hover vs focus ring); expected, not a scroll hold.
• copy-check: every line of copy.md on the page with JavaScript on and off (the only misses are this file's own section labels).
• Measured (1440×900): page 32 screens; pinned holds 23.6 % of scroll (phone 21.6 %); plans at screen 24 (the price is also in the hero micro-line and the nav); body 18 px / 1.9, reading column 34 em (≈ 612 px).
• Visible copy: 3,012 Han characters, ≈ 3,980 characters of visible copy excluding props.
• Test screening (fresh agent, sheets only): read it as a Taiwanese accounting / month-end tool for finance teams, main action book a demo or trial, lead = the receipt that ends stamped 已結帳, climax = the close at 17:30. Matches the logline. Its sameness note drove reshoot 1; its "pink band" note is the screening's simulated phone bar.
• Jury questions: (1) the same invoice is in the receipt, the wall, four close documents and the status instrument in every frame; vermilion is findable in one glance (CTA, seal, stamp). (2) Chrome with the hero cropped: seal CTA, ledger-column progress with a double-ruled end, invoice status slip, 目次 — all of the world. (3) No fade cuts: pushes of black leader, hard cut-ons, one change of ground (the room goes dark at 已結帳).

CRO self-audit (cro-master, heuristic — no traffic data)

• Primary bottleneck checked: does a solution-aware visitor see outcome, price and the action in the first viewport? Yes (H1 + mechanism + 預約 30 分鐘示範 + NT$1,500 起 + 不需信用卡). Verdict: keep.
• Fatal blockers: none found (form works, nothing sent, labels visible, focus rings visible, 44 px targets).
• Secondary constraint 1: pricing sits at screen ~24 of 32 because the proof comes first. Mitigated by the hero price line and the persistent 方案與價格 link. Test candidate: move a three-line price summary right after the close.
• Secondary constraint 2: the trial has no separate signup path in this demo (it reuses the form with a trial heading). Real product: a direct signup.
• Not tested: LINE OA as a secondary channel for owners (Taiwan norm); lead-quality impact of the role field.
• Subtraction applied: no logo wall (no real customers), no fake urgency, one recommended plan, cases set as three rows rather than a carousel.

Revision 2 — triggers and the type department (2026-10-18)

Same director, same film, same logline, lead, world object, copy and CRO decisions. The skill now asks for at least four trigger kinds (scroll scrub no more than about a third of the performances) and a type department of three to five moves beside the signature. Revision 1 failed both: every performance except the receipt and the seat was scrubbed, and the only type moves were the signature pair. This revision fixes that inside the film's own procedure: each new trigger is a step of month-end, and each new type move is a piece of accounting paper doing its job.

What changed

1. Kit refreshed to the skill's current reel.js, reel.css, type-fx.js (reel.js was already identical; reel.css gains html overflow clip and data-cut click-through; type-fx gains colour rebuilds and blur-resolve font inheritance). No data-cut scenes here, so the click-through fix changes nothing visible; the colour rebuild is used by the status slip when the ground turns dark. Screened: no regressions.
2. The signature moves to entry-play. The odometer (已勾稽 1,243 張) and the stamp (已結帳) no longer scrub with the scroll: when step 2 / step 7 of the close arrives they play once at their own tempo (1.2 s / 0.5 s), reset only if the reader scrolls back before the step. Under a frozen screening clock they show their landed pose. The room still goes dark on the scrub.
3. New scene 4b · 試算 (the estimate), right after the close. The CRO self-audit's test candidate, built: price now appears at screen 13.5 of 33.4 (was 24 of 32; the full plans are at 24.9). The dark room after 17:30 continues as its ground (so the close still matches into a black card), with one paper 試算表 under the light: one input (每月發票張數, default 1,000 = the page's own anchor example) → 方案, 月費, 要人工確認. The fee includes overage (NT$150 per 100 over quota) and switches to 集團 when that is cheaper (above ~6,000 a month). "Items for a person" uses the close's own ratio (41 of 1,284) and says so. 入門 shows one honest line that it lacks CPA collaboration and sign-off. The billing toggle on the prices also changes this sheet. Primary action under it: 預約 30 分鐘示範; secondary: 看完整方案與價格. No email, nothing gated. Close-day is not an output: it is the page's single promise (第 3 天), and varying it by volume would be an invented claim.
4. The seat is pressed and held. A chop is pressed, not tapped: 0.6 s hold, the impression inks in under the pressure, a vermilion bar runs along the box; early release lifts it and the sheet says how long to hold. Space/Enter held does the same; a screen reader's activation and reduced motion seal at once. Everything downstream (role order, pricing note, form preselect, status) is unchanged.
5. Voucher figures trace to their paper (step 4): each amount is a real button; hover, focus or tap draws a selection frame with a filing slip naming its source document (銀行明細 02/27 · 差異處理 14:31 · QY-40718263); the source is also in the button's accessible name. Invitation: a dotted rule under each amount and one line 點金額，看它的原始憑證。 This is the controlling idea made touchable.
6. The status slip speaks in the system's voice. Each change of the invoice's state is typed (old state deleted, new one typed); after 15 s without input, if no seat has been taken, the system types the one open item: 「系統：結帳單上，還差您的章。」 once per visit, withdrawn on the next input after 4 s or when a seat is taken.
7. Prices flip on a board. The big figure of each plan is a split-flap of ink tiles with paper figures (the inverse slug as a board); thousands groups flip separately so the comma stays still, unchanged groups do not flip. Both the annual and monthly lines stay in the DOM as text, as before.
8. Two reading moves. read-fill on the chapter-1 statement 「結果，老闆要等到下個月中，才知道上個月到底賺了多少。」 (scrubbed by its place on screen, readable from the first frame); highlighter on the clause security rests on, 第 4 條 「修改需要兩個人同意」 (drawn once in vermilion at 26 %, because a two-person edit is a signature rule).
9. Bug found in screening and fixed: the close's step rail never showed its state (its tl.set attribute had no initial value, so every step read as "on", and the "on" box was painted paper on paper). Steps now start as todo; the current step is an ink box, done steps a ✓ box.
10. Copy (talking-master, scripts/check.py passed): 試算 block, 點金額，看它的原始憑證。, 按住蓋章. Copy that appears only after interaction: the hold hint 「按住約半秒，章才會蓋下去。」, the 入門 / 集團 notes, the trace slips, the idle notice, the estimate's live summary for screen readers. copy.md updated.

Trigger table

Beat	Performance	Trigger	Keyboard / touch path	Reduced motion
0 · printer	Receipt prints line by line, headline cuts on	Autoplay (intro, once)	— (nothing to operate)	Printed receipt, headline on
Cards 一 二 三 七 九	Black leader; word, super and count cut on	Scroll scrub	Scroll / keys / swipe	Card at rest, all words on
2 · 月底	read-fill on the statement	Scroll scrub (its place on screen)	Scroll	Fully lit
4 · the close	Seven inserts cut hard; rows print, lines draw, Δ30, voucher posts, room goes dark	Scroll scrub (pinned)	Scroll; 目次 jumps past	Steps stacked as a document, each finished
4 · step 2	odometer 已勾稽 1,243 張	Scroll-entry, then play (1.2 s)	Arrives with the step	1,243 at rest
4 · step 4	Voucher figure → selection frame + source slip	Hover / focus / tap	Tab to each amount; tap on touch; source in the accessible name	Frame appears at once
4 · step 7	stamp 已結帳	Scroll-entry, then play (0.5 s)	Arrives with the step	Stamped
4b · 試算	Plan and fee flip; items count updates; note for 入門 / 集團	Input (debounced 0.3 s; Enter now)	Type in the field; numeric keypad on phones; live region reads the result	Figures change at once
6 · the seat	Chop inks in under pressure, lands, chapter reorders	Hold (0.6 s)	Hold Space / Enter; long-press; AT click seals at once	A tap seals at once
10 · 安全	highlighter on 修改需要兩個人同意	Scroll-entry, then play (0.9 s, once)	Arrives with the article	Highlighted
14 · 價格	Price board flips monthly ↔ annual (and the estimate's fee)	Click	Tab + Enter / Space on the toggle; tap	Figures change at once
Chrome · slip	The invoice's new state typed	Scroll-entry (state change), then play	Follows the reading position	State shown at once
Chrome · slip	系統：結帳單上，還差您的章。	Idle (15 s, once, only before a seat is taken)	— (a notice, not a control)	Shown without typing

Thirteen performances, eight trigger kinds; scroll scrub drives three (23 %).

Type cast

Effect	Job	Trigger	Where
odometer (signature)	Proof: a real count rolls and stops on its exact value	Scroll-entry, then play	Close step 2, 已勾稽 1,243 張
stamp (signature)	The verdict: the books are closed	Scroll-entry, then play	Close step 7, 已結帳
split-flap	A figure the visitor's choice changes	Click (billing toggle), input (estimate)	Plan prices; the estimate's 方案 and 月費
select-box	A figure shows its paper	Hover / focus / tap	Voucher amounts 52,470 · 30 · 52,500
typewriter	The system's voice	Scroll-entry (state change); idle	Bottom-left status slip
highlighter	The clause the security chapter rests on	Scroll-entry, then play	第 4 條 修改需要兩個人同意
read-fill	The one statement the scroll reads aloud	Scroll scrub	Chapter 1, 結果，老闆要等到下個月中…

Reading copy never animates per character: the only moves on running text are read-fill (one statement) and the highlighter (one clause); the split-flap sets figures and two-character plan names; the typewriter sets the slip's short state words and one notice. Set and screened at real size in Noto Serif TC 900 / 600 and Martian Mono 600 (no clipped glyphs; one deliberate exception noted under friction: select-box's slip label needed a CSS override to stay in the page's faces).

Screening record, Revision 2

• Server: own npx serve -l 5764 demo-ledger, stopped at the end. Revision 1 dailies kept in screening-r1/.
• screening/: desktop, laptop, mobile with --cuts (76 / 76 / 78 frames) and --reduced (desktop, laptop, mobile). screening-act/: shots.mjs on desktop, laptop, mobile (54 / 54 / 52 frames) — every non-scroll trigger and every type-fx move mid-flight and at rest, plus hover/focus CTA, 目次, the form.
• Flags: none on any run (0 console errors, 0 page errors, 0 failed requests, no dead holds, no overflow, no cut text).
• copy-check: every piece of copy.md on the page with JavaScript on and off (the three misses are this file's own section headings).
• Measured (1440×900): 33.4 screens; pinned holds 23.5 % of scroll (phone 21.4 %); price summary at screen 13.5, plans at 24.9 (phone 13.8 / 26.3).
• Known, not fixed (pre-existing): in the reduced-motion cut the fixed status slip can sit over the close's stacked step text at the bottom of a frame; the slip also covers the bottom-left of reading copy on phones as it did in Revision 1.

Final copy

Canonical file: copy.md (verified on the page by copy-check.mjs).

導覽

勾稽 Tieout 目次 方案與價格 預約示範

開場（電子發票證明聯）

電子發票證明聯 115年01-02月 QY-40718263 2026-02-27 18:42:07 隨機碼 8421 總計 52,500 賣方 禾豐精密（虛構）

主視覺

2月27日（五）18:42　台中　出貨開票 給台灣中小企業的會計、電子發票與月結系統

每一張，都對得上。

發票開出去、款項進帳戶、傳票入帳、會計師覆核，全在同一本帳上自動勾稽。月結從第十幾個工作天，提早到第 3 天。 預約 30 分鐘示範 免費試用 14 天 試用不需信用卡 方案每月 NT$1,500 起（年繳） 看方案與價格 頁面上的數字皆為示意，勾稽 Tieout 為虛構產品。

第一章　月底

3月2日（一）09:00　會計室

月底的帳，卡在三個地方。

大部分中小企業的帳不是做不出來，是對不上。 發票在加值中心，款項在網銀，傳票在會計軟體。每到月初，會計得把三邊的資料匯出來、貼進 Excel，一筆一筆比。 發票對不到款項。客戶合併付款、扣掉匯費，或電商金流隔週才撥款，金額就對不上了。 傳票靠人工登打。同一筆交易，開發票時打一次，入帳時再打一次。打錯一個數字，要花一個下午找。 會計師在等資料。事務所要的明細靠 Email 和 LINE 來回傳，版本一多，誰也說不準哪一份才是最新的。 2 月：銷項發票 1,284 張｜銀行入帳 917 筆｜對不上的 41 筆（示意） 結果，老闆要等到下個月中，才知道上個月到底賺了多少。

第二章　三天結帳

月結流程

二月的帳，三月 4 日收工。

下面是一家用 Tieout 的公司，三月初結二月帳的過程。我們跟著其中一張發票 QY-40718263，從入帳走到結帳。 第 1 天 09:00　銀行明細匯入 每天早上，系統自動抓取銀行明細和金流撥款報表。二月的 917 筆入帳，上班前已經在帳上。 第 1 天 09:05　自動勾稽 發票、訂單和入帳依金額、日期和客戶自動配對。客戶合併付款會拆開對，匯費和手續費另外列出。 已勾稽 1,243 張 剩 41 張待確認 第 1 天 14:30　差異處理 剩下的 41 筆，系統列出可能的原因和建議分錄，會計逐筆確認。QY-40718263 的客戶少匯了 30 元，是銀行匯費，按一下就認列。 第 2 天 10:00　傳票產生 確認過的交易直接產生傳票，原始發票和銀行明細都附在上面，會計不用再打一次。 借　銀行存款　52,470 借　手續費　30 貸　應收帳款　52,500 點金額，看它的原始憑證。 第 2 天 16:00　會計師覆核 事務所登入同一本帳，每張傳票都點得開原始憑證。有疑問就在那張傳票上留言，不用另外寄信。 黃會計師：二月應收帳齡看過了，沒問題。 第 3 天 15:30　負責人核准 損益表、資產負債表和應收帳齡表都準備好了。老闆在手機上看完，按下核准。 第 3 天 17:30　二月已結帳 結帳後，二月的帳就鎖住。要修改，得由會計提出、會計師同意，每一次修改都留下紀錄。 已結帳 流程中的時間與筆數為示意。

試算（Revision 2）

試算

這樣結帳，一個月多少錢？

輸入每個月開的發票張數，下面直接算出方案和月費。 試算表 價格未稅・示意 每月發票張數 方案 月費 要人工確認 人工確認的筆數，以二月 1,284 張發票有 41 張要確認的比例估算。超過方案張數，每 100 張加收 NT$150。價格未稅，皆為示意。 預約 30 分鐘示範 看完整方案與價格

第三章　三個位子

同一本帳，三個位子。

月結要三個人點頭：做帳的會計、覆核的會計師、簽字的老闆。Tieout 給每個位子不同的畫面和權限。 結帳單　115 年 2 月 製表 覆核 核准 按住蓋章 您坐在哪個位子？在您的欄位蓋章，下面的內容會先從您的需要開始。 負責人：月初就看到上個月 每月第 3 個工作天看到損益，不用等到月中。 手機上就能看現金、應收和應付，哪個客戶該催款一眼就知道。 付款和結帳都在線上核准，簽核紀錄自動保存。 會計：只處理系統標出來的事 發票開立、作廢、折讓都在帳上完成，並自動上傳財政部平台。 入帳自動配對，您只需要處理差異。 傳票自動產生，科目可以照公司的習慣設定。 營業稅 401 申報書自動彙整，申報檔一鍵匯出。 會計師：客戶的帳，不用再等 Excel 直接進客戶的帳覆核，每張傳票都連到原始憑證。 問題留在傳票上，客戶回覆後自動通知。 一個帳號管理所有客戶，事務所席位不收費。

第四章　串接

您現在用的工具，大多接得上。

Tieout 從您已經在用的系統取得資料，開發票和收款的方式都不用改。 電子發票：串接財政部電子發票整合服務平台，也可以沿用原本的加值中心。 銀行：主要銀行的網銀明細每天自動匯入，也可以上傳對帳單檔案。 金流與電商：常見金流和電商平台的訂單與撥款報表。 收銀與 POS：門市每日日結自動入帳。 薪資：薪資系統的匯出檔，自動產生薪資傳票。 Excel 與 API：沒有串接的系統，用範本匯入或透過 API 連接。 整合項目為示意。

第五章　安全

帳交給系統，規矩照舊。

資料存放在台灣境內的機房，傳輸和儲存全程加密，每天備份。 權限可以細到科目和功能。會計師看得到帳，看不到薪資明細。 每一次新增、修改和刪除都有紀錄：誰、什麼時候、改了什麼，都查得到。 結帳後自動鎖帳，修改需要兩個人同意。 會計憑證保存 5 年、帳簿與報表保存 10 年，符合商業會計法的保存年限。 通過 ISO/IEC 27001 資訊安全管理驗證（示意）。 依個人資料保護法蒐集與處理客戶、員工資料。

第六章　搬家

換系統，不用停工。

大部分公司在三週內完成切換，原本的工作照常進行（示意）。 第 1 週　匯入 期初餘額、科目表、客戶與廠商資料，從原本的會計軟體或 Excel 匯入。導入顧問會陪您核對期初數字。 第 2 週　試結帳 用上個月的資料在 Tieout 試結一次，和原本的報表逐項比對。數字一致才往下走。 第 3 週　切換 電子發票改由 Tieout 開立，銀行明細開始每天匯入。 年繳成長方案以上，導入顧問和資料搬移不另收費。

第七章　價格

價格寫在這裡，照公司規模選。

月繳 年繳（省兩個月） 入門 剛開始自己記帳的小公司 NT$1,800／月 NT$1,500／月（年繳，一年 NT$18,000） 1 家公司・每月 300 張發票・1 個銀行帳戶・2 位使用者 電子發票開立與上傳、自動勾稽、401 申報彙整 成長 有專職會計、和事務所合作的公司 多數公司選這個 NT$4,200／月 NT$3,500／月（年繳，一年 NT$42,000） 1 家公司・每月 3,000 張發票・5 個銀行帳戶・10 位使用者 入門全部功能，加上會計師協作、簽核與鎖帳、金流撥款對帳 或先免費試用 集團 多家公司或多個品牌 NT$9,600／月起 NT$8,000／月起（年繳） 最多 10 家公司・發票與使用者不限 成長全部功能，加上合併報表、API 與 SSO 單一登入、專屬客戶經理 以每月 1,000 張發票的公司為例，人工對帳每月約 30 小時。以會計人事成本每小時約 NT$350 計算，大約是 NT$10,500；成長方案年繳每月 NT$3,500。 會計師事務所席位不收費。超過每月張數時照常開立，每 100 張加收 NT$150。價格未稅，皆為示意。

| 項目 | 入門 | 成長 | 集團 | | 公司數 | 1 | 1 | 最多 10 | | 每月發票張數 | 300 | 3,000 | 不限 | | 銀行帳戶 | 1 | 5 | 不限 | | 使用者 | 2 | 10 | 不限 | | 電子發票開立與上傳 | ● | ● | ● | | 自動勾稽 | ● | ● | ● | | 401 申報彙整 | ● | ● | ● | | 會計師協作與留言 | － | ● | ● | | 簽核流程與鎖帳 | － | ● | ● | | 金流撥款對帳 | － | ● | ● | | 合併報表與公司間沖銷 | － | － | ● | | API 與 SSO 單一登入 | － | － | ● | | 導入協助 | 線上文件 | 導入顧問 | 專屬客戶經理 |

第八章　客戶

三家公司的月底

（虛構案例） 台中・精密零件貿易・28 人 以前二月的帳要到三月 12 號才結得完，老闆 15 號才看得到毛利。現在第 4 個工作天就收工，催款名單也跟著提早出來。 財務主管 林小姐（虛構） 月結：第 12 天 → 第 4 天 台北・保養品電商・每月 3,000 張發票 金流撥款扣掉手續費，又好幾天合在一起入帳，以前要一張張拆。現在系統拆好了，我只看它挑出來的那幾筆。 會計 陳先生（虛構） 對帳：每月 32 小時 → 6 小時 高雄・會計師事務所・服務 60 家客戶 客戶的帳直接在眼前，不必再收一堆 Excel。旺季要覆核的量一樣，加班少了很多。 合夥會計師 黃會計師（虛構） 每家客戶的覆核時間約少 40% 以上公司、人名與數字皆為虛構，只用於示範。

第九章　問答

常見問題

我的會計師沒用過 Tieout，可以配合嗎？ 可以。我們會寄邀請給您的會計師，事務所開帳號不收費，登入後就看得到您授權的帳。不想登入的會計師，也能每月收到整理好的報表和傳票明細。 已經在用會計軟體，要整套換掉嗎？ 不一定。有些公司只用 Tieout 開發票和對帳，再把傳票匯出到原本的會計軟體。等團隊熟悉了，再決定要不要整套搬過來。 電子發票要重新申請嗎？ 如果您已經透過加值中心開立，可以沿用原本的字軌，我們會協助轉移。還沒開立過的公司，導入顧問會帶您完成財政部平台的設定。 資料存在哪裡？安全嗎？ 放在台灣的機房裡，資料在傳送和存放時都經過加密，每天備份一次。員工只看得到被授權的範圍，每個操作都留有紀錄。 試用期結束會自動扣款嗎？ 不會。試用不需要信用卡。14 天後您可以選方案，或什麼都不做，帳號會保留 30 天，讓您把資料匯出。 發票張數超過方案上限怎麼辦？ 系統照常開立，不會停用。超出的部分每 100 張加收 NT$150，月底前會先通知您，也可以隨時升級方案。 導入要多久？期間要停工嗎？ 大部分公司三週內完成，不用停工。第一週匯入資料，第二週用上個月的資料試結一次，數字核對無誤才正式切換。 可以只用電子發票功能嗎？ 可以。入門方案就包含發票開立、作廢、折讓與上傳。之後想加上對帳和月結，在同一個帳號開通就好。 要綁約嗎？可以隨時取消嗎？ 月繳隨時可以取消，下個月起就不再收費。年繳以一年為一期，到期前我們會提醒您是否續約。 示範會談什麼？要準備什麼？ 30 分鐘線上會議。先聊您現在的月結怎麼做，再用一份範例帳實際跑一次對帳和結帳。方便的話，帶一份上個月去識別化的銀行明細，我們直接用它示範配對。

終

下個月，第 3 天收工。

預約 30 分鐘線上示範。我們用一份範例帳，帶您跑一次完整的月結，也一起看看您現在的流程卡在哪裡。 姓名 公司名稱 公司 Email 您的角色 每月發票張數 送出後，我們會在一個工作天內，用 Email 寄上可預約的時段。 想先自己試？免費試用 14 天，不需信用卡。

片尾

勾稽 Tieout 是虛構產品，本頁是 Cinematic UI 的示範網站。頁面上的價格、數字、客戶案例、認證與整合項目都是示意，與任何真實公司無關。 字體：Noto Serif TC、Martian Mono（SIL Open Font License）。頁面沒有使用圖庫或 AI 生成圖片，所有圖形以 SVG 與 CSS 繪製。