motionboard

169 files shipped with this skill. Inline text is the catalog copy. The upstream link is the source repository.

• skills/motionboard/SKILL.md12 KBb33778b31b46upstream ↗

  ---
  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.
  

• skills/motionboard/recipes/auto-zoom.md7.4 KB93faa27febcfupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/branching-growth.md8.1 KB122ea47880bcupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/card-flip-to-code.md6.8 KBb1b6e962874fupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/chromatic-stretch.md7.2 KB8c3bd1986202upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/confirmation-burst.md8.3 KBcd0ecddfc7c8upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/control-driven-change.md7.1 KB49a25d9ed74eupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/converge-to-mark.md7.6 KB6379629a2c8aupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/device-push-in-focus.md7.0 KB8b40e5878a95upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/dispense-line-up.md7.5 KB94147cf0777eupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/dock-arrival.md7.1 KB22dcb813a3acupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/domino-wave.md7.7 KBf86aff390f38upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/dot-matrix-glyph.md7.8 KB1740a146c99aupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/focus-hop.md7.2 KB6bc5733ead44upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/foreground-wipe-flash.md7.9 KBdb5cad7578feupstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/glass-droplet-split.md8.0 KBd3760dee7640upstream ↗

  # 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 [email protected] check` on the untouched copy first and note its result. Preview with `npx --yes [email protected] preview`, render an MP4 with `npx --yes [email protected] 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.
  

