From 2b4d8fcc43d25197432682473a8c6351209982f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?= Date: Sun, 5 Jul 2026 18:33:54 +0500 Subject: [PATCH] initial: ads-stories project with interesting theme --- AGENTS.md | 87 ++ CLAUDE.md | 87 ++ STORYBASE.md | 397 ++++++ assets/accent-line.png | Bin 0 -> 96 bytes assets/bg-ai-gradient.png | Bin 0 -> 13910 bytes assets/bg-grid.png | Bin 0 -> 14595 bytes assets/bg-noise.png | Bin 0 -> 3220181 bytes assets/bg-warm-gradient.png | Bin 0 -> 12437 bytes assets/bg-warning-gradient.png | Bin 0 -> 12435 bytes assets/card-bg.png | Bin 0 -> 2568 bytes assets/cta-button.png | Bin 0 -> 640 bytes creative-direction.md | 384 ++++++ design.md | 115 ++ figma-meta.json | 1264 ++++++++++++++++++ frame.md | 67 + hyperframes.json | 9 + index.html | 349 +++++ interesting/assets/bg-gradient-accent.png | Bin 0 -> 11161 bytes interesting/assets/bg-gradient-dark.png | Bin 0 -> 10534 bytes interesting/assets/bg-gradient-primary.png | Bin 0 -> 10800 bytes interesting/assets/bg-gradient-secondary.png | Bin 0 -> 10785 bytes interesting/assets/bg-noise.png | Bin 0 -> 395606 bytes interesting/assets/card-surface.png | Bin 0 -> 2339 bytes interesting/design.md | 164 +++ interesting/frame.md | 69 + interesting/style.md | 214 +++ meta.json | 5 + package.json | 11 + snapshots/contact-sheet.jpg | Bin 0 -> 66875 bytes snapshots/frame-00-at-1.5s.png | Bin 0 -> 40267 bytes snapshots/frame-01-at-5.0s.png | Bin 0 -> 462699 bytes snapshots/frame-02-at-10.0s.png | Bin 0 -> 418414 bytes snapshots/frame-03-at-14.0s.png | Bin 0 -> 418414 bytes snapshots/frame-04-at-14.6s.png | Bin 0 -> 418414 bytes style.md | 194 +++ styles/colors.css | 17 + 36 files changed, 3433 insertions(+) create mode 100644 AGENTS.md create mode 100644 CLAUDE.md create mode 100644 STORYBASE.md create mode 100644 assets/accent-line.png create mode 100644 assets/bg-ai-gradient.png create mode 100644 assets/bg-grid.png create mode 100644 assets/bg-noise.png create mode 100644 assets/bg-warm-gradient.png create mode 100644 assets/bg-warning-gradient.png create mode 100644 assets/card-bg.png create mode 100644 assets/cta-button.png create mode 100644 creative-direction.md create mode 100644 design.md create mode 100644 figma-meta.json create mode 100644 frame.md create mode 100644 hyperframes.json create mode 100644 index.html create mode 100644 interesting/assets/bg-gradient-accent.png create mode 100644 interesting/assets/bg-gradient-dark.png create mode 100644 interesting/assets/bg-gradient-primary.png create mode 100644 interesting/assets/bg-gradient-secondary.png create mode 100644 interesting/assets/bg-noise.png create mode 100644 interesting/assets/card-surface.png create mode 100644 interesting/design.md create mode 100644 interesting/frame.md create mode 100644 interesting/style.md create mode 100644 meta.json create mode 100644 package.json create mode 100644 snapshots/contact-sheet.jpg create mode 100644 snapshots/frame-00-at-1.5s.png create mode 100644 snapshots/frame-01-at-5.0s.png create mode 100644 snapshots/frame-02-at-10.0s.png create mode 100644 snapshots/frame-03-at-14.0s.png create mode 100644 snapshots/frame-04-at-14.6s.png create mode 100644 style.md create mode 100644 styles/colors.css diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..7218332 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,87 @@ +# HyperFrames Composition Project + +## Skills — USE THESE FIRST + +**Always invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that are NOT in generic web docs. Skipping them produces broken compositions. + +**Doing anything with HyperFrames?** Start at `/hyperframes` — it tells you what HyperFrames can do and which skill or workflow handles your intent (make a video, TTS / BGM, prep footage, author / animate, render, install blocks), and routes every "make me a video" request to the right workflow. Read it first, especially when there's no project context to orient you. The video workflows it routes to: + +- `/product-launch-video` — a **product** URL or brief / script → 60-90s product launch / SaaS / promo video. +- `/website-to-video` — a **general** website / URL → a video _of_ the site (tour / showcase / social clip from captured visuals); a product **launch / promo** is `/product-launch-video`. +- `/faceless-explainer` — arbitrary text (topic / article / notes), **no URL, no website capture** → 60-90s faceless explainer. +- `/embedded-captions` — an existing talking-head video (MP4) → the same footage with captions / subtitles added (rail + embed, or pure-cinematic embed); the footage itself is untouched. +- `/talking-head-recut` — an existing talking-head / interview / podcast video (MP4) → the same footage **packaged with designed graphic overlays** (kinetic titles, lower-thirds, data callouts, pull-quotes, side panels, pip) synced to the transcript; the clip plays unchanged underneath. (Plain captions/subtitles → `/embedded-captions`.) +- `/pr-to-video` — a GitHub PR (URL / `owner/repo#N` / "this PR") → 30-90s code-change explainer (changelog / feature reveal / fix / refactor). +- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`. +- `/general-video` — fallback for any other video (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition); the original hyperframes authoring flow, any length. + +**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) composition into HyperFrames HTML — a source migration, separate from the creation workflows above. + +The domain skills (`/hyperframes-core`, `/hyperframes-animation`, `/hyperframes-creative`, `/hyperframes-cli`, `/hyperframes-media`, `/hyperframes-registry`) and the full capability map live inside `/hyperframes` — it is the single source of truth for which skill handles which intent. + +> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `/hyperframes-core` → `references/tailwind.md`. + +> **Skills not available or need updating?** Run `npx skills add heygen-com/hyperframes` +> and restart the agent session so the new skills load. + +## Commands + +```bash +npm run dev # start the preview server (long-running — keep it alive in background) +npm run check # lint + validate + inspect +npm run render # render to MP4 +npm run publish # publish and get a shareable link +npx hyperframes lint --verbose # include info-level findings +npx hyperframes lint --json # machine-readable output for CI +npx hyperframes docs # reference docs in terminal +``` + +> **`npm run dev` is a long-running server, not a one-shot command.** It blocks until stopped. +> In Claude Code, always run it with `run_in_background: true`. Never run it as a foreground +> command — it will time out and the server will die, breaking the browser preview. + +## Documentation + +**For quick reference**, use the local CLI docs command (no network required): + +```bash +npx hyperframes docs +``` + +Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting` + +**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs: + +``` +https://hyperframes.heygen.com/llms.txt +``` + +## Project Structure + +- `index.html` — main composition (root timeline) +- `compositions/` — sub-compositions referenced via `data-composition-src` +- `meta.json` — project metadata (id, name) +- `transcript.json` — whisper word-level transcript (if generated) + +## Linting — ALWAYS RUN AFTER CHANGES + +After creating or editing any `.html` composition, **always** run the full check before considering the task complete: + +```bash +npm run check +``` + +Fix all errors before presenting the result. Inspect warnings should be reviewed before rendering. + +## Key Rules + +1. Every timed element needs `data-start`, `data-duration`, and `data-track-index` +2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control +3. Timelines must be paused and registered on `window.__timelines`: + ```js + window.__timelines = window.__timelines || {}; + window.__timelines["composition-id"] = gsap.timeline({ paused: true }); + ``` +4. Videos use `muted` with a separate `