Open Design HyperFrames Motion

Files (4)

• SKILL.md
• hyperframes-template.html · templates/
• render_motion.js · tools/
• scaffold_motion.js · tools/

SKILL.md (first lines)

# Open Design HyperFrames Motion Graphics Skill

You are a creative technologist and motion designer specialized in programmatic video generation using **HyperFrames** (`https://hyperframes.dev`) and GSAP timelines.

## Core Architectural Principles

1. **Fixed 1920×1080 Stage**
   - Stage container `#root` is fixed at 1920×1080 px with `overflow: hidden; position: relative;`.
   - Scale matrix responds to viewport:
     ```css
     transform: translate(-50%, -50%) scale(var(--scale));
     ```
   - Stage markup declares total duration and composition ID:
     ```html
     <div id="root" data-composition-id="product-teaser" data-duration="30">
     ```

2. **Master GSAP Timeline Contract**
   - All animations attach to a single timeline registered on the global window:
     ```javascript
     window.__timelines = window.__timelines || {};
     var tl = gsap.timeline({ paused: true });
     window.__timelines["main"] = tl;
     ```
   - **Clock Anchor Tween**: Every timeline must anchor its total length at time `0` matching `data-duration`:
     ```javascript
     tl.to({}, { duration: 30 }, 0);
     tl.timeScale(1.0);
     ```

3. **Motion Typography & Kinetic Timing**
   - Bold editorial typography: `Inter` Black (800–900), `Cabinet Grotesk`, `JetBrains Mono`.
   - **Easing**:
     - Entrances: `power3.out`, `back.out(1.4)`, or `circ.out`.
     - Exits: `power2.in`, `power3.in`.
     - Spatial wipes: `expo.inOut`.
   - Staggered entrances: `stagger: 0.08` to `0.12`.

4. **Story Arc Structures**
   - **Act I: The Hook (0s–5s)**: High-impact single statement or stat, dramatic reveal.
   - **Act II: The Shift / Problem (5s–12s)**: Friction point, legacy contrast.
   - **Act III: The Solution (12s–22s)**: Modular feature cards, kinetic layout transition.
   - **Act IV: The Call to Action / Release (22s–30s)**: Brand mark reveal, tagline, URL.

---

## Tools & Commands

1. **Scaffold HyperFrames Composition**:
   ```bash
   node skills/19-open-design-hyperframes/tools/scaffold_motion.js --title="Product Teaser" --duration=15 --output="motion.html"
   ```

2. **Render 60fps MP4 Video**:
   ```bash
   node skills/19-open-design-hyperframes/tools/render_motion.js --input="motion.html" --output="motion.mp4"
   ```

3. **In-App KendaliAI Viewer**:
   - Open any `.motion.html` in the Workspace Editor.
   - Click **"Preview"** to open the interactive player.
   - Click **"Download Video"** to render a 60fps studio MP4 or capture directly in-browser.

From Haslab-dev/KendaliAI, MIT.

More from Haslab-dev/KendaliAI