# motionboard

Adopt this skill: https://proskills.md/skills/other/krisyangdev-motionboard-skills-motionboard

Page: https://proskills.md/skills/other/krisyangdev-motionboard-skills-motionboard
This document is the public skill bundle for that page. It contains SKILL.md and every helper file the catalog carries. No login is required.

## File: skills/motionboard/SKILL.md
size: 11820
sha: b33778b31b46d217b37375f152319eb7c94c66dd
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/SKILL.md

````text
---
name: motionboard
license: MIT
description: Make product launch films and single shots in the style of Apple and Linear launch films, from 38 recipes (HyperFrames, HTML + GSAP rendered to MP4). Use when the user asks for a product launch film, promo video, product reveal, feature video or app trailer; wants to recreate a specific shot from a launch film; asks for Apple-style or Linear-style motion, either as a video or as a hero animation on a website; or names a shot from the recipe index (Match Cut, Tilted UI with Depth of Field, Auto Zoom, Morph Relay, Light Reveal and the rest). Also applies to requests in Chinese such as 做宣传片, 产品发布视频, 苹果风动效, 复刻某个镜头.
---

# Motionboard

Motionboard is shot language broken down from real Apple and Linear launch films. Each shot is recreated in code as a ~10s HyperFrames film (HTML + GSAP rendered to video). This skill holds 38 recipes and their runnable source projects. You make one shot, or plan and build a whole launch film, for the user's product.

Reply in the user's language. The files here are in English.

## Quality bar

Every shot must reach the finish of its preview film on https://motionboard.app. The preview is the reference. Match its timing, easing, camera, blur, depth, lighting and UI density. A shot that moves correctly but looks flatter, emptier or cheaper than the preview is not finished.

## Layout

- `recipes/index.md`: all recipes grouped by position in a launch film, one line each. Scan this to pick shots.
- `recipes/<slug>.md`: one recipe. Spec table, why it works, the prompt, "matches requests like" phrases, the preview and recipe page links.
- `source/<video>/`: the runnable HyperFrames project for the recipe (`index.html`, `package.json`, `hyperframes.json`). The `Source files` section of each recipe names the folder.

Each recipe page at `https://motionboard.app/recipes/<slug>/` shows the preview film next to the original it was recreated from. Preview film: `https://media.motionboard.app/<video>.mp4`.

Positions: Opening (`open`), Product reveal (`reveal`), Features (`feature`), Transitions (`bridge`), Ending (`close`).

The source folder name can differ from the recipe slug (`auto-zoom` uses `source/zoom-to-cursor/`). Take it from the recipe's `Source files` section.

### Spec, source and preview

- The source project is the shot, and the preview film is its render.
- The spec table and the prompt are taken from the source: its beat times, durations, eases, angles, blur and stagger. Use the Timing row as the beat list for the quality check.
- The timeline in `index.html` is the final word on any detail the table leaves out.

## 1. Setup check

Run once per session before building.

```sh
node --version                  # 22 or newer
npx --yes hyperframes@<version from the recipe's package.json> --version
ffmpeg -version | head -1
```

If one is missing, tell the user what to install and stop. Each source project pins its HyperFrames version in `package.json`, and its scripts are the commands to use:

```sh
npm run dev                          # preview in the HyperFrames studio
npm run check                        # lint, runtime, layout and contrast gate, about a minute
npm run render -- --quality draft    # MP4 into renders/<project>_<timestamp>.mp4
npm run render -- --quality delivery # the final
```

Equivalent: `npx --yes hyperframes@<version> preview | check | render`. `npx --yes hyperframes@<version> snapshot --at <seconds,...> --against <preview.mp4>` writes frames of the composition and a side-by-side sheet against the preview. If the user's agent has the `hyperframes` skills, use them for anything beyond these commands. The "skills out of date" notice HyperFrames prints can be ignored.

Check, render and the quality check need network access: HyperFrames fetches Google Fonts (Inter and others) and GSAP from a CDN, and the preview film downloads from `media.motionboard.app`.

Network use, all of it on the user's machine: `npx --yes hyperframes@<version>` downloads the HyperFrames CLI from npm, `npm install` fetches the project's dependencies, HyperFrames fetches fonts and GSAP at render time, and the quality check downloads one preview MP4 from `media.motionboard.app`. The skill runs no other network calls, no telemetry and no background processes.

### Reading `npm run check`

Run it once on the untouched copy before editing. Some sources already report errors there, on purpose: dim text in blurred depth-of-field layers fails the contrast gate, and clamped rows report `clipped_text`. Then:

- Fix every error your edits add.
- An error already in the untouched copy can stay when it is part of the look. Mark intentional truncation with `data-layout-allow-overflow` and intentional overlap with `data-layout-allow-occlusion`.
- `text_below_floor`, `line_unread` and similar warnings are normal for product UI at real density. Keep type at the preview's size.

Every composition is one `index.html`: a root `data-composition-id="main"` with `data-duration`, 1920x1080, one paused GSAP timeline on `window.__timelines["main"]`. Keep that contract, because the renderer seeks the timeline frame by frame.

## 2. Mode A: one shot

Use when the user wants one shot, or names a recipe.

1. **Find the recipe.** By name or slug: open `recipes/<slug>.md`. By description: match it against `recipes/index.md` and the "Matches requests like" phrases in the likely recipes; read two or three candidates and choose. If two fit, name both in one sentence and let the user pick. Ask nothing else when the choice is clear.
2. **Know the product.** From the user's repo or message: name, logo, brand colours, fonts, real UI. Ask once for what is missing and cannot be read from the repo.
3. **Pick the output.** A video by default. Website motion (section 4) when the user mentions their site or a hero animation.
4. **Read the whole recipe file**, then the whole `source/<video>/index.html`.
5. **Copy the project** and run `npm run check` on the untouched copy. `cp -R <skill dir>/source/<video> <user folder>/<video>`. Never edit files inside the skill folder.
6. **Adapt two layers only.**
   - Brand layer: names, copy, colours, logo, fonts. Replace directly. Keep text inside its boxes after the swap.
   - UI layer: the product screens, cards, windows and controls in the shot. Rebuild the user's real UI in HTML/CSS, from their components and tokens or from screenshots used as reference only. Follow how the source project builds its UI. When the product has no UI like the source's (a launcher, a calendar), map the same flow onto the product's closest real screen.
   - Motion layer: timing, easing, camera moves, layering, stagger, frame counts. Keep exactly as in the source. Change a motion value only when the product forces it (for example a longer word), and record the change.
   - The layers are bound together. The timeline targets elements by id and class, camera moves land on fixed coordinates, and typing and list beats depend on text length and row count. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times. An interaction the product lacks (a drag in a calendar) becomes the product's own interaction at the same beat time.
   - Some sources open with a lead-in before the recipe's moment (a UI push-in before a logo ending). Keep it in a whole film. When the user asks for only that moment, cut the lead-in, start on the recipe's first beat, and keep every later beat's spacing.
7. **Fonts.** Use the user's brand font when it can be bundled (`@font-face` with a file in the project). For a system font that cannot ship, such as SF Pro, use Inter, which HyperFrames fetches on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`); swap those the same way.
8. `npm run check` (section 1), render, then run the quality check below.

## 3. Mode B: whole launch film

Use when the user wants a launch film, promo, trailer or feature video.

1. **Product.** If there is no link, repo or description, ask for one once. Read the repo or page to learn what the product does, its name, brand, real screens and strongest claims.
2. **Storyboard.** Propose 4 to 6 shots in position order: one Opening, one Product reveal, one to three Features, optionally one Transition, one Ending. Choose from `recipes/index.md`; a recipe fits when its mechanism shows something true about this product. Show a table:

   | Shot | Recipe | What it shows for this product | Seconds | Preview |
   | --- | --- | --- | --- | --- |

   Preview is the recipe page link. Use each shot's duration from the recipe's film length, trimmed with the user's agreement if the film should be shorter. Pacing reference: the Motionboard launch film on https://motionboard.app is 6 shots in 15.8 seconds. Wait for the user's confirmation or changes. Do not build before that.
3. **Build each shot** as in Mode A, one folder per shot: `launch-film/shots/01-<slug>/`, `02-<slug>/`, and so on. Keep brand, colours and type identical across shots. Run the quality check on every shot.
4. **Join** the renders with hard cuts, or with the Transition recipe as its own shot between two others. Re-encode so the parts match:

   ```sh
   # list.txt: one line per shot, with each shot's final render, e.g.
   # file 'shots/01-rhythmic-typing/renders/rhythmic-typing_2026-10-30_10-00-00.mp4'
   ffmpeg -f concat -safe 0 -i list.txt -c:v libx264 -crf 14 -pix_fmt yuv420p -an launch-film.mp4
   ```

   Add music only when the user asks.
5. **Deliver** `launch-film.mp4` and the editable project folder (all shot folders plus `list.txt`). Report the quality-check notes per shot.

## 4. Website motion

The same recipe can be a hero animation on a website. Do it when the user asks. Port the GSAP timeline in the source `index.html` into the user's stack (React, Vue, Svelte, plain HTML). Build the same DOM, keep durations, delays and easings, start it when the element scrolls into view, and respect `prefers-reduced-motion: reduce` by showing the final frame as a static state.

## 5. Quality check before delivering

1. Render the project.
2. Download the preview film (`https://media.motionboard.app/<video>.mp4`) and capture the same moments from both:

   ```sh
   curl -o preview.mp4 https://media.motionboard.app/<video>.mp4
   npx --yes hyperframes@<version> snapshot --at 0.5,2.4,4.0,6.3,9.5 --against preview.mp4
   ```

   Use the beat times from the spec table's Timing row: start, the moment each phase begins, the peak of the move, the hold, the end. When you cut a lead-in, the preview's times are later by the length you cut: take those frames with `ffmpeg -ss <t> -i preview.mp4 -frames:v 1 ref-<t>.png` and compare them with `snapshot --at` frames of your render.
3. Compare each pair. Fix differences in timing, easing, blur, depth of field, shadows, lighting, scale and density. The frames should match beat for beat; only brand and UI content differ.
4. Deliver with a short list of the parameters that were changed for the product and why.

## 6. No placeholder UI

Never ship grey boxes, lorem ipsum, stock icons standing in for real ones, or a pasted screenshot. Product UI is rebuilt in code at the density of the source project: real-looking copy, icons, avatars, data, states, hairline borders, shadows. If the user's product has no UI yet, design a believable one from its description, at the same density as the source.

## 7. Boundaries

- The skill ships recreations only. Do not download or embed the original third-party films. The recipe pages link to YouTube for the originals.
- Recipes and source files are free to use in the user's own work, including commercial launch films.
````

## File: skills/motionboard/recipes/auto-zoom.md
size: 7609
sha: 93faa27febcfb0dc97e19d83cf945b9460999316
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/auto-zoom.md

```text
# Auto Zoom / Zoom-to-Cursor

The camera pushes to the target element in 0.4–0.8s, holds for one click or input, then pulls back to the full view.

- Position in a launch film: Features
- Slug: auto-zoom
- Preview video: https://media.motionboard.app/zoom-to-cursor.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/auto-zoom/
- Film length: 11s, 1920x1080
- Original reference: Vercel v0 (YouTube, 0:13) https://www.youtube.com/watch?v=By9wCB9IZp0&t=13s
- Original reference: Notion Calendar (YouTube, 0:39) https://www.youtube.com/watch?v=C4Q2ezioTUM&t=39s
- Original reference: Figma Slides (YouTube, 1:00) https://www.youtube.com/watch?v=p-B--SGq_ZQ&t=60s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/zoom-to-cursor/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/zoom-to-cursor ./zoom-to-cursor`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- The camera zooms in on the button that matters
- After the click it zooms back out to the full page
- Like the auto-zoom in screen recording software

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 11s with two push–act–pull sequences. Push-in 0.6s (18 frames) at 1.1s and 5.0s; hold 2.35s and 2.75s; pull-back 0.7s (21 frames) at 4.05s and 8.35s. Cursor moves 0.5s (1.8–2.3s and 5.7–6.2s), drag 0.6s (2.55–3.15s), click 6.25s, typing 6.45–7.45s, Enter 7.65s; window leaves and the wordmark comes in 9.25–10.5s |
| Easing | Push and pull `cubic-bezier(0.16,1,0.3,1)` (expo.out); cursor moves power2.inOut; press 0.08s power2.out, release 0.22s back.out; motion-blur filter ramps up with power1.out and fades with power1.in |
| Camera | Put the whole window in one container, `scale` 2x on both pushes, with the target element translated to frame center (960, 540) and `transform-origin` at the container's top-left corner; blur 3px on each push and 2px on each pull (0.12s up, 0.3s down); a slow whole-scene drift `scale` 1.00→1.035 over 9.2s |
| Subject | The camera arrives first, and the cursor starts moving 0.1s after the push completes. Action one: drag a calendar card to the next day (grab 2.4s, drop 3.2s). Action two: click an empty slot (6.25s, ripple), a draft card opens, a title is typed, Enter at 7.65s |
| Sync | The drop at 3.2s changes the card, side panel, menu-bar text, activity log and toast on the same frame; Enter at 7.65s swaps the panel and shows the toast on the same frame; each pull-back starts 0.7–0.85s after the action while the toast is still showing; every push is 0.6s and every pull 0.7s on the same easing |
| Style | macOS desktop with a calendar window rebuilt in DOM so text stays sharp at 2x; violet selection ring `rgba(139,92,246,1)`, mark `#3b5bfd`; the motion blur is a CSS `blur` on the camera layer; closing lockup with a 3% push over 1.5s |

## Why it works

Each push-in serves exactly one action and pulls back as soon as the action is done, so viewers always know where they are on the full page. The ease is fast at first and slow at the end, so the camera lands crisply.

## Prompt

> Show two actions in your interface with a shot called Auto Zoom / Zoom-to-Cursor, 11 seconds long. Put the whole window in a container and rebuild the UI in DOM so it stays sharp when magnified. Push the camera to the first target over 0.6s with cubic-bezier(0.16,1,0.3,1), scale 2x, translating the target to frame center with transform-origin at the container's top-left, and add a slight CSS blur (3px) that ramps up in 0.12s and fades over 0.3s. Only after the push completes (0.1s later) does the cursor move: grab a calendar card at 2.4s and drag it to the next day over 0.6s; on the drop frame (3.2s) the card, side panel, menu-bar text and a toast all change together. Hold, then pull back to the full view over 0.7s with the same easing (blur 2px). Repeat for the second action: push at 5.0s, click an empty slot at 6.25s with a ripple, a draft card opens, type a title from 6.45s, press Enter at 7.65s so the panel swaps and a toast shows on the same frame, and pull back at 8.35s. Keep a slow 3.5% drift on the whole scene (scale 1.00→1.035 over 9.2s). At 9.25s fade the window out and bring in the wordmark lockup over 0.6s (expo.out).

## Often confused with

