Sign in

Motions / @iamsuosi/evidence-board

A frame of a film in Evidence Board

Plays live in your browser, drawn by web code rather than a video, so it can use your computer's processor and graphics while it runs. The sound is on.

Evidence Board

Visual journalism on a dark felt board.

Also 证据墙

Make a film in this look

Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/evidence-board/

Put in your topic and paste it into any agent that can open a URL.

Or install the skill for every agent, then use /motionhub
npx skills add motionhub-dev/motions -g
Works in
RemotionHyperFramesand any engine, from MOTION.md
Version
1.0.4
Format
motion/0.3
Licence
CC-BY-4.0 for the look · MIT for the code
Looks
collageprintdark
Package
203 KB, sha256:73dd9cd125f8

Use it

  1. Copy the prompt, put in your topic and paste it into your agent
    Read https://motionhub.dev/llms.txt, then make a film about "<your topic>" in the motion https://motionhub.dev/m/@iamsuosi/evidence-board/

    Any agent that can open a URL: it reads llms.txt, fetches the motion, checks it against its SHA-256 and makes your film in whatever engine it uses.

  2. Or install the motionhub skill once, for every agent on your computer
    npx skills add motionhub-dev/motions -g

    Claude Code, Codex and the other agents skills knows; without -g, for this project only.

  3. Then call it by name
    /motionhub make a film about <your topic> in @iamsuosi/evidence-board
  4. Made a look of your own? Share it the same way
    /motionhub share this project's look as a motion

    Your agent writes the motion under your GitHub name, runs the checks and opens the pull request when you say yes.

MOTION.md

Raw · GitHub

Visual journalism on a dark felt board: the sources themselves, pinned as cards with their source tags; the camera pushes into the original line, a highlighter marks it, and red thread ties the cards into a case.

Essence, and what it is not

  • The evidence is the picture: documents, transcripts and photographs in their own words, never paraphrased.
  • Every card says where it came from: a dark tag under its edge, holder and date.
  • The camera reads: it glides card to card and pushes in until the quoted line fills the frame; a highlighter sweeps it as it is said.
  • Red thread is the argument: a link is a thread run pin to pin as it is spoken. What is pinned stays, so the end is the whole case.

Not a detective cork board (no fingerprints, tape, mugshots, stamps or handwriting), not Red Pencil (one sheet marked by a judge), not a slide of quotes, not Screen Desk (one app on a pale desk), not Stage Light (a lit stage of figures).

Ground and material

board.tsx: warm charcoal felt (bg) with a weave and old pin holes, one soft light from above, a vignette; a camera (data-camera) over board pixels. card.tsx: paper (panel), a photo's whiter mount or an aged slip (panel2), a shadow that tightens as it lands, one steel pin (threads end on small tacks), a tag. A claim with no source is a torn slip. Photographs are real, licensed prints.

Colour roles

  • bg: the felt, and the ink on every paper. panel, panel2: paper. text, muted: words written on the board itself.
  • data: the highlighter, the one mark on a source (a swept line, crop corners, the deciding figure). One sweep at a time; a swept passage stays marked, as the record of what was quoted.
  • op: the red thread and nothing else: no red text or marks.
  • Photographs keep their own colour, a little calmed. good, bad, warn are not used: no other colour.

Type and captions

Newsreader (display) for documents, figures and the case title: body 28 to 34 board px, read pushed in at zoom 1.3 to 1.5 with the card whole in frame; figures 70 to 130; title 90 to 110. Hanken Grotesk (sans) for tags and labels, small bold capitals 17 to 24. JetBrains Mono (mono) for dates and timestamps. Chinese: Noto Serif SC for documents, Noto Sans SC for tags. The caption is a paper slip: dark Hanken 36 px on panel, square, the cards' shadow.

Motion

Physical, with depth. A card flies in from in front of the board, turned, lands, flutters flat as its shadow tightens; the pin goes in, the tag slides out. Glides and pushes take 1.4 to 1.8 s (cubic-bezier(0.45, 0, 0.15, 1)), the board blurring at the fastest point (travel). Reading a card, the others go soft and dark (focus): a rack focus. Openings and closings may lean the board under a raking light (tilt, turn), level before a line is read. The highlighter's nib sweeps word by word, on the words; a thread runs out slack and twangs taut. Nothing flashes, shakes or stamps; text being read never moves.

Composition and framing

Design the board whole first: sources left to right in the order they happened, the claim or title top left, a figure card by its source, the date rail along the foot. Every shot is a crop of it: pushed in to read, medium so a thread has both ends, whole at the end. Keep cards above the caption (frame centre at y 430).

Sound

Optional: a pin pressed in, paper set down, a highlighter's squeak, room tone.