• skills/motionboard/recipes/glass-lens.md8.3 KB1c145d247cb4upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/index.md6.8 KB451b679e8026upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/iris-window-montage.md7.7 KBba83cc9c1bfeupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/light-reveal.md7.8 KB5afea6c36c42upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/line-boil.md7.4 KB8cd2e9b7d75fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/locked-layout-reskin.md6.7 KBc837d89dd83cupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/macro-pull-out-reveal.md7.7 KBa2a9f173a277upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/map-pin-drop.md7.8 KB7eb96c7d9a91upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/mark-to-wordmark-unfold.md7.6 KB43a68b96957eupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/match-cut.md7.5 KBa6dd91e18a80upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/morph-relay.md7.4 KB424e6f4b0198upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/multiplayer-cursors.md7.4 KB4d2281a21c5dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/outline-to-solid.md7.0 KBd59487c32455upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/pile-up-and-clear.md7.3 KBf5cc0576330dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/prompt-carousel.md7.4 KB8e644a4f6c95upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/rhythmic-typing.md7.2 KBfff08decdbefupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/rotate-to-lockup.md7.7 KB9abd6a93b069upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/scattered-spec-type.md7.3 KB2bfbb254590cupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/showcase-wall.md7.4 KB23615541ddecupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/text-object-interleave.md8.2 KB4dad43fa3b69upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/tilted-ui-with-depth-of-field.md7.8 KB0bf41d6edcdbupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/wireframe-re-layout.md7.1 KB87f3f304a249upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/word-by-word-highlight.md7.0 KB832382218d5bupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/recipes/x-ray-dissolve.md7.5 KBde64a3870d73upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/branching-growth/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/branching-growth/index.html44 KB7a2ac81cb530upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/branching-growth/package.json305 B0c3e5de2470cupstream ↗

  {
    "name": "branching-growth",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/card-flip-code/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/card-flip-code/index.html52 KBf86bb29dc4f8upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/card-flip-code/package.json303 B024f0834bfe1upstream ↗

  {
    "name": "card-flip-code",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/chromatic-stretch/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/chromatic-stretch/index.html19 KB5827fdc1c85aupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/chromatic-stretch/package.json306 B5304cb0c4662upstream ↗

  {
    "name": "chromatic-stretch",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/confirmation-burst/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/confirmation-burst/index.html41 KB201a110a3ec6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/confirmation-burst/package.json307 B021087c838b0upstream ↗

  {
    "name": "confirmation-burst",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/control-driven/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/control-driven/index.html50 KB784f09e69f30upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/control-driven/package.json303 Bc49b7a6727e2upstream ↗

  {
    "name": "control-driven",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/converge-to-mark/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  {
    "$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
    }
  }
  

• skills/motionboard/source/converge-to-mark/index.html63 KB3c3bde36a267upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/converge-to-mark/package.json305 B0a3e8861c858upstream ↗

  {
    "name": "converge-to-mark",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "npx --yes [email protected] preview",
      "check": "npx --yes [email protected] check",
      "render": "npx --yes [email protected] render",
      "publish": "npx --yes [email protected] publish"
    }
  }
  

• skills/motionboard/source/device-focus/hyperframes.json353 B6a2a21a5ca33upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/device-focus/index.html25 KB598ef2839f28upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/device-focus/package.json301 Ba89e7d555328upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dispense-lineup/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dispense-lineup/index.html27 KBf450fdb27a93upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dispense-lineup/package.json304 Bd802fc2762d6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dock-arrival/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dock-arrival/index.html53 KBcf371b2b71f0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dock-arrival/package.json301 B468332920623upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/domino-wave/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/domino-wave/index.html31 KB33e5e46622cdupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/domino-wave/package.json300 Ba00d064f5364upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dot-matrix-glyph/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dot-matrix-glyph/index.html32 KB115e3f81356fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/dot-matrix-glyph/package.json305 Bd60ab1dc74e5upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/focus-hop/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/focus-hop/index.html37 KBb517cce917fbupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/focus-hop/package.json298 Bb29507965f54upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/foreground-wipe-flash/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/foreground-wipe-flash/index.html46 KBe0fb77ee030dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/foreground-wipe-flash/package.json310 B7d1ee45474b4upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-droplet-split/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-droplet-split/index.html37 KB710d459f8a1fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-droplet-split/package.json308 B90a5af48a5afupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-lens/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-lens/index.html38 KB20d6204ba9fcupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/glass-lens/package.json299 Bf70aa2396162upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/iris-montage/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/iris-montage/index.html72 KB2eaa2ba19971upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/iris-montage/package.json301 B744e3a059951upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/light-reveal/hyperframes.json353 B6a2a21a5ca33upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/light-reveal/index.html34 KBc65a5e83073fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/light-reveal/package.json301 Bef0267374a0bupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/line-boil/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/line-boil/index.html44 KBa14676f80ee0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/line-boil/package.json298 B822eb58f53a5upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/locked-reskin/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/locked-reskin/index.html54 KB440e50a56145upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/locked-reskin/package.json302 B6ed8af55ff76upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/macro-pull-out/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/macro-pull-out/index.html43 KB4c133c962edcupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/macro-pull-out/package.json303 Bd88338a4de66upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/map-pin-drop/geo.js4.2 MBb0483a12c84eupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/map-pin-drop/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/map-pin-drop/index.html27 KB88847bf3cdffupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/map-pin-drop/package.json301 B5113be291389upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/mark-to-wordmark/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/mark-to-wordmark/index.html27 KBe11d7073e27bupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/mark-to-wordmark/package.json305 Bf668fc15902fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/match-cut/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/match-cut/index.html70 KBe051221557baupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/match-cut/package.json298 Bf746861189f4upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/morph-relay/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/morph-relay/index.html63 KBc2c66a86f402upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/morph-relay/package.json300 Bce49e54fb312upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/multiplayer-cursors/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/multiplayer-cursors/index.html59 KB978bf4abd28dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/multiplayer-cursors/package.json308 Bbb3bf58cae77upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/outline-to-solid/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/outline-to-solid/index.html48 KB54adbdfdbaadupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/outline-to-solid/package.json305 B3fdef5fe7d0aupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/pile-up-clear/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/pile-up-clear/index.html39 KB20930c70c462upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/pile-up-clear/package.json302 B75bccd3edfd0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/prompt-carousel/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/prompt-carousel/index.html18 KB8b8c9477f3ecupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/prompt-carousel/package.json304 Ba30b95e8d23aupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rhythmic-typing/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rhythmic-typing/index.html10 KB95f6dc4107c7upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rhythmic-typing/package.json304 Bf3669b4697bdupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rotate-to-lockup/hyperframes.json353 B6a2a21a5ca33upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rotate-to-lockup/index.html21 KBdece5c4b1e6aupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/rotate-to-lockup/package.json305 Becfb4242247dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/scattered-spec/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/scattered-spec/index.html29 KBad6b71a5fb83upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/scattered-spec/package.json303 Be6f7f380e50dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/bricolage.woff227 KBf27634943d2fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/cormorant-italic.woff224 KBe5abf9f6a1fbupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/cormorant.woff223 KB47ea90f8775aupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/dm-sans.woff226 KB494e210c57d7upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/fraunces-italic.woff233 KB660eb282d2e0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/fraunces.woff225 KBe5bcc9c5516fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif-italic.woff211 KB80f20c0a6ad3upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/instrument-serif.woff210 KB35ed1b9a422dupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/space-grotesk.woff214 KBef82ab950151upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/syne.woff224 KBf08e434e38d9upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/assets/fonts/unbounded.woff229 KB7a1ab04784f1upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/index.html164 KB5d3831d7ad41upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/showcase-wall/package.json302 B0dedad572b67upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/text-object-interleave/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/text-object-interleave/index.html41 KB4f190e0c19c8upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/text-object-interleave/package.json311 B3ea2f9a6b6f0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/tilted-ui/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/tilted-ui/index.html29 KB528ef1fb7bc9upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/tilted-ui/package.json298 B399f362c0a9bupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/wireframe-relayout/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/wireframe-relayout/index.html68 KB1495e3308a64upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/wireframe-relayout/package.json307 Be77c9a5be10eupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/word-highlight/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/word-highlight/index.html34 KBa02c0052f68fupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/word-highlight/package.json303 B1dcd3d03a3e9upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/x-ray-dissolve/hyperframes.json353 B6a2a21a5ca33upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/x-ray-dissolve/index.html23 KBff40640ac226upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/x-ray-dissolve/internals.js45 KBba2159dccfefupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/x-ray-dissolve/package.json303 Bf6f12ac5ef5eupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/x-ray-dissolve/strata.js19 KB2e5e1b9a29ceupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/zoom-to-cursor/hyperframes.json318 Bdc9ec2eb28c6upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/zoom-to-cursor/index.html41 KB98da03306da0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• skills/motionboard/source/zoom-to-cursor/package.json303 Bf62c4b1e91a0upstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

• README.mdupstream ↗

  Contents are not inlined in the catalog. Open the upstream file.

Plain-text copy, no login: /skill-bundles/krisyangdev-motionboard-skills-motionboard.md