- [Tilted UI with Depth of Field](./tilted-ui-with-depth-of-field.md): Tilted UI with Depth of Field stays close and pans sideways, shooting a flat UI like a physical object through tilt and blur; Auto Zoom uses scale to go back and forth between the full view and a detail.
- [Focus Hop](./focus-hop.md): Focus Hop moves a highlight between cells while the camera barely moves; in Auto Zoom the camera is what moves.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/zoom-to-cursor/hyperframes.json (318 B)
- ../source/zoom-to-cursor/index.html (41.0 KB)
- ../source/zoom-to-cursor/package.json (303 B)

Read `../source/zoom-to-cursor/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/branching-growth.md
size: 8344
sha: 122ea47880bce5396252bda10043eebf31cef737
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/branching-growth.md

```text
# Branching Growth

A single dot branches layer by layer into a network, slow at first and then faster, or splits in doubling beats until it fills the frame.

- Position in a launch film: Opening
- Slug: branching-growth
- Preview video: https://media.motionboard.app/branching-growth.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/branching-growth/
- Film length: 11s, 1920x1080
- Original reference: Claude Fable 5.1 (YouTube, 0:14) https://www.youtube.com/watch?v=ROF2Nv_KjOM&t=14s
- Original reference: Claude Fable 5.1 (YouTube, 0:51) https://www.youtube.com/watch?v=ROF2Nv_KjOM&t=51s
- Original reference: Linear Releases (YouTube, 0:00) https://www.youtube.com/watch?v=6dIwFoQ0eVg

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/branching-growth/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/branching-growth ./branching-growth`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A dot slowly branches into a big web
- One dot becomes two, then four, then fills the screen
- Thin lines merge and flow in one direction

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 11s. Tree on paper 0.45-3.2s: layers 1-3 take 0.5s each (0.45-1.95s), layers 4-6 take 0.333s each (1.95-2.95s), layer 7 at 2.8-3.2s; camera pull-back 0.45-3.45s; six nodes turn green 2.9-3.4s; dive into one node 3.95-4.35s, then a 4-frame darken to the dark scene. Doubling beats at 4.48, 4.95, 5.5, 6.1, 6.7, 7.3, 7.9s (1, 2, 4, 8, 16, 32, 77 documents); slate at 8.4s with tagline at 8.7s, holding to 11s |
| Easing | Nodes pop with `cubic-bezier(0.34,1.56,0.64,1)`; each line is drawn outward from its parent with `1-(1-p)^2.4` over 60% of the layer window, then its dot pops at 92% of the line; the pull-back interpolates log-scale (constant zoom rate); the dive eases scale with `t^3` and position with `t^2`; the document re-deal steps at 8fps; slate letters `expo.out` 0.4s |
| Camera | Starts at scale 2.0 with the root low in frame (330px bias) and pulls back over 0.45-3.45s until the network is about 80% of frame width, centered on the tree extents; dives into one green node over 3.95-4.35s until it fills a 44px radius; the dark scene is fixed; the slate pushes 1.035x over 2.6s |
| Subject | Root dot (radius 34) with 7 layers below it. Layer 1 splits in 2 at ±31 degrees; layers 2-6 split in 2 or 3 (45% chance of 3) at ±34-38 degrees with ±5.5 degrees jitter and a bend toward radial; layer 7 splits in 2 or 3. Radius 24, 17, 12, 8, 5.6, 3.6, 1.9; edge length 300, 235, 195, 150, 110, 80, 42 (times 0.88-1.12); line width 1.9 down to 1.0. Six nodes labeled as documents turn green at 1.3x scale with a 0.7s ring pulse. Doubling scene: document cards (10 kinds) re-deal on a grid at 8fps, card scale 2.0, 1.9, 1.7, 1.25, 1.0, 0.78, 0.64, new cards pop at 0.8 then 1.05 then 1 over 3 frames, 40% carry a green status dot |
| Style | Paper `#e3d5b5` with fibers, specks and a warm vignette for the tree and slate; near-black grain (about `#0d0d0c`) for the doubling beats; pencil ink `#1d1b18` with graphite gaps and burr strokes; the only accent is green `#3cc24a`, used for activated nodes, the status dots and the last slate node. Wordmark Inter 600 168px, letter-spacing -0.045em; tagline Inter 400 30px `#6b5e3f` |

## Why it works

Going from one dot to thousands uses only black lines, black dots, and paper texture. Growth is slow at first and fast later, which turns scale into a visible rhythm. The big nodes and the small end dots differ greatly in size, so the layers read at a glance. The doubling version advances by doubling the count each beat, with no arrows or numbers.

## Prompt

> Build a scale-growth film called Branching Growth, 11s. Beige paper background #e3d5b5 with fibers, specks and a warm vignette, and a single pencil-black dot (#1d1b18, radius 34) in the center. Starting at 0.45s, grow 7 layers below it: layer 1 splits in 2 at ±31 degrees, layers 2-6 split into 2 or 3 at ±34-38 degrees, layer 7 into 2 or 3, with radius 24, 17, 12, 8, 5.6, 3.6, 1.9 and edge length 300, 235, 195, 150, 110, 80, 42. Layers 1-3 take 0.5s each, layers 4-6 take 0.333s each, layer 7 runs 2.8-3.2s; draw each line outward with 1-(1-p)^2.4 and pop its dot at 92% of the line with cubic-bezier(0.34,1.56,0.64,1). At the same time pull the camera back from scale 2.0 over 0.45-3.45s at a constant zoom rate until the network fills about 80% of the frame width. The only accent is green #3cc24a: light six document-named nodes at 2.9-3.4s with a 1.3x scale and a ring pulse, then dive into one of them over 3.95-4.35s. Cut to near-black with a 4-frame darken and run the doubling scene, re-dealing document cards on a grid at 8fps: 1, 2, 4, 8, 16, 32 and 77 documents at 4.48, 4.95, 5.5, 6.1, 6.7, 7.3 and 7.9s, card scale falling from 2.0 to 0.64, green status dots on 40%. At 8.4s return to paper, grow a small 7-node tree mark, set the wordmark in with a 0.02s per-letter stagger (expo.out 0.4s) and the tagline at 8.7s, and hold to 11s with a slow 1.035x push.

## Often confused with

- [Iris Window Montage](./iris-window-montage.md): Iris Window Montage cuts rapidly between images in a fixed frame; Branching Growth is one structure that keeps getting bigger.
- [Glass Droplet Split](./glass-droplet-split.md): Glass Droplet Split is one shape shedding one bead; Branching Growth is a multi-level structural expansion.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/branching-growth/hyperframes.json (318 B)
- ../source/branching-growth/index.html (44.3 KB)
- ../source/branching-growth/package.json (305 B)

Read `../source/branching-growth/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/card-flip-to-code.md
size: 6929
sha: b1b6e962874fdea2c90b16d888e7df9dfc21d1c1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/card-flip-to-code.md

```text
# Card Flip to Code

The preview card rotates 180° around the Y axis and its back face shows the code.

- Position in a launch film: Features
- Slug: card-flip-to-code
- Preview video: https://media.motionboard.app/card-flip-code.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/card-flip-to-code/
- Film length: 11s, 1920x1080
- Original reference: Vercel v0 (YouTube, 0:28) https://www.youtube.com/watch?v=By9wCB9IZp0&t=28s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/card-flip-code/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/card-flip-code ./card-flip-code`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- The preview card flips over and the back is code
- A flip that switches between preview and code
- The card turns halfway to show the source

## Spec

| Item | Value |
| --- | --- |
| Timing | Per component: flip to code 0.8s (24 frames), hold about 1s, flip back 0.8s (24 frames). Pricing card 1.03–1.83s, back 2.88–3.68s (hold 1.05s); sign-in form 4.56–5.36s, back 6.26–7.06s (hold 0.9s); notification settings flips to code 7.71–8.51s and stays; component swaps are hard cuts at 3.88s and 7.03s; window leaves 9.4s (0.7s), wordmark 9.85s; film 11s |
| Easing | One `cubic-bezier(0.65,0,0.35,1)` (power3.inOut) curve for each 180°; Preview/Code pill slides 0.2s `expo.out`; cursor press `scale 0.86` over 0.06s, release 0.18s `back.out(2)` |
| Camera | Whole window in frame with a continuous slow push, `scale` 1→1.05 over 9.4s `linear`; 3D stage `perspective` 2400px, `perspective-origin` 820px 500px; edge-on the card shadow narrows to `scaleX` 0.04 |
| Subject | A 940×680px component card turns `rotateY` 0→180° about its center; the second turn continues 180→360° in the same direction; the back face is `rotateY(180deg)`, a dark code editor (`#0d1117`) with file tabs, an install command, and line-numbered TSX; the front is white with a dot grid |
| Sync | The cursor clicks the Preview/Code switch at 0.98s, the pill and labels change at 1.0s, and the flip starts at 1.03s; card shadow width and a black shading overlay (opacity up to 0.2) read the same eased angle each frame; window chrome, sidebar and header stay still; swapping component changes card, title, panel and sidebar row on one frame |
| Style | Light app window with a dark stage and deep shadow; shadcn-style components on the front; GitHub-dark syntax colors on the back; JetBrains Mono for code |

## Why it works

Preview and code are the front and back of one card, which says they are the same thing. The surrounding interface stays completely still during the flip, so the motion happens on one element only.

## Prompt

> Build a preview-and-code switch called Card Flip to Code. Put a 940×680px component card in a light app window with perspective 2400px (origin 820px 500px). Clicking a Preview/Code segmented control (the pill slides over 0.2s with expo.out) starts a 0.8s rotateY from 0 to 180° about the card center with power3.inOut. The back face is rotateY(180deg), a dark code editor, and both faces use backface-visibility: hidden. The card shadow width (down to scaleX 0.04) and a black shading overlay (up to opacity 0.2) follow the same eased angle every frame. Hold about 1s, click back, and keep rotating from 180 to 360° in the same direction. Repeat for three components, swapping card, title, panel and sidebar row on a single frame between them, and leave the last one on code. Window chrome stays still, the camera pushes scale 1 to 1.05 over 9.4s, and at 9.4s the window leaves and your wordmark lands.

## Often confused with

- [Morph Relay](./morph-relay.md): Morph Relay turns one element into a different shape; Card Flip to Code shows two faces of the same card, and the shape does not change.
- [Control-Driven Change](./control-driven-change.md): In Control-Driven Change a control changes the page on the same frame; here the trigger and the result are on the same element.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/card-flip-code/hyperframes.json (318 B)
- ../source/card-flip-code/index.html (52.5 KB)
- ../source/card-flip-code/package.json (303 B)

Read `../source/card-flip-code/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/chromatic-stretch.md
size: 7414
sha: 8c3bd1986202076af4dc520c67eb0778c55af091
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/chromatic-stretch.md

```text
# Chromatic Stretch

Some letters of a wordmark stretch horizontally with RGB ghosting, distort in steps, then snap back clean.

- Position in a launch film: Ending
- Slug: chromatic-stretch
- Preview video: https://media.motionboard.app/chromatic-stretch.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/chromatic-stretch/
- Film length: 10.5s, 1920x1080
- Original reference: Apple AirPods Pro 3 (YouTube, 0:00) https://www.youtube.com/watch?v=EMmKs8vMKhU

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/chromatic-stretch/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/chromatic-stretch ./chromatic-stretch`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- Letters stretched sideways with colored ghosting
- The wordmark distorts a few times and then recovers
- An RGB-split glitch effect on text

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10.5s (315 frames). Wordmark: entry distortion 0.1-0.4s, second 0.73-0.97s, third 1.3-1.53s, smear-out 2.4-2.73s. Headline 1 enters 2.8s (settled 3.1s), re-distorts 4.0-4.17s, smears out 4.87-5.13s. Headline 2 enters 5.2s, re-distorts 6.4-6.57s, smears out 7.27-7.53s. Closing wordmark enters 7.6s (settled 7.9s), distorts 8.13-8.4s, tagline fades up 8.42s over 0.6s and holds to 10.5s |
| Easing | Stepped, no tween between states: each state holds 2 frames (66ms), then the ghost strength drops to 0.3 for 1 frame and the line returns clean. The stretch amount decays across the steps (4.4x, 3.7x, 2.9x, 1.8x). The master timeline runs `ease: "none"`; the tagline uses `expo.out` |
| Camera | Fixed frame with a slow push on each block, scale 1 to 1.03 over its on-screen time |
| Subject | Each distortion picks one letter segment (2-8 characters) and stretches it horizontally up to 4.4x (smear-out reaches 16x), scales it 1.1-1.55x vertically, arcs the baseline up to 28px, and squeezes the rest of the line to 0.6-0.96x. The R, G and B channels are warped separately and offset by 2.2% of font size each (about 4.7px at 214px) with a 12px horizontal blur on R and B; added on black and subtracted from the background, the misaligned channels read as cyan, magenta and yellow. Smear-out shifts the block left up to 420px and trails 22 fading copies |
| Style | Background `#f4f4f6`, black ink. Wordmark Inter 500 and 300 at 214px, letter-spacing -0.034em; headlines Inter 600 at 104px with 34px supporting lines at 47% opacity. RGB color exists only on distorted frames; settled frames are pure black on light gray |

## Why it works

The background and the type are black and white, and only the few distorted frames show a saturated separation into cyan, magenta, and yellow, so the color flashes and never stays. The distortion acts only on some letters and the rest stay clean, so the wordmark remains readable.

## Prompt

> Build a wordmark opening called Chromatic Stretch, 10.5s at 30fps. Light gray background #f4f4f6, black Inter wordmark centered (500 for the name, 300 for the suffix, 214px, letter-spacing -0.034em); the source film uses Ember Pro. Distort one letter segment at a time in 2-frame steps with no tweening: stretch it horizontally from 4.4x down through 3.7x, 2.9x and 1.8x, enlarge it 1.1-1.55x vertically, arc the baseline up to 28px, and squeeze the rest of the line to 0.6-0.93x. Warp the R, G and B channels separately, offset each by 2.2% of font size with a 12px horizontal blur on R and B, add them on black and subtract from the background so the edges split into cyan, magenta and yellow; drop the split to 0.3 for 1 frame, then return clean. Run three distortions on the wordmark at 0.1s, 0.73s and 1.3s, then smear it out to the left at 2.4-2.73s (stretch up to 16x, shift up to 420px, 22 fading trail copies). Swap in two headline blocks (2.8s and 5.2s) using the same enter, one re-distort and smear-out pattern, then bring the wordmark back at 7.6s with one more distortion at 8.13s and fade a tagline up at 8.42s (0.6s, expo.out). Push each block in slowly from scale 1 to 1.03; color appears only on distorted frames.

## Often confused with

- [Mark-to-Wordmark Unfold](./mark-to-wordmark-unfold.md): Mark-to-Wordmark Unfold changes the order in which the wordmark appears; Chromatic Stretch locally distorts a wordmark that is already visible.
- [Foreground Wipe & Flash](./foreground-wipe-flash.md): Foreground Wipe & Flash is a scene transition; Chromatic Stretch happens on the wordmark itself.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/chromatic-stretch/hyperframes.json (318 B)
- ../source/chromatic-stretch/index.html (18.7 KB)
- ../source/chromatic-stretch/package.json (306 B)

Read `../source/chromatic-stretch/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/confirmation-burst.md
size: 8463
sha: cd0ecddfc7c87678ca745187ac832f0c9c9820f3
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/confirmation-burst.md

```text
# Confirmation Burst

