Creative

Motion library

Pieces every edit can reuse

Each piece is a fully animated HTML page with one clock: it loops here, freezes on any frame for stills, takes new words from the URL, and npm run render records it to a 60 fps MP4. No video editor, no animation framework.

M25 · live · 9:16 · 28.3 s

Signup Explainer

The 28 second signup reel Matt had Claude build as a Motion artifact ("GearBook Signup Reel" on his Claude account). It plays here live from the artifact's own scene code: client questions pop up, a phone applies, adds gear with one search, shares the catalog after a trip and with a friend, then gear drops into a pack and the pack becomes the logo. Its cream and topo ground, serif titles that arrive word by word and small tracked labels are the house style every new piece follows.

0.0sThe questions2.7sSign up9.2sAdd a product15.2sShare it21.0sPack it up
  • Source: the "GearBook Signup Reel" Motion artifact on Matt's Claude account. Its scenes, styles and images are copied unchanged into public/pieces/M25-signup-explainer/film/.
  • Plays silent here. The MP4 master with sound: Google Drive: GearBook/Marketing/Reels/Signup Reel/GearBook-Signup-Reel.mp4.
  • Reuse it as the end card for partner showcases and "GearBook in 20 seconds".

M26 · live · 9:16 · built for Huss valley: crag to desk

Ping

A GearBook notification drops in over footage on a ding, holds long enough to read and slides away. Banner is a realistic phone notification with glass over a blur of the footage; House and Island are on-brand alternatives.

a · banner · picked

b · house

c · island

M27 · live · 9:16 · built for Huss valley: crag to desk

Site Screen

Someone using gearbook.shop, from real screenshots: the cursor clicks Shop the gear, the climbing page scrolls to a product, it gets an amber ring and a tag. Pop-out grows the browser out of a laptop in the footage; Laptop and Full screen stand alone.

a · laptop

b · full screen

c · pop-out · picked

M28 · live · 9:16 · overlay, asked for by Luke

Pro Dashboard

A pro's GearBook dashboard on a phone, drawn from the real member dashboard at phone width, popping forward over footage like M27's pop-out (transparent, for the presenter bit in the suit). Build taps into the Trad Climbing catalog (Skiing and Layers beside it, real products with photos), stars a Top Pick and adds a Camalot C4 from search; Tour walks Catalog, Clicks and Marketing; Zoom pops the stat tiles out of the phone and counts them up.

a · build

b · tour

c · zoom

M18 · demo · sample data

Click Trail

Built from a sample idea to prove the loop: one engine, three looks. The numbers are made up.

a · switchback

b · ledger

c · summit

How a piece gets made

Nothing is built without two yeses

Luke approves the idea, then picks a still. Claude does the rest.

A reel comes inCheck the libraryPitch what's missingApprove or pass3 stillsPick oneBuild in codeCheck the renderInto the library

Pitched pieces · sample

Approve or pass

Examples until the first real reel goes through the scout. Decisions stay in this browser until applied.

MOTION IDEA2026-10-17

Link Drop

A product card drops onto a phone screen, a tracked link draws from the card to a member's catalog and the catalog card gets a small sage tick. Reusable for any "how a recommendation becomes a link" moment.

Launch: "I'm Luke, and this is GearBook" 0:09 · "What if every time you recommended your favorite gear, you got paid?"

WHY IT'S NEW
  • M10 How it works: names the steps, never shows the link itself
  • M13 Pop-outs: shows the product, not where it goes
  • So: nothing shows a recommendation turning into a link
MOTION IDEA2026-10-17

Sport Switch

A split gauge: an altimeter on top rolls up to 4,000 m while a depth gauge below rolls down to -40 m, both sitting on the same catalog card. For any reel that spans two sports.

Partner showcase: Scuba.com and West Marine 0:14 · "Same catalog, from four thousand metres up to forty metres down."

WHY IT'S NEW
  • M06 Sports: opens one sport at a time
  • M11 Then & Now: two values, but not two directions at once
  • So: nothing shows two sports on one catalog

decisions in this browser
none yet

data/pieces.json also holds 22 sample catalog entries from the first build. They aren't shown, and they get replaced as real pieces land.