# Motion Sections Kit

> A library of landing-page sections that move with one motion language, composed in any order from one page.json: a masthead whose headline rises word by word out of a mask, a stats band whose numbers count up as it arrives with meters that measure each one against a target you name, testimonials as a pinned stack of letters that lift off the pile as you scroll or as a wall of panels with pull quotes and results drifting against each other, pricing with a monthly/yearly switch that rolls every digit like an odometer, an FAQ, a closing band whose film frame opens out to the edges, and a footer with the wordmark set to fill the width. The two styles are laid out differently, not just re-coloured: paper (warm editorial, Fraunces on cream stock, plan columns, a magazine Q&A with roman numerals, hand-drawn rules and drop capitals, an ink back page) and graphite (dark technical, Geist inside a ruled frame, stats as build-timeline bars over a live cache ticker, pricing as a comparison table with a pinned header, a terminal FAQ that types its answers, the name in outline cut by the floor). Your agent writes page.json; the build checks every length, the check tests four widths for overflow, text size, AA contrast, clipping, focus rings and reduced motion, and a recorder makes a 1080p video of the scroll.

- Output: Video, Animated landing-page sections you compose in page.json · rolling prices, comparison table, pinned quote stack, counters with real meters, editorial and terminal FAQs · two styles with their own layouts · 1080p video of the scroll
- Price: $4.99 one-time, or included in Pro
- Page: https://lookbk.dev/skills/motion-sections-kit

## What you need

- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge, for the checks and the video (the scripts find it; set `CHROME_PATH` if they don't).
- ffmpeg for the video only (`brew install ffmpeg`, `winget install ffmpeg`, `apt install ffmpeg`; or set `FFMPEG_PATH`).
- Internet access when the page is opened, for the Google Fonts of the style. Without them system fonts stand in.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add motion-sections-kit
```

The first run prints a sign-in link; open it, approve, and run the command again. Pro skills install for accounts that bought them or have Pro.

Where it installs:

- Run by Claude Code: `~/.claude/skills/motion-sections-kit` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/motion-sections-kit`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/motion-sections-kit` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## Example request

> Use the Motion Sections Kit to build our pricing page in the graphite style: our three plans with monthly and annual prices, the six questions from support, a wall of customer quotes and our footer links.