On the frame of a tap, payment, or confirmation, lines, squares, and dots radiate from the contact point, or an icon pops with a bounce and an echo outline expands.

- Position in a launch film: Features
- Slug: confirmation-burst
- Preview video: https://media.motionboard.app/confirmation-burst.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/confirmation-burst/
- Film length: 11s, 1920x1080
- Original reference: Stripe Reader S700 (YouTube, 0:44) https://www.youtube.com/watch?v=9oieNo53aNY&t=44s
- Original reference: Stripe Reader S700 (YouTube, 1:06) https://www.youtube.com/watch?v=9oieNo53aNY&t=66s
- Original reference: Arc Boosts (YouTube, 0:33) https://www.youtube.com/watch?v=N0jMmiCS8oQ&t=33s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/confirmation-burst/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/confirmation-burst ./confirmation-burst`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A burst of small shapes around the spot you tap
- Lines, squares, and dots pop out when a payment succeeds
- The confirmation icon pops and a ring of outline spreads out

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 11s. Keypad taps at 1.0, 1.22, 1.44 and 1.66s; fragment burst on the Review tap at 2.65s (expand 0.3s, drift to 0.64s, fade 0.64-0.8s); review screen takes over at 3.0s; Pay tap at 5.1s, button disabled state 5.1-5.3s, icon pops at 5.45s (scale 0.6 to 1.1 in 0.28s, to 1.0 in 0.24s), outline ring 0.6s in parallel; phone leaves 8.0s; wordmark 8.45s |
| Easing | Fragments expand `expo.out` 0.3s, then drift linearly 12px over 0.5s and fade `power1.in` 0.16s; icon scale `power3.out` 0.6 to 1.1, then `power2.inOut` 1.1 to 1.0; outline scale `power2.out` 1 to 3 and opacity `power2.in` 0.6 to 0 over 0.6s; check stroke `power2.out` 0.24s; button disable `power1.out` 0.2s |
| Camera | Not fixed: slow push 1.18 to 1.215 until 1.9s, then an `expo.out` push to 1.7 anchored on the Review button (0.6s from 2.0s) so the burst fills the lower frame; pull-back to 1.42 at 3.0s (0.9s), drift to 1.5 by 5.25s, 1.3 at 5.53s (1.0s) drifting to 1.36. A 54px touch indicator travels to each target and presses (scale 0.78 in 0.06-0.07s, back in 0.14-0.16s) |
| Subject | Burst: 6 elements leave the tap point upward and sideways at angles -26, -78, -156, -128, -52 and -104 degrees: a white line with navy outline, a navy line, a blue line, a navy wavy line, a white dot and a blue square, travelling 96-120px (about 20% of frame height at camera scale 1.7). Icon: after the Pay button turns into a disabled Sending state with a spinner, a 132px scalloped blue seal with gradient, inner highlight and shadow and a white check stroke pops in with a same-shape outline expanding behind it |
| Sync | The burst and the button press (scale 0.965) share the tap frame at 2.65s and the review screen takes over 0.35s later; for the icon, the disabled state starts on the tap at 5.1s and the icon pops 0.35s later, with the same button turning into Done on that frame |
| Style | Navy backdrop `#0b1b6a` with blurred bank notification cards (fade out at 8.0s), white phone UI, brand blue `#1e45d6` and fragments in navy `#0b1b6a`, blue `#2a58ee` and white; icon gradient `#86a4ff` to `#1530b4`; wordmark Inter 700 168px, letter-spacing -0.055em, white |

## Why it works

Graphics appear only on key action frames such as a tap or a successful payment, which marks the key moments of the product. The fragments share shapes and colors with the maps and feature cards used elsewhere in the film. The confirmation icon has thickness and highlights that contrast in material with the flat interface, and the expanding outline reuses the same shape.

## Prompt