Components

  • data — Figures from the source (react/parts/chart.tsx): A source's figures as bars on a zero baseline, each drawn as it is said, the deciding one highlighted. Fits: rated against supplied; a claim against the count; a short series from a table
  • data — Photograph (react/parts/photo.tsx): A real photograph as a print with its holder's caption; crop corners close in on the detail named. Fits: the damage, the place, the sign: licensed and credited
  • ground — Board and camera (react/parts/board.tsx): A dark felt board under one soft light, old pin holes in its weave, and the camera that glides across it and pushes into a card. Fits: every scene: everything inside in board pixels; tween camX, camY, zoom
  • link — Red thread (react/parts/thread.tsx): A red thread run between two cards as the link is said, tacked at each end, slack, then taut. Fits: the photo that shows what the call reported; the finding that explains the photo
  • open — Claim slip (react/parts/claim.tsx): The claim as people repeat it, on a torn slip with no source tag. Fits: the opening of a fact-check: a misquote, a shared figure, a wrong date
  • quote — Document (react/parts/document.tsx): The source in its own words, timestamped rows for a transcript; the line that matters is highlighted as it is said. Fits: a transcript line, a report's sentence, a clause of a law; quoted exactly, cut with …
  • steps — Date rail (react/parts/timeline.tsx): A steel wire along the foot of the board with a dated clip under each source. Fits: the days of an event; the order the sources came in
  • term — Pinned card (react/parts/card.tsx): A card set down on the board, pressed in by one pin, its source tag slid out from under its edge. Fits: every source: a page, a transcript, a photograph, a figure
  • title — Case title (react/parts/title.tsx): The case written on the felt: a mono line of dates over a large serif question. Fits: the opening question of an investigation or a fact-check

Native moves

  • Push into the line. From the wide board into one card, the rest racked soft; the highlighter sweeps the sentence as it is quoted. Fits content like: what a recording says; the clause a story rests on; the sentence naming the cause.
  • Pin and tag the source. A card set down, pinned, its tag sliding out as the narration names it. Fits content like: an archive photograph; a court filing; a letter.
  • Run the thread. Card to card, twanged taut as the link is said. Fits content like: the photo that shows what the call reported; the memo behind a decision.
  • Bars from the page. A source's figures as bars from zero, each grown as said. Fits content like: rated against supplied; budget against spending; reported against counted.
  • Crop to the detail. Corners close from a photograph's edges onto what is named. Fits content like: a missing panel; a date on a sign; one face in a crowd.
  • Claim against record. A torn slip with the claim, the source threaded to it and highlighted; disproved, the slip swings crooked on its pin (hang). Fits content like: a misquote; a shared figure; a date everyone gets wrong.
  • The whole case. Pull back over the date rail; a glint runs along each thread in turn (pulse). Fits content like: an investigation's end; an event's timeline; how we know.

Avoid: pitfalls

  • A source paraphrased on a card stops being evidence. Fix: quote it exactly, cut with … .
  • A tag that describes. Fix: holder, identifier, date.
  • A line read wide, or swept after the camera left it. Fix: push in (1.3 to 1.5) first; stay until the sweep ends.
  • A thread across text or a photograph's face. Fix: pin in the margin (pinX) on the side the thread runs to.
  • Red for emphasis. Fix: emphasis is the highlighter.
  • A read card cut by the frame. Fix: short cards (split a long source), framed whole.
  • An end shot too small. Fix: fit the board at zoom 0.5; there only the title and the rail are read, so set them large.
  • A generated or unlicensed picture as evidence. Fix: a licensed photograph, or none.

Freedom in each work

Each film decides its sources, layout, moves, opening and ending. Three structures: a fact-check from a claim slip to the record; an event day by day along the date rail; a cause traced backwards from the damage to the document, ending on the deciding figure.

Colours tokens.json

  • bg#221F1C
  • panel#EFEADF
  • panel2#E3DCCB
  • border#34302B
  • text#EFEADF
  • muted#ABA497
  • faint#4C4740
  • data#F5DE3F
  • grad#FBEFA0
  • op#D2342B
  • good#7FBF8C
  • bad#E0645A
  • warn#E8B04A

Faces

sans
Hanken Grotesk, Noto Sans SC, sans-serif
mono
JetBrains Mono, Noto Sans SC, monospace
display
Newsreader, Noto Serif SC, serif

Credits

Evidence Board is an original motion by SuoSi.

Fonts

  • Hanken Grotesk: SIL Open Font License 1.1
  • Noto Sans SC: SIL Open Font License 1.1
  • JetBrains Mono: SIL Open Font License 1.1
  • Newsreader: SIL Open Font License 1.1
  • Noto Serif SC: SIL Open Font License 1.1

More by SuoSi See all