[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1210":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},1210,"hyperframes-student-kit","nateherkai\u002Fhyperframes-student-kit","nateherkai","HTML-native motion-graphics video workspace — 12 finished projects built on Hyperframes + GSAP. A teaching kit for students learning to build motion-graphics video pipelines end-to-end.",null,"HTML",437,161,4,1,0,13,36,107,39,6.63,"Other",false,"main",[],"2026-06-12 02:00:24","# Hyperframes Editor — Student Edition\n\nA workbench for building motion-graphics video pipelines in **plain HTML + GSAP**, powered by [Hyperframes](https:\u002F\u002Fhyperframes.heygen.com). Twelve finished video projects you can clone, scrub through, rip apart, and rebuild as your own.\n\n> This is **not** a Remotion \u002F React \u002F Next.js video stack. Every composition in this repo is a regular HTML file with a paused GSAP timeline attached to `window.__timelines`. The Hyperframes CLI handles lint, preview, and render.\n\n---\n\n## Who this is for\n\nStudents who want to learn how professional short-form and promo video gets built end-to-end — storyboard, brand system, motion graphics, audio sync, render pipeline — by reverse-engineering real projects. Every project here shipped (or almost shipped). Scrub the compositions, read the HANDOFF\u002FSTORYBOARD docs, play the `final.mp4`, then change things and see what breaks.\n\n## Prerequisites\n\n- **Node 20+** — run `node --version` to check\n- **FFmpeg** on your `PATH` — needed for audio extraction and re-encoding\n- **Chrome (latest)** — Hyperframes renders through a headless Chromium\n- **~5 GB free disk** — node_modules is chunky; renders are bigger\n- **16 GB RAM recommended** for smooth Studio preview with multiple shader blocks\n\nRun `npx hyperframes doctor` after `npm install` — it reports what's missing.\n\n## Quickstart\n\n```bash\ngit clone \u003Cyour-fork-url> hyperframes-editor\ncd hyperframes-editor\nnpm install\n\n# Optional — only if you want to use the ClickUp \u002F OpenAI integrations\ncp .env.example .env\n# ...then edit .env with your own keys\n\n# Open Studio on one of the included projects\ncd video-projects\u002Fmay-shorts-19\nnpx hyperframes preview    # http:\u002F\u002Flocalhost:3002\n```\n\nStudio hot-reloads on file save. Scrub the timeline, inspect scenes, change colors, watch it re-render live.\n\n## Repo layout\n\n```\nhyperframes-editor\u002F\n├── README.md                    ← you are here\n├── LICENSE                      ← MIT (see note on brand assets)\n├── .env.example                 ← copy to .env, fill in your own keys\n├── CLAUDE.md                    ← full workspace guide for Claude Code users\n├── AGENTS.md                    ← agent-delegation notes\n├── MOTION_PHILOSOPHY.md         ← the motion aesthetic this repo aspires to\n├── DESIGN.ais-example.md        ← the AIS brand spec — your worked example\n├── assets\u002F                      ← shared brand examples (AIS logo + tokens)\n│   ├── AIS Logo PNG.png\n│   ├── AIS Background.png\n│   ├── AIS Brand Guideline Small.jpg\n│   └── brand-tokens.css         ← CSS custom props every comp can import\n├── docs\u002F                        ← longer-form specs + plans\n├── scripts\u002F                     ← workspace-level preflight scripts\n├── .claude\u002F                     ← Claude Code skills (drop-in slash commands)\n│   ├── launch.json\n│   └── skills\u002F                  ← \u002Fhyperframes, \u002Fgsap, \u002Fmake-a-video, etc.\n├── package.json\n└── video-projects\u002F              ← the 13 projects\n    └── \u003Cproject>\u002F\n        ├── index.html           ← root composition entry\n        ├── compositions\u002F        ← sub-comps loaded via data-composition-src\n        ├── assets\u002F              ← video, audio, images, transcripts\n        ├── final.mp4            ← the target output — watch this first\n        ├── renders\u002F             ← your local render scratch (gitignored)\n        ├── hyperframes.json     ← CLI config (paths relative to this folder)\n        ├── meta.json            ← id \u002F name \u002F dimensions \u002F fps\n        └── (STORYBOARD.md, HANDOFF.md, NOTES.md as applicable)\n```\n\n## The 12 projects, at a glance\n\nStart by opening each `final.mp4` to see the target, then open `index.html` to see how it's built.\n\n### Short-form vertical (9:16, 1080×1920)\n| Project | What it is |\n|---|---|\n| `may-shorts-19` | TikTok-style talking-head + motion graphics + karaoke captions. This one has the most polish — the `\u002Fshort-form-video` skill was written around it. |\n| `may-shorts-18` | Earlier short in the same series. Compare v2 vs may-shorts-19 to see what got refined. |\n\n### Short-form landscape (16:9)\n| Project | What it is |\n|---|---|\n| `may-shorts-6` | Landscape cut of a talking-head short, same production pattern as the vertical series. |\n\n### Product promos\n| Project | What it is |\n|---|---|\n| `clickup-demo` | 60s SaaS product demo — heavy registry-block use (x-post, ui-3d-reveal). Five render versions show the iteration curve. |\n| `linear-promo-30s` | 30s Linear-style promo in the Infinite Payments aesthetic. Ships as a draft — finishing it is a good student exercise. See `NOTES.md`. |\n| `hyperframes-sizzle` | Hyperframes × Claude Code sizzle reel. Uses the `\u002Fwebsite-to-hyperframes` flow. |\n| `first-agent-promo` | 32s \"Your First AI Agent\" launch film. Uses a React-via-Babel approach instead of the standard HTML pattern — a useful counter-example. |\n\n### Educational lessons\n| Project | What it is |\n|---|---|\n| `aisoc-lesson-5-1` | Full lesson video (face-cam + motion graphics). See CLAUDE.md for the new-lesson pipeline (transcribe → word-synced MG → sections). |\n| `golden-ratio-demo` | AIS lesson on proportion in layout. Ships as a polished draft — see `NOTES.md` for what was left open. |\n| `claude-edit-intro` | Promo-style intro to an editing workflow; minimal brand hardcoding — easy starting template. |\n\n### Brand hype \u002F launch\n| Project | What it is |\n|---|---|\n| `aisoc-hype` | 30s AI Automation Society brand hype film — the scaffold many other AIS projects reference. |\n| `aisoc-app-release` | 30s AIS mobile app release promo. Read `HANDOFF.md` — Nate documented every footgun. |\n\n## ⚠️ Customizing for your brand\n\n**This is the most important section.** The repo ships with AI Automation Society (AIS) branding baked in as a worked example. Before you use any of this for your own work, swap these out:\n\n### The global swap list\n\n| File | What it is | What to do |\n|---|---|---|\n| `assets\u002Fbrand-tokens.css` | Defines `--ais-bg`, `--ais-accent`, `--ais-warn`, font variables | Replace hex values + font families with your own. Consider renaming the custom-prop prefix to your brand (`--acme-bg`, etc.) — but then you'll need to grep every composition for the old names. |\n| `assets\u002FAIS Logo PNG.png` | Logo used by AIS projects | Drop your own logo in; either keep the filename so existing references work, or rename and grep-replace. |\n| `assets\u002FAIS Background.png` | Background image occasionally used in AIS scenes | Same pattern as logo. |\n| `assets\u002FAIS Brand Guideline Small.jpg` | Reference image for the AIS brand | Delete; replace with your own guideline image if you have one. |\n| `DESIGN.ais-example.md` | Full AIS brand spec | **Don't edit.** Use it as your template: copy it to your new project folder as `DESIGN.md` and rewrite colors, fonts, motion rules, and \"What NOT to Do\" for your brand. |\n\n### Per-project AIS coupling\n\n| Project | AIS coupling | Treat as |\n|---|---|---|\n| `aisoc-hype`, `aisoc-app-release`, `aisoc-lesson-5-1`, `golden-ratio-demo` | **Heavy** — hex values hardcoded in compositions, `@aiautomationsociety` handle, AIS logo glow recipe, Nate's on-camera identity in some scenes | Reference only. Rebuild from scratch for your brand. |\n| `clickup-demo`, `first-agent-promo`, `hyperframes-sizzle`, `linear-promo-30s`, `may-shorts-*`, `context-session`, `claude-edit-intro` | **Minimal** | Good starting templates — swap the brand tokens and you're mostly there. |\n\n### Find-and-fix sweep\n\nAfter you've swapped the global assets, run this grep to find any AIS references still living in compositions:\n\n```bash\n# Finds hardcoded hex values and AIS strings anywhere in video-projects\u002F\ngrep -rEn \"(#37bdf8|#f09025|#07121c|#195066|aisoc|AIS Logo|@aiautomationsociety)\" video-projects\u002F\n```\n\nReplace each hit either with the matching CSS custom prop from your new `brand-tokens.css`, or with your own hex\u002Fhandle.\n\n## Creating your own new video project\n\n1. Pick a kebab-case name: `mkdir video-projects\u002Fmy-brand-promo`\n2. Scaffold with the CLI or copy a sibling:\n   ```bash\n   cd video-projects\u002Fmy-brand-promo\n   npx hyperframes init\n   ```\n   Or, faster: copy the `hyperframes.json` + `meta.json` from a sibling project you like, edit `meta.json` for your new id\u002Fname\u002Fdimensions, and start on `index.html` from scratch.\n3. Install the shared brand assets into your project:\n   ```bash\n   cp ..\u002F..\u002Fassets\u002Fbrand-tokens.css assets\u002F\n   cp ..\u002F..\u002Fassets\u002FYourLogo.png assets\u002F\n   ```\n4. Write your `DESIGN.md` (copy the shape of `DESIGN.ais-example.md` from the root).\n5. Build. Preview. Lint. Render.\n\n## The authoring loop\n\n```\nedit → lint → preview (Studio, live) → draft render → verify frames → final render\n```\n\n| Step | Command | What to check |\n|---|---|---|\n| Lint | `npx hyperframes lint` | Zero errors before you preview. Warnings are survivable. |\n| Preview | `npx hyperframes preview` | Scrub the timeline, fix anything weird live. Hot reload works. |\n| Draft render | `npx hyperframes render --quality draft --output renders\u002Fdraft.mp4` | ~1–3 minutes. CRF 28 — pixelated but fast. |\n| Verify frames | `ffmpeg -ss \u003Ct> -i renders\u002Fdraft.mp4 -frames:v 1 out.png` | Pull one frame per scene at its hero moment. Look for cropped faces, misaligned text, blank frames. |\n| Final render | `npx hyperframes render --quality standard --output renders\u002Ffinal.mp4` | Visually lossless 1080p. Ship this. |\n\n> **`MOTION_PHILOSOPHY.md` is your aesthetic gym.** Before you build anything, read section 0 (the 10 Laws) and section 4 (pre-flight checklist). This doc is the difference between \"it rendered\" and \"it's good.\"\n\n## Recommended reading order\n\n1. **This README** (you're here)\n2. **`CLAUDE.md`** — full workspace guide, conventions, skills, render contract. Useful even if you're not using Claude Code — the 11 Render Contract rules apply to anyone editing a composition.\n3. **`MOTION_PHILOSOPHY.md`** — aesthetic rules. Read before brainstorming your first scene.\n4. **`DESIGN.ais-example.md`** — worked example of a brand spec.\n5. **Pick one generic project** (`claude-edit-intro` is a good start). Open `index.html`, `final.mp4` side by side, and the `compositions\u002F` folder. Read, scrub, modify, re-render.\n6. **Then open an AIS project** — you'll have the vocabulary to see how far they push the framework.\n\n## Using Claude Code with this repo\n\nThe `.claude\u002Fskills\u002F` folder ships a set of slash commands that encode framework-specific patterns (`window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS). If you use [Claude Code](https:\u002F\u002Fclaude.com\u002Fclaude-code), these unlock automatically:\n\n- `\u002Fhyperframes` — authoring\u002Fediting compositions, captions, TTS, audio-reactive animation\n- `\u002Fhyperframes-cli` — CLI reference (init, add, lint, preview, render, transcribe, tts)\n- `\u002Fgsap` — GSAP animation: timelines, easing, stagger, plugins\n- `\u002Fhyperframes-registry` — install catalog blocks\u002Fcomponents\n- `\u002Fwebsite-to-hyperframes` — turn a URL into a composition (7-step capture-to-video)\n- `\u002Fmake-a-video` — end-to-end beginner flow\n- `\u002Fshort-form-video` — 9:16 talking-head + motion graphics playbook\n\nNot a Claude Code user? The skills are just markdown — open them up and read as documentation.\n\n## Troubleshooting\n\n| Symptom | First thing to try |\n|---|---|\n| `npx hyperframes` — command not found | `npm install` in the repo root first |\n| Render fails mid-way | `npx hyperframes doctor` — verifies Node, FFmpeg, Chrome |\n| Studio preview stuck at 0s | Hard-refresh the browser (Ctrl+Shift+R). If that fails, try a specific sub-composition URL: `http:\u002F\u002Flocalhost:3002\u002F?comp=\u003Csub-comp-id>` |\n| Lint errors about overlapping clips | Two clips on the same `data-track-index` overlap in time — assign different track indices or adjust `data-start` \u002F `data-duration` |\n| Lint errors about `missing_gsap_script` | Every sub-composition HTML needs its own `\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3.14.2\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>` before its IIFE — GSAP doesn't inherit from the parent |\n| Video frozen in a render, audio continues | A `\u003Cvideo>` element was animated directly (don't animate `width`\u002F`height`\u002F`top`\u002F`left` on a `\u003Cvideo>`). Wrap it in a `\u003Cdiv>` and animate the wrapper. |\n\nMore: `npx hyperframes docs \u003Ctopic>` (topics: `data-attributes`, `gsap`, `rendering`, `examples`, `troubleshooting`, `compositions`).\n\n## Credits and license\n\n- **Code and compositions** — MIT, see `LICENSE`.\n- **AIS brand assets** (logo, background, brand guideline image, AIS tokens) — remain the property of AI Automation Society. Included as a worked example; not licensed for reuse. Replace them with your own before shipping.\n- **Hyperframes** — framework © HeyGen, docs at https:\u002F\u002Fhyperframes.heygen.com.\n\nBuilt by [Nate Herk](https:\u002F\u002Faiautomationsociety.ai). Have fun ripping it apart.\n","Hyperframes Student Kit 是一个基于纯 HTML 和 GSAP 的动态图形视频工作空间，包含12个已完成的项目，旨在帮助学生从头到尾学习构建动态图形视频管道。该项目的核心功能包括使用 Hyperframes CLI 进行代码检查、预览和渲染，并且每个项目都是一个普通的 HTML 文件，带有暂停的 GSAP 时间线。适合那些希望深入了解专业短片和宣传视频制作全过程的学生，通过反向工程实际项目来学习故事板、品牌系统、动态图形、音频同步和渲染管道等知识。要求环境配置包括 Node 20+、FFmpeg、最新版 Chrome 以及至少5GB的空闲磁盘空间和建议16GB RAM 以确保流畅的预览体验。",2,"2026-06-11 02:42:19","CREATED_QUERY"]