> Emphasize a successful tap with a shot called Confirmation Burst, 11s, on a phone money-transfer UI over a navy backdrop (#0b1b6a) with blurred notification cards. Tap the keypad at 1.0, 1.22, 1.44 and 1.66s, then push the camera with expo.out to 1.7 anchored on the Review button (0.6s from 2.0s). On the tap frame at 2.65s, press the button to 0.965 and a 54px touch indicator to 0.78, and send 6 elements from the contact point upward and sideways at angles -26, -78, -156, -128, -52 and -104 degrees: a white line with a navy outline, a navy line, a blue line, a navy wavy line, a white dot and a blue square rotating 45 to 135 degrees. They expand 96-120px (about 20% of frame height) over 0.3s with expo.out, drift 12px more over 0.5s, and fade over 0.16s from 0.64s. Switch to the review screen 0.35s later. Icon version: at the Pay tap (5.1s) fade the button to a disabled Sending state with a spinner over 0.2s with power1.out, hold 0.15s, then pop a 132px scalloped blue seal (gradient #86a4ff to #1530b4, inner highlight and shadow, white check stroke drawn in 0.24s) from scale 0.6 to 1.1 with power3.out over 0.28s and back to 1.0 with power2.inOut over 0.24s, while an outline of the same shape goes scale 1 to 3 with power2.out and opacity 0.6 to 0 with power2.in over 0.6s, the same button turning into Done. Take the phone out at 8.0s and bring in a white Finch wordmark lockup at 8.45s.

## Often confused with

- [Map Pin Drop](./map-pin-drop.md): Map Pin Drop's fragments appear at the pin's landing position; Confirmation Burst's fragments appear at the tap contact point.
- [Match Cut](./match-cut.md): Match Cut swaps the whole object for another; Confirmation Burst only overlays feedback graphics on the existing picture.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/confirmation-burst/hyperframes.json (318 B)
- ../source/confirmation-burst/index.html (40.6 KB)
- ../source/confirmation-burst/package.json (307 B)

Read `../source/confirmation-burst/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/control-driven-change.md
size: 7302
sha: 49a25d9ed74e0110508458487544c3e077ea51a8
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/control-driven-change.md

```text
# Control-Driven Change

The frame a control (color picker, toggle, dial) lands, the page result changes on that same frame. It can be split-screen with the control on the left and the result on the right.

- Position in a launch film: Features
- Slug: control-driven-change
- Preview video: https://media.motionboard.app/control-driven.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/control-driven-change/
- Film length: 11s, 1920x1080
- Original reference: Arc Boosts (YouTube, 0:07) https://www.youtube.com/watch?v=N0jMmiCS8oQ&t=7s
- Original reference: Figma Slides (YouTube, 0:28) https://www.youtube.com/watch?v=p-B--SGq_ZQ&t=28s
- Original reference: Arc Boosts (YouTube, 0:26) https://www.youtube.com/watch?v=N0jMmiCS8oQ&t=26s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/control-driven/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/control-driven ./control-driven`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- Drag a color wheel and the whole website changes color
- Flip a switch and the page changes right away
- Adjust on the left and the page changes at the same time

## Spec

| Item | Value |
| --- | --- |
| Timing | Close-up 0–0.85s, pull-out 0.85–1.75s (0.9s); color-dot drags 1.9–2.3s (0.4s, 12 frames), 3.3–3.7s (0.4s) and 6.9–7.4s (0.5s, 15 frames); dark-mode knob slides 5.0–5.17s (5 frames), theme flips at 5.17s; Brand popover reopens 6.1s (0.2s); window leaves 8.6s (0.7s), wordmark 9.1s; film 11s |
| Easing | Drags `cubic-bezier(0.65,0,0.35,1)` (power3.inOut), with dot and cursor sampled per frame from the same curve; free cursor moves `expo.out` in x and `power2.out` in y; press `scale 0.86` over 0.06s, release `back.out(2)` 0.18s; dot grab `scale 1.18`; page changes are hard sets on the landing frame |
| Camera | Opens as a 2.6x close-up on the inspector and popover (slow push to 2.66x), pulls out over 0.9s with `expo.out` to the whole window at 1.3x, then pushes slowly 1.3→1.36x `linear` until 8.6s |
| Subject | A website editor: the cursor drags a dot across a 200×132px color field in the Brand popover, from indigo `#6366f1` to emerald `#10b981`, orange `#f97316`, and violet `#8b5cf6`; the cursor drifts 5–6px off the dot's path mid-drag; a Dark mode switch flips the whole page theme at 5.17s |
| Sync | On the frame the dot lands, `--brand`, `--brand-t` and `--soft` are set on the root, so the hex field and the entire page change color together with no transition; the theme variables swap on the frame the knob arrives; one timeline drives control and page |
| Style | Shadcn-style editor window, light (`#ffffff` with `#09090b` text) switching to dark (`#09090b` with `#fafafa` text); the page takes the dot's color as its accent |

## Why it works

Control state and page result are strictly on the same frame, so cause and effect need no narration. In split-screen the left is a dark control and the right is light content, so control and content are separated by brightness.

## Prompt

> Show your feature with a shot called Control-Driven Change. Open on a 2.6x close-up of an inspector with a Brand color popover (a 200×132px color field holding one draggable dot), then pull out over 0.9s with expo.out to the whole editor window at 1.3x, and keep pushing slowly to 1.36x. The cursor grabs the dot (scale 1.18) and drags it through indigo, emerald, orange and violet in drags of 0.4 to 0.5s with power3.inOut; dot and cursor follow one sampled curve and the cursor drifts 5 to 6px off the path mid-drag. On the frame the dot lands, hard-set the CSS variables --brand, --brand-t and --soft on the root, so the hex field and the whole page change color together with no transition. Between drags the cursor clicks a Dark mode switch: the knob slides over 5 frames and the whole page swaps to the dark theme on the arrival frame. At 8.6s the window shrinks away over 0.7s and your wordmark lands.

## Often confused with

- [Locked-Layout Reskin](./locked-layout-reskin.md): Locked-Layout Reskin is driven by hard cuts in the edit, with no control in the frame; Control-Driven Change shows the control, and cause and effect are expressed by a same-frame change.
- [Focus Hop](./focus-hop.md): Focus Hop moves a highlight block down a list; Control-Driven Change changes the state of the whole page through a control value.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/control-driven/hyperframes.json (318 B)
- ../source/control-driven/index.html (50.1 KB)
- ../source/control-driven/package.json (303 B)

Read `../source/control-driven/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/converge-to-mark.md
size: 7816
sha: 6379629a2c8a8c4116d160f9259b156c77026710
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/converge-to-mark.md

```text
# Converge to Mark

At the end, multiple elements gather and compress into a single icon or logo, always centered in the frame.

- Position in a launch film: Ending
- Slug: converge-to-mark
- Preview video: https://media.motionboard.app/converge-to-mark.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/converge-to-mark/
- Film length: 10.6s, 1920x1080
- Original reference: Apple AirPods Pro 3 (YouTube, 0:38) https://www.youtube.com/watch?v=EMmKs8vMKhU&t=38s
- Original reference: Notion Calendar (YouTube, 1:12) https://www.youtube.com/watch?v=C4Q2ezioTUM&t=72s
- Original reference: Linear 发布片 (YouTube, 0:00) https://www.youtube.com/watch?v=lKwyrKUEPS4
- Original reference: Dia (YouTube, 1:03) https://www.youtube.com/watch?v=YVOw0TAO9ok&t=63s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/converge-to-mark/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/converge-to-mark ./converge-to-mark`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- Everything shrinks into one icon at the end
- The scattered icons fly to the middle and become the logo
- The text shrinks to a dot of light, then becomes the mark

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10.6s. Workspace demo 0–6.2s; the pieces drift down from 5.0s (1.2–1.5s, about 4–5% of frame height); converge from 6.2s: each piece starts 0–0.55s after 6.2s and takes 0.65–0.95s (20–29 frames); chrome leaves 6.2–6.7s, wallpaper washes to white 6.4–7.4s; mark lands 7.32s and settles over 0.65s (20 frames); wordmark pulls out 8.05–9.3s, tagline 8.9–9.7s, held to 10.6s |
| Easing | Drift `linear`; converge position on `cubic-bezier(0.32,0,0.67,0)` (power3.in, faster as they get closer) for one axis and power2.in for the other, so paths curve; scale power2.in, rotation power1.in, opacity fade power1.in over the last 35%; mark landing back.out(2.1); wordmark and tagline `cubic-bezier(0.16,1,0.3,1)` (expo.out) |
| Camera | Fixed frame, target icon at the center (960, 540). Slow push 1.00→1.035 linear over 0–6.2s (x −14px, y −6px), back to 1.0 over 6.2–7.1s with power2.inOut; after landing the lockup pushes 1.00→1.04 linear over 3.0s from 7.6s |
| Subject | 17 pieces drift down, then gather on the center: 4 windows, a timer, a notification, a picture-in-picture, a command palette, 2 collaborator cursors, and 7 dock icons; they scale to 0.07–0.4, rotate 6–30° and fade out in their last 35%; the dock's own Tessel icon travels at full scale and the 200px mark takes over from it at the same size, leaving only the mark |
| Style | Light base `#f5f5f7` under a pastel wallpaper (peach, pink, blue, lilac) that washes to white; white windows with 12px radius and soft violet shadows; indigo accent `#5b5bf0` (icon gradient `#8a8cff` → `#3d31d6`) with four white tiles and one amber tile; faint violet vignette |

## Why it works

A slow drift followed by a fast gather contrasts speeds and gives a clear end point. The shape loses detail step by step, from a concrete product to geometry to a brand mark, while its position stays at the center of the frame without jumping. When the ending uses the same technique as the opening, the film closes on itself.

## Prompt

> Build an ending called Converge to Mark as a 10.6-second film. Build a product workspace on a light #f5f5f7 base with a pastel wallpaper: four white windows, a timer, a notification, a picture-in-picture, a command palette, two collaborator cursors, and a dock of 7 app icons with your icon in the middle; run a short demo for 6.2 seconds with a slow linear push (scale 1.00→1.035). From 5.0s drift every piece down at constant speed (34px per second). At 6.2s the menu bar and dock background leave over 0.5s, the wallpaper washes to white over 1.0s, and every piece travels to the center of the frame (960, 540): each starts 0–0.55 seconds after 6.2s and takes 0.65–0.95 seconds, with power3.in on one axis and power2.in on the other, scaling to 0.07–0.4 (windows 0.07–0.09), rotating 6–30° and fading out over the last 35%. The dock icon of your product travels at full scale and a 200px version takes over at the same size at 7.32s, landing with back.out(2.1) over 0.65 seconds with a glow ring behind it. At 8.05s the mark slides left while the wordmark is pulled out from behind it over 1.25 seconds with expo.out (cubic-bezier(0.16,1,0.3,1)), blur 10px→0, then the tagline fades in at 8.9s; push the lockup 4% and hold to 10.6s. Build it with HTML/SVG + GSAP.

## Often confused with

- [Rotate to Lockup](./rotate-to-lockup.md): Converge to Mark gathers many elements to a point; Rotate to Lockup turns one object to a target angle.
- [Dispense Line-up](./dispense-line-up.md): The retract in Dispense Line-up only returns to the original subject; Converge to Mark ends on a new icon or logo.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/converge-to-mark/hyperframes.json (318 B)
- ../source/converge-to-mark/index.html (63.4 KB)
- ../source/converge-to-mark/package.json (305 B)

Read `../source/converge-to-mark/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/device-push-in-focus.md
size: 7140
sha: 8b40e5878a956b7e261844f2eddb382601c59bad
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/device-push-in-focus.md

```text
# Device Push-in Focus

A line-art 3D laptop turns upright while closed, opens, pushes in on the keyboard, then pans from key to key in step with the option selected in the UI beside it.

- Position in a launch film: Product reveal
- Slug: device-push-in-focus
- Preview video: https://media.motionboard.app/device-focus.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/device-push-in-focus/
- Film length: 10s, 1920x1080
- Original reference: ARION 输入法 onboarding (YouTube, 0:00) https://www.youtube.com/watch?v=ARION
- Original reference: 本地复刻预览 (YouTube, NaN:NaN) https://www.youtube.com/watch?v=LOCAL

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/device-focus/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/device-focus ./device-focus`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- The camera moves across the laptop to the key for each option
- The laptop closes, opens, then pushes in on the keyboard
- Pick a setting and its key lights up

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10s. Intro: laptop rises 0–0.5s, turns upright while closed 0.5–1.2s (0.7s, 21 frames), lid opens 1.2–1.75s (0.55s, 17 frames), push-in on keyboard 1.6–3.2s (1.6s, 48 frames). Then three key groups: ⌥+Space highlight 3.3s, press 3.8s, off 5.0s; pan 5.0–5.8s (0.8s, 24 frames), ⌘+⇧+K highlight 5.6s, press 6.0s, off 7.2s; pan 7.2–8.0s (0.8s), fn highlight 7.8s, press 8.2s |
| Easing | Push-in and every pan `cubic-bezier(0.16,1,0.3,1)` (expo.out); yaw, lid opening and camera retarget easeInOutCubic; rise easeOutCubic; highlight fade 0.2s easeInOutCubic |
| Camera | Perspective camera, 22° fov telephoto, fixed viewing direction (0.62, 0.78, 0.9); yaw turns from 35° to 0°, the screen lid opens 0°→112°; the push-in dollies 150→60 units onto the ⌥+Space span, then pans to the ⌘+⇧+K span (dolly 70) and to fn (dolly 30) |
| Subject | Each key sinks 0.22 units in a 0.25s press (0.08s down, 0.17s easeOutBack return); highlighted keys go from white to yellow, pressed keys darken to `#e5b92f`; the pan target is the key group of the option just selected |
| Sync | The dropdown selects at 4.95s and 7.15s and the pan starts 0.05s later; key highlight lands 0.6s into the pan (5.6s, 7.8s), the press 0.4s after that (first group 0.5s) |
| Style | White material with gray outlines (`#a9a9a9` body 2.2px, `#b8b8b8` keys 1.8px at 2x pixel ratio), yellow accent `#f6c83e` (highlight `#f6d45a`); 3D on the left (760px), UI on the right |

## Why it works

The key highlight and the dropdown selection on the right happen on the same frame, so viewers link each key to its setting at a glance. A long telephoto lens flattens perspective, so the keys stay flat and readable after the push-in. The material is white with a 1.2px dark gray outline, and yellow is the only color in the frame.

## Prompt

> Build an input-method onboarding demo called Device Push-in Focus. Split the page: 3D on the left (760px), UI on the right. The left side is a line-art 3D laptop with white material, gray outlines (2.2px body, 1.8px keys at 2x pixel ratio), accent color yellow #f6c83e, and a Three.js perspective camera with a 22° fov (telephoto) looking along a fixed direction (0.62, 0.78, 0.9). Sequence: the laptop rises in over 0.5s, turns yaw from 35° to 0° while closed over 0.7s, opens the screen lid from 0° to 112° over 0.55s (easeInOutCubic for both), then the camera pushes in on the keyboard over 1.6s (expo.out, dolly 150→60 units) and the keys for the current option light up in yellow (0.2s). After a 0.5s hold the key sinks 0.22 units and springs back (0.25s). When the dropdown on the right selects a new option, pan the camera to the matching key group over 0.8s (expo.out) starting right after the selection; the new keys highlight 0.6s into the pan and press 0.4s after that. Pan targets are ⌥+Space, then ⌘+⇧+K, then fn.

## Often confused with

- [Macro Pull-out Reveal](./macro-pull-out-reveal.md): Device Push-in Focus serves one UI choice after another, each pan finishing within 0.8s; Macro Pull-out Reveal is one long shot that ends by pulling out to the whole device.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/device-focus/hyperframes.json (353 B)
- ../source/device-focus/index.html (25.1 KB)
- ../source/device-focus/package.json (301 B)

Read `../source/device-focus/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/dispense-line-up.md
size: 7639
sha: 94147cf0777e34cda21775949ab82e4995cf8e2b
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/dispense-line-up.md

```text
# Dispense Line-up

Accessories slide out of the main object one by one into a row while the caption appears word by word, then retract in mirror order.

- Position in a launch film: Features
- Slug: dispense-line-up
- Preview video: https://media.motionboard.app/dispense-lineup.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/dispense-line-up/
- Film length: 10.5s, 1920x1080
- Original reference: Apple AirPods Pro 3 (YouTube, 0:19) https://www.youtube.com/watch?v=EMmKs8vMKhU&t=19s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/dispense-lineup/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/dispense-lineup ./dispense-lineup`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- Accessories come out of the product one by one and line up
- Text pops up word by word as they come out
- Then they go back in one by one

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10.5s in three shots (A 0–3.9s, B 3.9–7.6s, lockup C 7.6–10.5s), with two dispense passes. Each pass: extend 0.9s (27 frames), hold 1.1s (33 frames), retract 0.9s (27 frames); pass 1 extends 0.5–1.4s and retracts 2.5–3.4s, pass 2 extends 4.3–5.2s and retracts 6.3–7.2s. Accessories start 0.15s apart (about 5 frames), each slide-out takes 0.3s (9 frames) |
| Easing | Slide-out `cubic-bezier(0.16,1,0.3,1)` (expo.out); the retract is the exact time mirror of the extend; camera push sine.inOut; wordmark and subtitle expo.out |
| Camera | Perspective, locked side view at 13° fov with lens shift so the dock sits left and the row centre-right (shots A and C); shot B is a three-quarter view from the left at 23° fov so the row recedes in depth; 3% push-in per shot (scale 1.00→1.03); motion blur from 14 sub-frames over a 180° shutter |
| Subject | 5 power adapters (140W, 96W, 70W, 35W, 20W) leave the dock's right face to the right and form a row sized from large to small, 0.42 units apart; the smallest leaves first and travels furthest, the largest leaves last; on retract they re-enter in the mirrored order, from right to left |
| Sync | Each accessory that slides out adds one word to the caption 0.1s after it starts moving, which appears directly with no fade (5 words, 5 accessories); on retract, words are removed in reverse order at 0.15s intervals |
| Style | Light gray-white background `#f4f4f6`, matte white product (`#f4f4f3`, roughness 0.62), large soft overhead box plus broad front fill, soft contact shadows on an invisible floor; no tone mapping; dark gray type `#1d1d1f` (50px captions, 156px wordmark) |

## Why it works

The number of words in the caption matches the number of accessories one to one, and the forward and reverse runs are symmetric, so the move is reversible. Accessory sizes step down from large to small, which gives the row a sense of perspective. The row has no guide lines or labels.

## Prompt

> Build an accessory showcase called Dispense Line-up as a 10.5-second film. Light gray-white background (#f4f4f6) with a matte white charging dock in a locked side view (13° fov, lens shift so the dock sits left and the row centre-right). 5 power adapters (140W, 96W, 70W, 35W, 20W) slide out of the dock's right face to the right and form a row sized from large to small: the smallest leaves first and travels furthest, each next one starts 0.15 seconds later, each slide-out takes 0.3 seconds with expo.out (cubic-bezier(0.16,1,0.3,1)), 0.9 seconds in total. Each time one starts moving, the caption below gains one word 0.1 seconds later that appears directly with no fade; the word count matches the accessory count. After a 1.1 second hold, retract as the exact time mirror over 0.9 seconds: the accessories return from right to left into the dock while the caption deletes word by word in reverse. Run two passes (0.5s and 4.3s start) with a second caption, cutting to a three-quarter view from the left (23° fov) for the second one, then end on the side view with the wordmark fading in at 7.75s (expo.out, blur 10px→0). Push in 3% over every shot with sine.inOut. Soft overhead light, soft contact shadows, 14-sub-frame motion blur on moving parts. Drive the 3D from a time function so the retract is a mirror, and use GSAP only for the caption words and wordmark.

## Often confused with

- [Text–Object Interleave](./text-object-interleave.md): Text–Object Interleave is front-and-back occlusion between text and object; the caption in Dispense Line-up syncs only with the accessory count.
- [Converge to Mark](./converge-to-mark.md): Converge to Mark gathers many elements into one icon; the retract in Dispense Line-up returns to the original subject and creates no new shape.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/dispense-lineup/hyperframes.json (318 B)
- ../source/dispense-lineup/index.html (27.3 KB)
- ../source/dispense-lineup/package.json (304 B)

Read `../source/dispense-lineup/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/dock-arrival.md
size: 7288
sha: 22dcb813a3acd6878b13ae0e4ce97e6a1305431e
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/dock-arrival.md

```text
# Dock Arrival

A magnified Dock opens a gap, a new icon grows into it with one small spark, and a cursor click opens the window.

- Position in a launch film: Product reveal
- Slug: dock-arrival
- Preview video: https://media.motionboard.app/dock-arrival.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/dock-arrival/
- Film length: 11s, 1920x1080
- Original reference: Notion Calendar (YouTube, 0:04) https://www.youtube.com/watch?v=C4Q2ezioTUM&t=4s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/dock-arrival/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/dock-arrival ./dock-arrival`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A new icon shows up in the Dock
- The icon grows in with a little spark
- Click the icon to open a window

## Spec

| Item | Value |
| --- | --- |
| Timing | Gap opens and icon grows 0.45–0.95s (0.5s, 15 frames); radiating strokes 0.95–1.30s (0.29s each, staggered 0.02s, about 9 frames); cursor appears 1.5s and moves 1.5–2.1s (0.6s, 18 frames); tooltip 2.2s; press dim 2.4s (0.1s, 3 frames); window opens at 2.5s over 0.55s; typing 3.45–4.84s; checkbox click 5.8s; window closes 7.4s (0.42s); icon lands 7.8s, wordmark unfolds 8.4s (1.2s); film 11s |
| Easing | Growth `cubic-bezier(0.34,1.56,0.64,1)` (back.out(1.4)); cursor `cubic-bezier(0.65,0,0.35,1)` (power3.inOut); window open `cubic-bezier(0.16,1,0.3,1)` (expo.out); strokes draw `power2.out` and retract `power2.in`; window close `power3.in`; wordmark `expo.out` |
| Camera | Dock magnified 3.0x on a fixed point, pushing slowly to 3.06x until 2.5s; at the click, cut to a medium shot (1.0x, drifting to 1.012x) where the window opens from a small size at the center |
| Subject | A 13-slot macOS Dock (12 icons and a separator); the new icon's slot grows `width` 0→64px (gap 0→8px) while its icon goes `scale` 0.6→1 and fades in, and neighbors slide apart as the Dock re-centers; after it settles, four 2.1px strokes (at −96°, −62°, −30°, 2°) flick out of its upper right corner; the Dock magnifies icons 1.58x near the cursor; the opened window is a notes app with a checklist |
| Sync | The icon dims (opacity 0→0.32) on the press frame at 2.4s and the window opens 0.1s later at 2.5s; in the window a checklist row types a new item at 0.042s per character, and the click at 5.8s checks the box, updates the counter to "3 of 5" and the progress bar to 60% on one frame |
| Style | Light gray-white `#efeff2` base with a soft orange, pink, and blue gradient wallpaper; frosted Dock plate (`backdrop-filter: blur(24px)`); gradient squircle icons; the end card is a large icon plus a wordmark and one-line tagline |

## Why it works

A familiar macOS Dock motion says "an app was installed" with no text needed. The radiating short lines appear only once and are very small, which marks the landing point without taking over the frame.

## Prompt

> Show your app being installed with a shot called Dock Arrival. The frame is a macOS Dock magnified 3x on a fixed point with a very slow push to 3.06x. Starting at 0.45s, open a gap between two icons over 0.5s and grow your app icon in it (width 0 to 64px, gap 0 to 8px, scale 0.6 to 1, back.out(1.4)). After it settles, flick four 2.1px strokes out of its upper right corner, each drawing in 0.13s and retracting by 0.29s, staggered 0.02s. At 1.5s the cursor enters and moves to the icon over 0.6s with power3.inOut, the Dock magnifies icons 1.58x near it, and a tooltip appears. At 2.4s the icon dims over 0.1s, and at 2.5s cut to a medium shot where a notes window scales from 0.16 to 1 over 0.55s with expo.out. Type a new checklist item at 0.042s per character, click its checkbox at 5.8s and change the checkbox, counter and progress bar on the same frame. At 7.4s fold the window back to the center over 0.42s with power3.in, land a large icon with back.out(1.5), then slide it left while the wordmark unfolds with clip-path and blur 10px to 0 over 1.2s with expo.out.

## Often confused with

- [Morph Relay](./morph-relay.md): Morph Relay is one element changing shape continuously; Dock Arrival adds a new element to the Dock and then opens a window on click.
- [Pile-up and Clear](./pile-up-and-clear.md): Pile-up and Clear piles up more and more elements and then clears them; Dock Arrival adds only one element.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/dock-arrival/hyperframes.json (318 B)
- ../source/dock-arrival/index.html (52.9 KB)
- ../source/dock-arrival/package.json (301 B)

Read `../source/dock-arrival/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/domino-wave.md
size: 7883
sha: f86aff390f38c42412d3084373bec9b93b7bcd1d
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/domino-wave.md

```text
# Domino Wave

A row of cubes flips 90 degrees one after another with a phase offset, while the camera pans along the line.

- Position in a launch film: Transitions
- Slug: domino-wave
- Preview video: https://media.motionboard.app/domino-wave.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/domino-wave/
- Film length: 10.8s, 1920x1080
- Original reference: Linear 发布片 (YouTube, 0:17) https://www.youtube.com/watch?v=lKwyrKUEPS4&t=17s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/domino-wave/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/domino-wave ./domino-wave`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A row of blocks flipping over in turn like a conveyor track
- Blocks flipping one after another to move forward
- Cubes rolling over in sequence like dominoes

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10.8s. White flash fades 0.05-0.75s. Pass 1 from 0.34s (flip 0.6s, 0.10s offset); arrow sweep 0.95-2.45s; pass 2 from 2.5s (turn 0.72s, 0.10s offset); slogan words from 2.78s, 0.1s apart, out at 5.9s; pass 3 from 3.75s (flip 0.6s, 0.07s offset, right to left); camera push 6.2-7.5s; flash 7.42s; end card 7.66s; mark 8.2s, wordmark 8.32s, ring 8.55-9.35s |
| Easing | Flip `cubic-bezier(0.65,0,0.35,1)` on every wave; camera pan linear at 2.03 units per second; arrow `power2.inOut`; push `t^2`; slogan words and wordmark `expo.out`; flash `power2.in` 0.2s then `power2.out` 0.7s; ring stroke `power2.inOut` 0.8s |
| Camera | Perspective camera (24 degree field) tracking along the row at 2.03 world units per second, about 15% of frame width, from (-8, 3.9, 13.5) looking at (0.5, 1.15, 0), with a roll of -0.1 rad (5.7 degrees); lens radius 0.30 for depth of field. From 6.2s it dives toward cube 7 and ends 1.28 units in front of its face as the roll eases to 0 |
| Subject | A row of 36 matte cubes (edge 1.45, spacing 2.2, hovering at 1.32). Pass 1 turns each cube 90 degrees in the view plane with a 0.1 unit hop; pass 2 turns each 180 degrees with a 0.8 unit hop; pass 3 runs right to left, rolls each cube 90 degrees along the row with a 0.22 unit hop and brings the ring face toward the lens. Cube 7 carries an orange hex ring (`#ff5a1f`), the others a dark groove. A white extruded arrow with a trail sweeps above the row |
| Sync | The five slogan words (Every write lands in order.) fade in 0.1s apart from 2.78s, following the left-to-right sweep of pass 2; the arrow passes before it. The push into cube 7 ends in a white flash at 7.42s that resolves into the end card, where the mark and wordmark Basalt appear |
| Style | Light gray studio gradient background; matte cubes `#5a5b60` with 0.07 bevels and a hex groove on one face; top softbox key light with soft shadow, thin rim strips, a floor reflection at 20% opacity and a 0.3 vignette; slogan Inter 500 64px, wordmark Inter 600 120px, letter-spacing -0.045em |

## Why it works

Each cube does only a simple flip, and the phase offset combines into a sense of forward motion. The material is a uniform matte dark gray, with faces told apart only by the top light. The slogan means moving forward, and the direction of the motion matches it.

## Prompt

> Express forward motion with a shot called Domino Wave, 10.8s. Light gray studio gradient background, with a row of 36 matte dark gray cubes (#5a5b60, edge 1.45, spacing 2.2, hovering at 1.32, 0.07 bevels) seen by a 24 degree perspective camera from (-8, 3.9, 13.5) looking at (0.5, 1.15, 0) with a roll of -0.1 rad and a depth-of-field lens radius of 0.30. Pan the camera along the row linearly at 2.03 units per second, about 15% of frame width. Run three waves with cubic-bezier(0.65,0,0.35,1): pass 1 from 0.34s turns each cube 90 degrees in the view plane (0.6s, 0.10s offset, 0.1 unit hop); pass 2 from 2.5s turns each 180 degrees with a 0.8 unit hop (0.72s, 0.10s offset); pass 3 from 3.75s runs right to left and rolls each cube 90 degrees along the row (0.6s, 0.07s offset, 0.22 unit hop). Sweep a white extruded arrow with a 6 unit trail across the top of the row at 0.95-2.45s with power2.inOut, and write the slogan along the row, rotated -11 degrees, word by word 0.1s apart from 2.78s with expo.out 0.7s and an 8px blur, fading out at 5.9s. From 6.2s dive toward cube 7, which carries an orange hex ring (#ff5a1f), with a t^2 ease, flash white at 7.42s, then show the mark at 8.2s, the wordmark at 8.32s and the ring stroked on over 0.8s from 8.55s, with a 4% push to 10.8s. Top softbox key light with soft shadow and a floor reflection at 20% opacity, no other decoration.

## Often confused with

- [Branching Growth](./branching-growth.md): Branching Growth is node count growing; Domino Wave is a fixed number of objects flipping in turn.
- [Foreground Wipe & Flash](./foreground-wipe-flash.md): Foreground Wipe & Flash is a scene transition; Domino Wave is an action within a scene and ends with a white flash.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/domino-wave/hyperframes.json (318 B)
- ../source/domino-wave/index.html (30.7 KB)
- ../source/domino-wave/package.json (300 B)

Read `../source/domino-wave/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/dot-matrix-glyph.md
size: 7979
sha: 1740a146c99a2f77e7df0d97c2e6d422ebd6fd28
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/dot-matrix-glyph.md

```text
# Dot-Matrix Glyph

A graphic is quantized onto a circular dot-matrix display, and every frame of its rotation or change snaps to the dot grid.

- Position in a launch film: Features
- Slug: dot-matrix-glyph
- Preview video: https://media.motionboard.app/dot-matrix-glyph.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/dot-matrix-glyph/
- Film length: 11s, 1920x1080
- Original reference: Nothing Phone (3) (YouTube, 0:03) https://www.youtube.com/watch?v=MHGQRnvE9GQ&t=3s
- Original reference: Nothing Phone (3) (YouTube, 0:15) https://www.youtube.com/watch?v=MHGQRnvE9GQ&t=15s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/dot-matrix-glyph/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/dot-matrix-glyph ./dot-matrix-glyph`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- The graphic becomes cells of round dots rotating on a screen
- A pattern rotating on a pixel dot-matrix screen
- The rotation slows down more and more until it stops

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 11s, eight hard-cut shots. Wide rotation shots at 0-1.4s (rotation 0.8s), 1.85-3.55s (1.15s), 4.0-6.0s (1.6s), 6.4-8.8s (2.0s); close-ups of the crown 1.4-1.85s, 3.55-4.0s and 6.0-6.4s; each rotation covers 120 degrees and leaves the glyph still for 0.6, 0.55, 0.4 and 0.4s; captions at 2.0s and 4.12s; end card from 8.8s, tagline at 8.9s |
| Easing | Rotation `cubic-bezier(0.16,1,0.3,1)` (strong ease-out); crown click uses the same curve over 0.35s; dots turn on and off with a hard cut, no glow and no trail; camera pushes are linear inside each shot; captions `expo.out` 0.8s; scene fade-in 0.5s `power2.out` |
| Camera | Perspective camera (20 degree field) with a hard cut per shot: wide shots at zoom 1.0 (device body), 1.6, 1.95 and 1.7, each pushing linearly 2-16% inside the shot; close-ups of the crown and rim at zoom 4.2, 4.8 and 3.3 with depth of field; end card locked at zoom 1.98-2.0 on the screen |
| Subject | A 25x25 grid cropped to a circle of radius 12.3 cells (481 dots), dot diameter 60% of pitch. A vector glyph (arrow, hourglass, bell with badge, letter M) is rotated by angle each frame and every cell tests whether its rotated position falls inside the shape. Rotation runs from the final angle minus 120 degrees to 30 degrees for the arrow and 0 degrees for the others |
| Sync | Rotation duration lengthens shot by shot (0.8, 1.15, 1.6, 2.0s) and alternates with product close-ups; the crown clicks 30 degrees at 1.5s and 6.1s as the cut lands. On the end card the dots spell Mote letter by letter at 8.8, 8.9, 9.0 and 9.1s while the lights fade out over 0.65s |
| Style | Black circular dot screen behind glass: lit dots white, unlit dots dim `#1a1713`, set in a cream plastic body (`#e3ddd0`) with a knurled aluminium crown on a dark wood table; warm spot lighting (`#ffd0a0`), warm bokeh, ACES tone mapping, 0.4 vignette, light grain. Captions Inter 500 84px and a tagline Inter 400 28px |

## Why it works

Rotation is quantized onto a low-resolution dot matrix, so the motion jumps cell by cell and the edges are jagged, matching how real hardware displays work. Rotation speed drops from shot to shot, so the slowing down itself builds suspense, and alternating dot-matrix shots with expression shots deepens the wait.

## Prompt

> Build a graphic rotation called Dot-Matrix Glyph, 11s, on a physical device shot with a perspective camera (20 degree field) and hard cuts. A black circular screen behind glass holds a 25x25 grid cropped to a circle of radius 12.3 cells (481 dots), dot diameter 60% of the pitch, lit dots white and unlit dots dim #1a1713, set in a cream plastic body (#e3ddd0) with a knurled aluminium crown on a dark wood table, lit by warm spots with bokeh, ACES tone mapping and a 0.4 vignette. Rotate vector glyphs (arrow, hourglass, bell with badge, letter M) by angle every frame and test each cell against the rotated shape: inside lights, outside stays dim, with hard on/off cuts, no glow and jagged edges left visible. Each rotation travels 120 degrees with cubic-bezier(0.16,1,0.3,1) and ends at 30 degrees for the arrow and 0 degrees for the others. Use four wide shots (0-1.4s, 1.85-3.55s, 4.0-6.0s, 6.4-8.8s) with rotation durations of 0.8s, 1.15s, 1.6s and 2.0s, each pushing slowly and linearly, and cut to 0.4-0.45s close-ups of the crown (zoom 3.3-4.8 with depth of field) in between, with the crown clicking 30 degrees at 1.5s and 6.1s. At 8.8s fade the lights out over 0.65s and let the dots spell Mote letter by letter at 8.8, 8.9, 9.0 and 9.1s in a 5x7 pixel font, with captions and a tagline rising with expo.out.

## Often confused with

- [Line Boil](./line-boil.md): Line Boil is a low frame rate that swaps in a new trace each frame; Dot-Matrix Glyph quantizes spatial resolution to a grid of points.
- [Iris Window Montage](./iris-window-montage.md): The window in Iris Window Montage cuts quickly between real images; the round screen in Dot-Matrix Glyph holds a single discretized graphic.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/dot-matrix-glyph/hyperframes.json (318 B)
- ../source/dot-matrix-glyph/index.html (32.3 KB)
- ../source/dot-matrix-glyph/package.json (305 B)

Read `../source/dot-matrix-glyph/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/focus-hop.md
size: 7346
sha: 6bc5733ead44a2323fb645411774cf0de0ed8460
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/focus-hop.md

```text
# Focus Hop

A highlight block or focus frame hops one cell at a time with the cursor, and the frame can take the color of the icon inside it.

- Position in a launch film: Features
- Slug: focus-hop
- Preview video: https://media.motionboard.app/focus-hop.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/focus-hop/
- Film length: 10.8s, 1920x1080
- Original reference: Arc Boosts (YouTube, 0:13) https://www.youtube.com/watch?v=N0jMmiCS8oQ&t=13s
- Original reference: Raycast (YouTube, 0:14) https://www.youtube.com/watch?v=Mi173xGb0ZA&t=14s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/focus-hop/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/focus-hop ./focus-hop`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A highlight block hops down one cell at a time
- The selection frame changes color with the icon
- Wherever the cursor goes, it lights up

## Spec

| Item | Value |
| --- | --- |
| Timing | Window enters 0–0.7s; shelf act: camera push 0.5–1.3s, frame fades in 1.1s, five slides at 1.4, 1.9, 2.4, 2.9, 3.4s (0.25s slide, 8 frames, then 0.25s hold), frame hides 3.95s; grid act: camera drop 3.8–4.6s, cursor arrives 4.2s, highlight hops from 4.7s with 0.22–0.34s dwell (7–10 frames) across 11 cells to 7.34s, click 7.84s, pull-back 8.09–8.89s (0.8s); end card 8.5s, frame hops at 9.05, 9.28, 9.5s; film 10.8s |
| Easing | Grid highlight hops are hard jumps (`tl.set`); shelf slide `expo.out` 0.25s with the frame color tweening `power1.inOut`; camera moves `expo.out` 0.8s; cursor moves `power2.inOut` 0.14–0.2s; click ripple 0.45s, frame `scale 0.975` then `back.out(2.4)` |
| Camera | Cropped close-up at 2.1x on the shelf (drifting to 2.2x `linear` over 2.6s); drops to 2.0x on the grid, follows the cursor row horizontally at 40% of the cell offset, and sinks about 300px over 2.6s; pulls back to the full window at 8.09s |
| Subject | Dark app-store window; shelf of 10 app cards (156×162px, 172px pitch) slides left one card per step under a fixed focus frame on the third slot; grid of 12 extension cells (307×134px, 4 columns) where the highlight hops along a snake path (0, 1, 2, 3, 7, 6, 5, 4, 8, 9, 10) with the cursor following ±8px off center; the last cell's Install chip flips to Installed on the click frame |
| Sync | The frame's outline (2px) and fill (`rgba(r,g,b,0.15)`, plus a `0 0 36px` glow on the grid) take the main color of the icon inside it, tweening through the shelf slide and jumping with each grid hop; the cursor crosses a cell boundary at the midpoint of its move |
| Style | Near-black `#08080a` stage, `#121215` sidebar, gradient app icons; focus frame color follows the icon, 15px corner radius; end card with a four-tile mark and a 76px wordmark |

## Why it works

The highlight block is the strongest color in the frame and leads the eye cell by cell. The focus frame takes its color from what is inside, so the selection state and the content share one palette. The one-cell-per-stop rhythm turns each pause into a choice.

## Prompt

> Show a selection process with a shot called Focus Hop. Open a dark app-store window and push into a horizontal shelf of app cards at 2.1x (expo.out, 0.8s), drifting to 2.2x. A focus frame (2px outline, 15% fill) stays fixed on the third slot and takes the main color of the icon inside it; every 0.5s the cards slide left one slot over 0.25s with expo.out while the frame color tweens to the next icon, five times. Then drop the camera to a 2.0x grid of extension cells, where a highlight hard-hops cell to cell along a snake path with no transition, dwelling 0.22 to 0.34s per cell and taking each icon's color, while the cursor follows with small offsets and the camera follows the row and sinks about 300px. Click the last cell's Install chip: the chip flips to Installed on the click frame, the frame squishes to 0.975 and settles with back.out(2.4). Pull back over 0.8s and close on a four-tile mark where the same frame hops across the tiles.

## Often confused with

- [Multiplayer Cursors](./multiplayer-cursors.md): In Multiplayer Cursors the cursors are characters and perform actions; in Focus Hop the cursor only guides the highlight, and the attention is on the highlight block and focus frame.
- [Auto Zoom / Zoom-to-Cursor](./auto-zoom.md): Auto Zoom moves the camera; in Focus Hop the camera is nearly still and the highlight block moves.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/focus-hop/hyperframes.json (318 B)
- ../source/focus-hop/index.html (37.4 KB)
- ../source/focus-hop/package.json (298 B)

Read `../source/focus-hop/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/foreground-wipe-flash.md
size: 8099
sha: db5cad7578fe1bc815733636f918658c4a2698e7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/foreground-wipe-flash.md

```text
# Foreground Wipe & Flash

A defocused foreground object sweeps across and covers the frame to cut scenes, or a central glow blows out to white before the next scene.

- Position in a launch film: Transitions
- Slug: foreground-wipe-flash
- Preview video: https://media.motionboard.app/foreground-wipe-flash.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/foreground-wipe-flash/
- Film length: 11s, 1920x1080
- Original reference: Linear 发布片 (YouTube, 0:15) https://www.youtube.com/watch?v=lKwyrKUEPS4&t=15s
- Original reference: Linear 发布片 (YouTube, 0:03) https://www.youtube.com/watch?v=lKwyrKUEPS4&t=3s
- Original reference: Linear 发布片 (YouTube, 0:23) https://www.youtube.com/watch?v=lKwyrKUEPS4&t=23s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/foreground-wipe-flash/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/foreground-wipe-flash ./foreground-wipe-flash`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A big blurred ball passes in front of the camera, covers the frame, and the scene changes
- A glow blows out the whole frame and cuts to the next scene
- No hard cuts, only wipes or flashes to connect scenes

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 11s, four scenes: logs explorer 0-2.6s, parameter 2.6-5.1s, trace waterfall 5.1-7.4s, wordmark 7.4-11s. Wipe 1: ball drifts 0-2.4s, sweep 2.4-2.9s (7 frames in, 8 frames out), scene swap at 2.6s. Flash: halo rises 4.83-5.1s (8 frames), swap at 5.1s, white fades 5.1-5.4s (9 frames). Wipe 2: ball drifts to 7.2s, sweep 7.2-7.7s, swap at 7.4s |
| Easing | Wipe enters with `expo.out` over 7 frames (0.233s) and exits right with `power2.in` over 8 frames (0.267s); flash halo rises with `ease: "none"` over 8 frames and falls with `power3.out` (`cubic-bezier(0.33,1,0.68,1)`) over 9 frames; scene camera moves are `ease: "none"` |
| Camera | Scene 1: camera moves right (content x 70 to -60, scale 1.26 to 1.36 over 2.6s) with a 3D tilt easing rotationY 9 to 6 (perspective 1700px). Scene 2: slow push 1.0 to 1.05 over 2.5s. Scene 3: x 70 to -50, scale 1.42 to 1.5, tilt the other way (rotationY -10 to -6). Scene 4: 1.0 to 1.05 over 3.6s |
| Subject | A matte black ball (2800px at scale 0.42-0.45 waiting at the lower left, blur 54px, soft top-left highlight) sweeps across the foreground to the frame center scale 1, then leaves right at scale 1.08. The flash is a 5200px radial gradient halo (white core to 42%) from the frame center scaling 0.05 to 1.5, then a full white plate. Small blurred spheres (150px, 70px, 190px) sit in the lower-right foreground |
| Sync | The scene swap lands on the frame the ball is centered (frame 78 and frame 222) or the frame white is full (frame 153); the ball sweep is 15 frames and the flash 17 frames. The final wordmark scene opens with a white seed glow at 7.4s that fades as the mark sharpens |
| Style | Light scenes: gray studio (`#d7d7d9` to `#bdbdc0`, soft highlight at 68% 36%, 26% edge vignette); dark scenes: radial `#131315` to `#060607`; ball matte black `#09090a` shading to `#5b5b61` highlight; flash pure white. Wordmark Inter 600 190px, letter-spacing -0.045em, `#f4f4f5` |

## Why it works

The transition object comes straight from the current scene (a ball, a halo), so viewers see the transition as part of the camera movement. The whole film uses only these two transitions and very few hard cuts, which keeps continuity in a monochrome style; the switch point lands on a fully covered frame.

## Prompt

> Build transitions between scenes called Foreground Wipe & Flash, 11s: a light gray studio scene (0-2.6s), a dark scene with a large number counting 412 to 38 (2.6-5.1s), a second light studio scene (5.1-7.4s) and a wordmark scene (7.4-11s). Each light scene already contains a large matte black ball (2800px, blur 54px, soft top-left highlight) waiting at the lower left at scale 0.42-0.45 and drifting slowly while the camera moves right with a 3D tilt. At 2.4s the ball sweeps to the frame center at scale 1 with expo.out in 7 frames and exits right to x 3700 at scale 1.08 with power2.in in 8 frames; swap the scene on frame 78 (2.6s) when the ball fills the frame, and the next scene is already in frame as the ball leaves. Between the dark scene and the second light scene use a flash instead: release a 5200px radial white halo from the frame center, scaling 0.05 to 1.5 linearly over 8 frames, set full white one frame before the swap at 5.1s, then fade the white plate over 9 frames with power3.out. Repeat the wipe at 7.2s with the swap on frame 222 (7.4s), then open the wordmark scene with a white seed glow that fades as the mark and wordmark slide into place over 1.3s with expo.out. Use only these transitions in the whole film.

## Often confused with

- [Match Cut](./match-cut.md): Match Cut keeps the anchor still and swaps the object directly; Foreground Wipe & Flash changes scenes on the frame that covers the screen.
- [Mark-to-Wordmark Unfold](./mark-to-wordmark-unfold.md): Mark-to-Wordmark Unfold is often followed by a white flash; the flash itself is only a transition device.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/foreground-wipe-flash/hyperframes.json (318 B)
- ../source/foreground-wipe-flash/index.html (45.8 KB)
- ../source/foreground-wipe-flash/package.json (310 B)

Read `../source/foreground-wipe-flash/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/glass-droplet-split.md
size: 8141
sha: d3760dee764069f2a85a52755aaf24e5c79e14fa
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/glass-droplet-split.md

```text
# Glass Droplet Split

A glass slab stretches into a droplet, its neck thins and breaks, leaving a round bead. A dispersive glass ring contracting inward is the sibling form.

- Position in a launch film: Transitions
- Slug: glass-droplet-split
- Preview video: https://media.motionboard.app/glass-droplet-split.mp4
- Recipe page (preview film and original side by side): https://motionboard.app/recipes/glass-droplet-split/
- Film length: 10s, 1920x1080
- Original reference: Apple iOS 26 Liquid Glass (YouTube, 1:44) https://www.youtube.com/watch?v=jGztGfRujSE&t=104s
- Original reference: Apple AirPods Pro 3 (YouTube, 0:04) https://www.youtube.com/watch?v=EMmKs8vMKhU&t=4s

## How to use this recipe

You are a coding agent. The user wants this shot for their own product. Follow these steps.

1. **Know the product.** If the product is clear from the user's repo or conversation, ask nothing and start. Otherwise ask once for: product name, logo file, brand colors.
2. **Pick the output.** If the user's message says a video or their website, do that. Otherwise ask once which one they want.
   - **Video (HyperFrames).** Copy the folder `../source/glass-droplet-split/` (next to this file in the skill) into the user's working folder, for example `cp -R <skill dir>/source/glass-droplet-split ./glass-droplet-split`. Adapt `index.html` (see "What to adapt"). Run `npx --yes hyperframes@0.8.209 check` on the untouched copy first and note its result. Preview with `npx --yes hyperframes@0.8.209 preview`, render an MP4 with `npx --yes hyperframes@0.8.209 render` (into `renders/`, named with a timestamp). The same commands are in `package.json` as `dev`, `check`, `render`; pass flags after `--`, as in `npm run render -- --quality draft`. Rendering needs network access for web fonts and GSAP.
   - **Website motion.** Port the GSAP timeline in `index.html` into the user's site, using their stack (React, Vue, Svelte, plain HTML). Build the same DOM structure, keep the timeline's durations, delays and easings exactly, and start it when the element scrolls into view (IntersectionObserver or ScrollTrigger). Respect `prefers-reduced-motion: reduce`: show the final frame as a static state and skip the movement.
3. **What to adapt.**
   - **Brand layer** (product name, logo, colors, fonts, copy): replace directly with the user's.
   - **UI layer** (the product screens, cards, windows, controls shown in the shot): rebuild the user's real UI as clean DOM, from their codebase (components, design tokens) or from a screenshot used as reference only. Never paste a screenshot into the shot.
   - **Motion** (timing, easing, camera moves, layering, stagger, order of events): keep exactly as in the source. This is what the recipe is.
   - The timeline targets UI elements by id and class, and camera moves land on fixed coordinates. Keep the ids the timeline uses, keep row counts and text lengths close to the source, and when the layout moves, update the target coordinates without changing the times.
4. **Fonts.** HyperFrames fetches Google Fonts such as Inter on its own. Some sources use macOS local fonts (PingFang, Songti via `local()`). Use the user's brand font when it can be bundled; for a system font such as SF Pro, use Inter. Check that text still fits its boxes.
5. **Verify.** Compare the render with the preview film on the recipe page at the beat times in the Timing row. The beats, timing and camera should match; only brand and UI content differ.

## Matches requests like

- A glass piece stretches into a droplet and then breaks off
- A drop of glass separating from a large piece
- A rainbow-edged ring closing in toward the middle

## Spec

| Item | Value |
| --- | --- |
| Timing | Film 10s. Slab arc slide 0-1.2s, stand up and stretch 1.2-2.2s, neck thins 2.12-2.41s and breaks at 2.41s, bead hovers 2.45-3.45s, bead opens into a ring 3.45-3.75s, ring contracts 3.75-4.55s, settling jitter 4.55-6.75s, ring gathers into a logo bead 6.75-7.35s, wordmark 7.42s and subline 7.8s hold to 10s |
| Easing | Stretch and rotate `cubic-bezier(0.65,0,0.35,1)`; break rebound `cubic-bezier(0.34,1.56,0.64,1)` over 0.5s; ring contraction `cubic-bezier(0.16,1,0.3,1)` over 0.8s; ring gather `cubic-bezier(0.65,0,0.35,1)` over 0.6s; wordmark and subline `expo.out` (0.9s, 0.8s) |
| Camera | Perspective camera (15 degree field) arcs from 101.5 to 90 degrees at radius 1500 over 0-1.2s with ease `1-(1-t)^1.6` while pulling back 200 units, then holds fixed until a 3% push 7.35-10s with `sine.inOut` |
| Subject | A thin glass slab (thickness 0.085 of its width) slides along an arc and rotates upright from 54 degrees about its long axis and -68 degrees roll to 0, thickening to 0.5 and scaling 1 to 1.3. Its lower end stretches to a droplet (lower radius 150 to 270, tip down to -700), the neck thins from radius 18 to 1.6, then breaks at 2.41s with a flash; the lower body falls away and a bead (radius 150 shrinking to 70, about 54px below frame center) swells 5% and rebounds 8% vertically. At 3.45s the bead opens into a ring that contracts from radius 1000 to 350 with tube radius 120 to 34, jitters 5px at 5.5Hz and sprouts up to 18 spikes of 90-240px, then collapses into a 86px logo bead 310px left of center |
| Style | Background `#04060b` with a navy radial pool, a faint grid with crosshairs and ten blurred notification cards (fade in 3.45s) behind the glass; Focus caption 4.35-4.95s. Raymarched glass, IOR 1.47, RGB spread 0.016 growing to 0.12 on the ring, edge highlight only, no fill, no drop shadow, 30% vignette. Wordmark Inter 600 180px, letter-spacing -0.035em, `#eef1f7`; subline Inter 400 28px `#8790a3` |

## Why it works

On an all-black background, a single highlight along the glass edge outlines the shape, with no fill and no shadow. The stretch and break follow surface tension, and the bead rebounds about 5% at the moment of separation; this bead becomes the prototype of the button that follows. The ring version separates the spikes outside the ring from the quiet text inside it, so the graphic itself explains noise reduction.

## Prompt

> Build an abstract graphic called Glass Droplet Split, 10s. Background #04060b with a navy radial pool, a faint grid and ten blurred notification cards that fade in at 3.45s behind the glass. Render raymarched glass (IOR 1.47, RGB spread 0.016), outlined by an edge highlight only, with no fill and no shadow. A thin slab slides along an arc over 1.2s while a perspective camera arcs from 101.5 to 90 degrees and pulls back 200 units (ease 1-(1-t)^1.6), then rotates upright from 54 degrees tilt and -68 degrees roll to 0 over 1.2-2.2s with cubic-bezier(0.65,0,0.35,1), thickening and scaling 1.3x. Its lower end stretches into a droplet, the neck thins from radius 18 to 1.6 starting at 2.12s, and it breaks at 2.41s with a flash; the lower body falls away and the bead swells 5% and rebounds 8% vertically with cubic-bezier(0.34,1.56,0.64,1) over 0.5s, then hovers below center until 3.45s. The bead then opens into a ring (3.45-3.75s) that contracts over 0.8s with cubic-bezier(0.16,1,0.3,1) from radius 1000 to 350 while RGB spread rises to 0.12 and the edge turns iridescent, jitters 5px at 5.5Hz until 6.75s with up to 18 spikes, and collapses over 0.6s into a logo bead 310px left of center. Fade the wordmark in at 7.42s (blur 10px to 0, x -18 to 0, 0.9s expo.out) with a subline at 7.8s, and push the camera in 3% over 7.35-10s with sine.inOut.

## Often confused with

- [Glass Lens](./glass-lens.md): Glass Lens emphasizes refraction of content; Glass Droplet Split emphasizes the glass stretching and breaking.
- [Branching Growth](./branching-growth.md): Branching Growth grows a multi-level structure outward from a point; Glass Droplet Split is one shape shedding one bead.

## Source files

Runnable HyperFrames project, 3 files.

- ../source/glass-droplet-split/hyperframes.json (318 B)
- ../source/glass-droplet-split/index.html (37.4 KB)
- ../source/glass-droplet-split/package.json (308 B)

Read `../source/glass-droplet-split/index.html` in full before adapting it: it holds the whole composition and its GSAP timeline.
```

## File: skills/motionboard/recipes/glass-lens.md
size: 8531
sha: 1c145d247cb4397c716d7daa7237fafab6d7fa4a
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/glass-lens.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/glass-lens.md

## File: skills/motionboard/recipes/index.md
size: 7012
sha: 451b679e8026ed44c8c5a56afe224c7af064bf98
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/index.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/index.md

## File: skills/motionboard/recipes/iris-window-montage.md
size: 7869
sha: ba83cc9c1bfec748acff7ca4fbc09a3c779ffcac
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/iris-window-montage.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/iris-window-montage.md

## File: skills/motionboard/recipes/light-reveal.md
size: 7938
sha: 5afea6c36c42f040696a46f6c85ea084877023ad
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/light-reveal.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/light-reveal.md

## File: skills/motionboard/recipes/line-boil.md
size: 7612
sha: 8cd2e9b7d75f801225b96464b25221c62350d9f5
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/line-boil.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/line-boil.md

## File: skills/motionboard/recipes/locked-layout-reskin.md
size: 6861
sha: c837d89dd83cd0bdc3446ba2aa7ab4f33796b1e7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/locked-layout-reskin.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/locked-layout-reskin.md

## File: skills/motionboard/recipes/macro-pull-out-reveal.md
size: 7926
sha: a2a9f173a277811503f36e74eebf71e69e65154f
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/macro-pull-out-reveal.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/macro-pull-out-reveal.md

## File: skills/motionboard/recipes/map-pin-drop.md
size: 7976
sha: 7eb96c7d9a9121837101cfe5aceee88c6371b571
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/map-pin-drop.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/map-pin-drop.md

## File: skills/motionboard/recipes/mark-to-wordmark-unfold.md
size: 7803
sha: 43a68b96957efe3f60e18987bb024cea06eb287f
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/mark-to-wordmark-unfold.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/mark-to-wordmark-unfold.md

## File: skills/motionboard/recipes/match-cut.md
size: 7685
sha: a6dd91e18a80880f80a777742517793c39c48f1d
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/match-cut.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/match-cut.md

## File: skills/motionboard/recipes/morph-relay.md
size: 7569
sha: 424e6f4b019817df82b29207575c111b200a467a
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/morph-relay.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/morph-relay.md

## File: skills/motionboard/recipes/multiplayer-cursors.md
size: 7618
sha: 4d2281a21c5decb933cb0cdb701ba4c1ea5037c7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/multiplayer-cursors.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/multiplayer-cursors.md

## File: skills/motionboard/recipes/outline-to-solid.md
size: 7177
sha: d59487c324555a0399623ecd20925445cc7f934f
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/outline-to-solid.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/outline-to-solid.md

## File: skills/motionboard/recipes/pile-up-and-clear.md
size: 7458
sha: f5cc0576330dea094e4a664348445f5ad84cd2ef
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/pile-up-and-clear.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/pile-up-and-clear.md

## File: skills/motionboard/recipes/prompt-carousel.md
size: 7621
sha: 8e644a4f6c9532d547a6e02917738c90b08f97c0
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/prompt-carousel.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/prompt-carousel.md

## File: skills/motionboard/recipes/rhythmic-typing.md
size: 7324
sha: fff08decdbefc7962523f3698e3dca8951957a4c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/rhythmic-typing.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/rhythmic-typing.md

## File: skills/motionboard/recipes/rotate-to-lockup.md
size: 7907
sha: 9abd6a93b0694f66c8e09b32107666ccb264db17
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/rotate-to-lockup.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/rotate-to-lockup.md

## File: skills/motionboard/recipes/scattered-spec-type.md
size: 7522
sha: 2bfbb254590ce5bd9e5a142ef22dbe18714a954b
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/scattered-spec-type.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/scattered-spec-type.md

## File: skills/motionboard/recipes/showcase-wall.md
size: 7579
sha: 23615541ddec119819f98a993d7d02e3932e85cb
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/showcase-wall.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/showcase-wall.md

## File: skills/motionboard/recipes/text-object-interleave.md
size: 8432
sha: 4dad43fa3b69f4fb1055f34123e8bada40b1c7e6
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/text-object-interleave.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/text-object-interleave.md

## File: skills/motionboard/recipes/tilted-ui-with-depth-of-field.md
size: 8005
sha: 0bf41d6edcdb3096fcad571a472f02f3c9350b48
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/tilted-ui-with-depth-of-field.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/tilted-ui-with-depth-of-field.md

## File: skills/motionboard/recipes/wireframe-re-layout.md
size: 7253
sha: 87f3f304a249ded8bd288063ca2d96a255bae8eb
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/wireframe-re-layout.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/wireframe-re-layout.md

## File: skills/motionboard/recipes/word-by-word-highlight.md
size: 7214
sha: 832382218d5be1558d3cf1b3db4952b2fee7565c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/word-by-word-highlight.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/word-by-word-highlight.md

## File: skills/motionboard/recipes/x-ray-dissolve.md
size: 7648
sha: de64a3870d731c46b6c372dd62d3348659a4d10b
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/x-ray-dissolve.md

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/recipes/x-ray-dissolve.md

## File: skills/motionboard/source/branching-growth/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/branching-growth/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/branching-growth/index.html
size: 45316
sha: 7a2ac81cb530685e0edfb58e3ab1b25108a31092
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/branching-growth/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/branching-growth/index.html

## File: skills/motionboard/source/branching-growth/package.json
size: 305
sha: 0c3e5de2470cf4b72a10fda740153456927c2936
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/branching-growth/package.json

```text
{
  "name": "branching-growth",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/card-flip-code/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/card-flip-code/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/card-flip-code/index.html
size: 53746
sha: f86bb29dc4f85b45b38d75c6396f10147f1847c7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/card-flip-code/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/card-flip-code/index.html

## File: skills/motionboard/source/card-flip-code/package.json
size: 303
sha: 024f0834bfe10f82840bde63596273d8f919b5d7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/card-flip-code/package.json

```text
{
  "name": "card-flip-code",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/chromatic-stretch/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/chromatic-stretch/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/chromatic-stretch/index.html
size: 19167
sha: 5827fdc1c85a4e25406cfe966838ff724640d03a
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/chromatic-stretch/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/chromatic-stretch/index.html

## File: skills/motionboard/source/chromatic-stretch/package.json
size: 306
sha: 5304cb0c466215d25200c395896a0871aa53620e
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/chromatic-stretch/package.json

```text
{
  "name": "chromatic-stretch",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/confirmation-burst/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/confirmation-burst/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/confirmation-burst/index.html
size: 41619
sha: 201a110a3ec66f293226e76a83ed4ec258ffe189
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/confirmation-burst/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/confirmation-burst/index.html

## File: skills/motionboard/source/confirmation-burst/package.json
size: 307
sha: 021087c838b07f2d8f10a1344d6ace09aabce976
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/confirmation-burst/package.json

```text
{
  "name": "confirmation-burst",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/control-driven/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/control-driven/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/control-driven/index.html
size: 51316
sha: 784f09e69f30e376c0bdeb622669273b21817f62
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/control-driven/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/control-driven/index.html

## File: skills/motionboard/source/control-driven/package.json
size: 303
sha: c49b7a6727e20fbfd835665a4ce648e2d8961f53
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/control-driven/package.json

```text
{
  "name": "control-driven",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/converge-to-mark/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/converge-to-mark/hyperframes.json

```text
{
  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  },
  "media": {
    "autoProxy": true
  }
}
```

## File: skills/motionboard/source/converge-to-mark/index.html
size: 64937
sha: 3c3bde36a26719461662522f62e278dfd47e2307
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/converge-to-mark/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/converge-to-mark/index.html

## File: skills/motionboard/source/converge-to-mark/package.json
size: 305
sha: 0a3e8861c8585d15806db448d2cca44fcd84bf16
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/converge-to-mark/package.json

```text
{
  "name": "converge-to-mark",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "npx --yes hyperframes@0.8.209 preview",
    "check": "npx --yes hyperframes@0.8.209 check",
    "render": "npx --yes hyperframes@0.8.209 render",
    "publish": "npx --yes hyperframes@0.8.209 publish"
  }
}
```

## File: skills/motionboard/source/device-focus/hyperframes.json
size: 353
sha: 6a2a21a5ca33a4c1711b43068e4632553110b8f1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/hyperframes.json

## File: skills/motionboard/source/device-focus/index.html
size: 25694
sha: 598ef2839f289c9936f222847ae91c1e7264bcfd
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/index.html

## File: skills/motionboard/source/device-focus/package.json
size: 301
sha: a89e7d555328b186627956b6f3649e180d423748
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/device-focus/package.json

## File: skills/motionboard/source/dispense-lineup/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/hyperframes.json

## File: skills/motionboard/source/dispense-lineup/index.html
size: 27975
sha: f450fdb27a93b5cffef56f41a3d44e64a33b0128
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/index.html

## File: skills/motionboard/source/dispense-lineup/package.json
size: 304
sha: d802fc2762d6bf966280ffe0ceb1eb3e467f0596
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dispense-lineup/package.json

## File: skills/motionboard/source/dock-arrival/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/hyperframes.json

## File: skills/motionboard/source/dock-arrival/index.html
size: 54168
sha: cf371b2b71f06a391ab19d8b41d8f8eb1e81b9b9
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/index.html

## File: skills/motionboard/source/dock-arrival/package.json
size: 301
sha: 4683329206235416ae6286dc3b28ef8515c37e39
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dock-arrival/package.json

## File: skills/motionboard/source/domino-wave/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/hyperframes.json

## File: skills/motionboard/source/domino-wave/index.html
size: 31450
sha: 33e5e46622cd2fa822abf7c7d229050f1848663b
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/index.html

## File: skills/motionboard/source/domino-wave/package.json
size: 300
sha: a00d064f536429744cefa6bd5f3234542314a4b9
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/domino-wave/package.json

## File: skills/motionboard/source/dot-matrix-glyph/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/hyperframes.json

## File: skills/motionboard/source/dot-matrix-glyph/index.html
size: 33033
sha: 115e3f81356fcadb1e516a08be07afea9c2d4358
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/index.html

## File: skills/motionboard/source/dot-matrix-glyph/package.json
size: 305
sha: d60ab1dc74e5be06d14e843b520240717f41c30c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/dot-matrix-glyph/package.json

## File: skills/motionboard/source/focus-hop/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/hyperframes.json

## File: skills/motionboard/source/focus-hop/index.html
size: 38293
sha: b517cce917fbb2dd08e0e23df4c9cd575f5539ba
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/index.html

## File: skills/motionboard/source/focus-hop/package.json
size: 298
sha: b29507965f5421c4c0e754ed58adec00564bdd36
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/focus-hop/package.json

## File: skills/motionboard/source/foreground-wipe-flash/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/hyperframes.json

## File: skills/motionboard/source/foreground-wipe-flash/index.html
size: 46904
sha: e0fb77ee030d8a536a498e7da5ea4e848ccf58cb
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/index.html

## File: skills/motionboard/source/foreground-wipe-flash/package.json
size: 310
sha: 7d1ee45474b4e459da091c898672ea1acdf1d414
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/foreground-wipe-flash/package.json

## File: skills/motionboard/source/glass-droplet-split/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/hyperframes.json

## File: skills/motionboard/source/glass-droplet-split/index.html
size: 38347
sha: 710d459f8a1f576d6601608b4519636b7d8e2fcc
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/index.html

## File: skills/motionboard/source/glass-droplet-split/package.json
size: 308
sha: 90a5af48a5afff0d7829e9ee11f5db4abea82381
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-droplet-split/package.json

## File: skills/motionboard/source/glass-lens/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/hyperframes.json

## File: skills/motionboard/source/glass-lens/index.html
size: 38831
sha: 20d6204ba9fc9ce90c5cbf2f98ba579021b250d0
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/index.html

## File: skills/motionboard/source/glass-lens/package.json
size: 299
sha: f70aa23961627c2e48ca6107e03ab123eecd8179
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/glass-lens/package.json

## File: skills/motionboard/source/iris-montage/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/hyperframes.json

## File: skills/motionboard/source/iris-montage/index.html
size: 73574
sha: 2eaa2ba19971b3be8ebe2e68c77fa142a41af7b6
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/index.html

## File: skills/motionboard/source/iris-montage/package.json
size: 301
sha: 744e3a0599516e521c42e92ffedadcb0e0859902
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/iris-montage/package.json

## File: skills/motionboard/source/light-reveal/hyperframes.json
size: 353
sha: 6a2a21a5ca33a4c1711b43068e4632553110b8f1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/hyperframes.json

## File: skills/motionboard/source/light-reveal/index.html
size: 35269
sha: c65a5e83073f4484a729dfbf0c1644770b67f510
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/index.html

## File: skills/motionboard/source/light-reveal/package.json
size: 301
sha: ef0267374a0b7778a7c1ed27b82a4c129cfa2ae0
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/light-reveal/package.json

## File: skills/motionboard/source/line-boil/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/hyperframes.json

## File: skills/motionboard/source/line-boil/index.html
size: 45519
sha: a14676f80ee0a6f6138496e45bbac5c3cd488f49
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/index.html

## File: skills/motionboard/source/line-boil/package.json
size: 298
sha: 822eb58f53a58490fc72f0ae083364befeb0a6ca
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/line-boil/package.json

## File: skills/motionboard/source/locked-reskin/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/hyperframes.json

## File: skills/motionboard/source/locked-reskin/index.html
size: 55386
sha: 440e50a56145134badf14f70013e290825cbaeec
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/index.html

## File: skills/motionboard/source/locked-reskin/package.json
size: 302
sha: 6ed8af55ff766411d8b1bff07149d819f0b6f212
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/locked-reskin/package.json

## File: skills/motionboard/source/macro-pull-out/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/hyperframes.json

## File: skills/motionboard/source/macro-pull-out/index.html
size: 44265
sha: 4c133c962edc570652c815e232ce05087f4a360c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/index.html

## File: skills/motionboard/source/macro-pull-out/package.json
size: 303
sha: d88338a4de6601f09fad44d7a65e147dd93e4be6
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/macro-pull-out/package.json

## File: skills/motionboard/source/map-pin-drop/geo.js
size: 4410790
sha: b0483a12c84ed184f976d9c88d684eb9a8c4effd
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/geo.js

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/geo.js

## File: skills/motionboard/source/map-pin-drop/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/hyperframes.json

## File: skills/motionboard/source/map-pin-drop/index.html
size: 27581
sha: 88847bf3cdff1f7bbc760f47bccef9bddcd49b6a
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/index.html

## File: skills/motionboard/source/map-pin-drop/package.json
size: 301
sha: 5113be291389c8fd1bcb68d70fba3906b5e390b5
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/map-pin-drop/package.json

## File: skills/motionboard/source/mark-to-wordmark/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/hyperframes.json

## File: skills/motionboard/source/mark-to-wordmark/index.html
size: 27166
sha: e11d7073e27bd31246c8d77b0d8fdb669ee6c720
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/index.html

## File: skills/motionboard/source/mark-to-wordmark/package.json
size: 305
sha: f668fc15902fb721d9be6a5d9702e25a741f1f82
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/mark-to-wordmark/package.json

## File: skills/motionboard/source/match-cut/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/hyperframes.json

## File: skills/motionboard/source/match-cut/index.html
size: 71985
sha: e051221557bad4992a43487aefe7bceeb88730d7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/index.html

## File: skills/motionboard/source/match-cut/package.json
size: 298
sha: f746861189f4f32ace73a7f0d2efddcdfefee6e8
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/match-cut/package.json

## File: skills/motionboard/source/morph-relay/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/hyperframes.json

## File: skills/motionboard/source/morph-relay/index.html
size: 64454
sha: c2c66a86f40223a8dcf112d1b12b0bcdb6b152a0
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/index.html

## File: skills/motionboard/source/morph-relay/package.json
size: 300
sha: ce49e54fb312b2a75658c647f15d2eb489cf59ec
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/morph-relay/package.json

## File: skills/motionboard/source/multiplayer-cursors/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/hyperframes.json

## File: skills/motionboard/source/multiplayer-cursors/index.html
size: 60884
sha: 978bf4abd28d126c0e47b951df7e000b4248facf
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/index.html

## File: skills/motionboard/source/multiplayer-cursors/package.json
size: 308
sha: bb3bf58cae77a4e5c87c93a506c2f863aa794e41
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/multiplayer-cursors/package.json

## File: skills/motionboard/source/outline-to-solid/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/hyperframes.json

## File: skills/motionboard/source/outline-to-solid/index.html
size: 49596
sha: 54adbdfdbaad2fc24692b05df8610ad5f997cc7d
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/index.html

## File: skills/motionboard/source/outline-to-solid/package.json
size: 305
sha: 3fdef5fe7d0ab50980c2b7601f250263ecd5d58c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/outline-to-solid/package.json

## File: skills/motionboard/source/pile-up-clear/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/hyperframes.json

## File: skills/motionboard/source/pile-up-clear/index.html
size: 40020
sha: 20930c70c4624abdeb35df876408e18f74b654d5
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/index.html

## File: skills/motionboard/source/pile-up-clear/package.json
size: 302
sha: 75bccd3edfd067c18ea3a8f9088e2b8510d131b2
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/pile-up-clear/package.json

## File: skills/motionboard/source/prompt-carousel/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/hyperframes.json

## File: skills/motionboard/source/prompt-carousel/index.html
size: 17947
sha: 8b8c9477f3eca272bd8414e9bb87733f571341aa
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/index.html

## File: skills/motionboard/source/prompt-carousel/package.json
size: 304
sha: a30b95e8d23a314c1e250ec77def5febdef0653f
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/prompt-carousel/package.json

## File: skills/motionboard/source/rhythmic-typing/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/hyperframes.json

## File: skills/motionboard/source/rhythmic-typing/index.html
size: 10598
sha: 95f6dc4107c7e7ea288ef7a03ce2fe569eb8d6f9
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/index.html

## File: skills/motionboard/source/rhythmic-typing/package.json
size: 304
sha: f3669b4697bd50537010cc8ec93ed17345b2c6e2
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rhythmic-typing/package.json

## File: skills/motionboard/source/rotate-to-lockup/hyperframes.json
size: 353
sha: 6a2a21a5ca33a4c1711b43068e4632553110b8f1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/hyperframes.json

## File: skills/motionboard/source/rotate-to-lockup/index.html
size: 21367
sha: dece5c4b1e6a6ae5ac00ff8bb0c00ddaecff5f2c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/index.html

## File: skills/motionboard/source/rotate-to-lockup/package.json
size: 305
sha: ecfb4242247de429669d03d53daf6b34280a14bc
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/rotate-to-lockup/package.json

## File: skills/motionboard/source/scattered-spec/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/hyperframes.json

## File: skills/motionboard/source/scattered-spec/index.html
size: 29446
sha: ad6b71a5fb83ff90e0a46ba07316b990d494302e
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/index.html

## File: skills/motionboard/source/scattered-spec/package.json
size: 303
sha: e6f7f380e50d8b4cdcff3cc11020dcdf7f871701
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/scattered-spec/package.json

## File: skills/motionboard/source/showcase-wall/assets/fonts/bricolage.woff2
size: 27904
sha: f27634943d2fb5cc046cc68f7ca2503d701ab9cd
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/bricolage.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/bricolage.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/cormorant-italic.woff2
size: 24988
sha: e5abf9f6a1fb998432e27fb985f8b3982e647727
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/cormorant-italic.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/cormorant-italic.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/cormorant.woff2
size: 23560
sha: 47ea90f8775a1fe30b63c2ef2048ad57f1ba5652
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/cormorant.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/cormorant.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/dm-sans.woff2
size: 26528
sha: 494e210c57d7f623e04c019c918dca54d5dfe8e3
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/dm-sans.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/dm-sans.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/fraunces-italic.woff2
size: 33868
sha: 660eb282d2e040fd9d6c9af6554df1bbeb267478
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/fraunces-italic.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/fraunces-italic.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/fraunces.woff2
size: 25632
sha: e5bcc9c5516ff5e9ec33bbce160e7b6271cbd7bf
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/fraunces.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/fraunces.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif-italic.woff2
size: 11004
sha: 80f20c0a6ad36706e32e1d0db284cb636131c643
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif-italic.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif-italic.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif.woff2
size: 10376
sha: 35ed1b9a422d0d758d5d22f6a00fc869082f4a02
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/space-grotesk.woff2
size: 14540
sha: ef82ab950151919058957e09532896da174aad29
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/space-grotesk.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/space-grotesk.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/syne.woff2
size: 24808
sha: f08e434e38d90f5a86d17ccd9deaebabf5183141
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/syne.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/syne.woff2

## File: skills/motionboard/source/showcase-wall/assets/fonts/unbounded.woff2
size: 29780
sha: 7a1ab04784f1fbee7edde5fc6286aeba0a642b04
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/unbounded.woff2

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/assets/fonts/unbounded.woff2

## File: skills/motionboard/source/showcase-wall/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/hyperframes.json

## File: skills/motionboard/source/showcase-wall/index.html
size: 168212
sha: 5d3831d7ad41be2577655e477bb0eb2396b7f40d
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/index.html

## File: skills/motionboard/source/showcase-wall/package.json
size: 302
sha: 0dedad572b6719775fc7b84a714de061679888f8
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/showcase-wall/package.json

## File: skills/motionboard/source/text-object-interleave/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/hyperframes.json

## File: skills/motionboard/source/text-object-interleave/index.html
size: 41915
sha: 4f190e0c19c8d121bbc6fb4b26fccb6757efefaa
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/index.html

## File: skills/motionboard/source/text-object-interleave/package.json
size: 311
sha: 3ea2f9a6b6f0faee38e6e7577020d77db805c9f0
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/text-object-interleave/package.json

## File: skills/motionboard/source/tilted-ui/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/hyperframes.json

## File: skills/motionboard/source/tilted-ui/index.html
size: 29272
sha: 528ef1fb7bc94a541217170ab8e5c7172ea246c7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/index.html

## File: skills/motionboard/source/tilted-ui/package.json
size: 298
sha: 399f362c0a9b6795fd802c502c665080a3efe564
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/tilted-ui/package.json

## File: skills/motionboard/source/wireframe-relayout/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/hyperframes.json

## File: skills/motionboard/source/wireframe-relayout/index.html
size: 69195
sha: 1495e3308a6405a782cfc602dafe9b767681a800
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/index.html

## File: skills/motionboard/source/wireframe-relayout/package.json
size: 307
sha: e77c9a5be10e52364cb4b490dd39824b7e65dfb7
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/wireframe-relayout/package.json

## File: skills/motionboard/source/word-highlight/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/hyperframes.json

## File: skills/motionboard/source/word-highlight/index.html
size: 34596
sha: a02c0052f68f8e3c94962a3e68b91fb3d01800fd
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/index.html

## File: skills/motionboard/source/word-highlight/package.json
size: 303
sha: 1dcd3d03a3e967d574b7059c9ebae85c5f4d0081
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/word-highlight/package.json

## File: skills/motionboard/source/x-ray-dissolve/hyperframes.json
size: 353
sha: 6a2a21a5ca33a4c1711b43068e4632553110b8f1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/hyperframes.json

## File: skills/motionboard/source/x-ray-dissolve/index.html
size: 23457
sha: ff40640ac2260fdbedd774bbe16f4b41e1b78fc8
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/index.html

## File: skills/motionboard/source/x-ray-dissolve/internals.js
size: 46538
sha: ba2159dccfef5f6d58f7575ad59b3d1049fb6b5b
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/internals.js

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/internals.js

## File: skills/motionboard/source/x-ray-dissolve/package.json
size: 303
sha: f6f12ac5ef5e00e35d5119f8e72b28f3d9b54fe1
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/package.json

## File: skills/motionboard/source/x-ray-dissolve/strata.js
size: 19153
sha: 2e5e1b9a29cea859c72e25b5a428c263d30cb0f3
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/strata.js

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/x-ray-dissolve/strata.js

## File: skills/motionboard/source/zoom-to-cursor/hyperframes.json
size: 318
sha: dc9ec2eb28c67a93113c201a65a3155a19915d7c
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/hyperframes.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/hyperframes.json

## File: skills/motionboard/source/zoom-to-cursor/index.html
size: 42030
sha: 98da03306da0778a8ba00d8811ba2029b4ffb9f9
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/index.html

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/index.html

## File: skills/motionboard/source/zoom-to-cursor/package.json
size: 303
sha: f62c4b1e91a00791e0918d9bde0a8ef06106f696
upstream: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/package.json

Content is not inlined in the catalog. Read the upstream file: https://github.com/krisyangdev/motionboard/blob/main/skills/motionboard/source/zoom-to-cursor/package.json

## File: README.md
upstream: https://github.com/krisyangdev/motionboard/blob/main/README.md

````text
**English** | [简体中文](README_CN.md)

# Motionboard

Shot language from Apple and Linear launch films, rebuilt in code for your agent.

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
[![Claude Code skill](https://img.shields.io/badge/Claude%20Code-skill-d97757)](#install)
[![Codex skill](https://img.shields.io/badge/Codex-skill-111111)](#install)

[motionboard.app](https://motionboard.app) · [All recipes](https://motionboard.app/#recipes)

[![The Motionboard launch film, built from six recipes](assets/readme/film.gif)](https://motionboard.app)

Motionboard breaks real launch films down into 38 shots. Each shot is recreated in code as a ~10 second [HyperFrames](https://github.com/heygen-com/hyperframes) film (HTML and GSAP rendered to video), and the website shows every original next to its recreation. The skill gives your agent all 38 recipes, so it can make one shot or plan and build a whole launch film for your product.

Requirements: Node 22+, HyperFrames (`npx hyperframes`), ffmpeg.

## Install

```sh
npx skills add krisyangdev/motionboard
```

Or hand the link to your agent:

> Install this skill: https://github.com/krisyangdev/motionboard

Agents installing for a user: run `npx skills add krisyangdev/motionboard -g -y` (global, no prompts). If the skill is not available in the current session yet, read `SKILL.md` at the path the command prints (usually `~/.agents/skills/motionboard/`) and follow it.

In Claude Code, add it as a plugin:

```sh
/plugin marketplace add krisyangdev/motionboard
/plugin install motionboard@motionboard
```

Manual install for Claude Code and Codex:

```sh
git clone https://github.com/krisyangdev/motionboard.git ~/motionboard
ln -s ~/motionboard/skills/motionboard ~/.claude/skills/motionboard
ln -s ~/motionboard/skills/motionboard ~/.codex/skills/motionboard
```

## Use

| Say | What happens |
| --- | --- |
| Make a launch film for my product with Motionboard. | The agent reads your product, proposes a 4 to 6 shot storyboard with preview links, waits for your OK, builds each shot and joins them into one MP4. |
| Use the match-cut recipe to go from my logo to the app. | The agent builds that one shot with your brand and UI, renders it, and checks it against the preview. |
| Make the Tilted UI with Depth of Field shot for this landing page. | The agent ports the recipe's GSAP timeline into your site as a hero animation. |

Each recipe page on [motionboard.app](https://motionboard.app) has a copy button that gives your agent one line: install this skill, then make that shot.

## Recipes

38 recipes, grouped by where they sit in a launch film.

<!-- recipes:start -->

### Opening (7)

| Recipe | Shot |
| --- | --- |
| [Light Reveal](https://motionboard.app/recipes/light-reveal/) | The product emerges from pure black as exposure rises, with a barely perceptible push-in, and the closing shot runs the same move in reverse. |
| [Showcase Wall](https://motionboard.app/recipes/showcase-wall/) | A full-screen wall of work cards drifts diagonally at constant speed while slowly scaling up, then accelerates into one card at the end. |
| [Word-by-Word Highlight](https://motionboard.app/recipes/word-by-word-highlight/) | Words in a small centered line brighten from gray to white one at a time, and the text never moves. |
| [Rhythmic Typing](https://motionboard.app/recipes/rhythmic-typing/) | Monospace text is typed character by character with a cursor at uneven human speed, then deleted and retyped. |
| [Branching Growth](https://motionboard.app/recipes/branching-growth/) | A single dot branches layer by layer into a network, slow at first and then faster, or splits in doubling beats until it fills the frame. |
| [Iris Window Montage](https://motionboard.app/recipes/iris-window-montage/) | A fixed circular window cuts rapidly between images, or revisits the same image, while its size jumps with the rhythm. |
| [Line Boil](https://motionboard.app/recipes/line-boil/) | Hand-drawn outlines swap to a slightly different trace every few frames, and motion steps at a low frame rate with no tweening. |

### Product reveal (7)

| Recipe | Shot |
| --- | --- |
| [Device Push-in Focus](https://motionboard.app/recipes/device-push-in-focus/) | A line-art 3D laptop turns upright while closed, opens, pushes in on the keyboard, then pans from key to key in step with the option selected in the UI beside it. |
| [Macro Pull-out Reveal](https://motionboard.app/recipes/macro-pull-out-reveal/) | The camera drifts slowly across a surface at extreme close range, then one pull-back reveals the whole device or page. |
| [X-ray Dissolve](https://motionboard.app/recipes/x-ray-dissolve/) | The internal structure and the outer shell cross-dissolve from the same camera position, then the camera pulls back to the whole device. |
| [Text–Object Interleave](https://motionboard.app/recipes/text-object-interleave/) | Text and object interleave in depth: type rises from behind the product, a device slots into a gap in a sentence, or a word passes through an object and comes out as another word. |
| [Outline to Solid](https://motionboard.app/recipes/outline-to-solid/) | A wireframe or light-drawn outline appears first, then fills into a solid shape or material. |
| [Tilted UI with Depth of Field](https://motionboard.app/recipes/tilted-ui-with-depth-of-field/) | A UI plane tilted 10–15° and shot up close, with only the active row in focus and the rest blurred. |
| [Dock Arrival](https://motionboard.app/recipes/dock-arrival/) | A magnified Dock opens a gap, a new icon grows into it with one small spark, and a cursor click opens the window. |

### Features (15)

| Recipe | Shot |
| --- | --- |
| [Dispense Line-up](https://motionboard.app/recipes/dispense-line-up/) | Accessories slide out of the main object one by one into a row while the caption appears word by word, then retract in mirror order. |
| [Auto Zoom / Zoom-to-Cursor](https://motionboard.app/recipes/auto-zoom/) | The camera pushes to the target element in 0.4–0.8s, holds for one click or input, then pulls back to the full view. |
| [Morph Relay](https://motionboard.app/recipes/morph-relay/) | One element keeps morphing into the next, replacing cuts, so the whole sequence has no hard cut. |
| [Wireframe Re-layout](https://motionboard.app/recipes/wireframe-re-layout/) | Content fades to wireframes, the wireframes re-flow into a new layout, then each cell fills with new content in turn. |
| [Card Flip to Code](https://motionboard.app/recipes/card-flip-to-code/) | The preview card rotates 180° around the Y axis and its back face shows the code. |
| [Control-Driven Change](https://motionboard.app/recipes/control-driven-change/) | The frame a control (color picker, toggle, dial) lands, the page result changes on that same frame. It can be split-screen with the control on the left and the result on the right. |
| [Multiplayer Cursors](https://motionboard.app/recipes/multiplayer-cursors/) | Enlarged two-color named cursors move across a canvas, leave comments, and drag items to reorder. |
| [Focus Hop](https://motionboard.app/recipes/focus-hop/) | A highlight block or focus frame hops one cell at a time with the cursor, and the frame can take the color of the icon inside it. |
| [Pile-up and Clear](https://motionboard.app/recipes/pile-up-and-clear/) | Tasks, tags, or events pile up one by one until the screen is full, then clear in one step to a single result state. |
| [Prompt Carousel](https://motionboard.app/recipes/prompt-carousel/) | A line under the headline thickens into a pill, becomes an input box, and types a list of prompts that scroll vertically. |
| [Scattered Spec Type](https://motionboard.app/recipes/scattered-spec-type/) | A spec line is split into words placed far apart on uneven baselines, with a connector word stepping up letter by letter. |
| [Glass Lens](https://motionboard.app/recipes/glass-lens/) | A transparent glass disc, loupe, or control moves over content, magnif
````