[codex] Add Joye product promo video

[joyehuang]

Summary

This PR adds a first HyperFrames product promo for the blog/portfolio. The goal is to keep the current version as a working draft and a concrete reference point for future video experiments.

What changed

• Added a new HyperFrames project at videos/joye-product-promo.
• Captured the live Astro site and reused the blog's visual language: dark UI, terminal motifs, Satoshi / JetBrains Mono typography, avatar, screenshots, and source assets.
• Built a 20-second composition with five beats:
  • identity / hook
  • interactive terminal-style navigation
  • work map across AI agent, product builds, and open source
  • proof/stats section
  • CTA for joyehuang.me and GitHub
• Added supporting planning files: DESIGN.md, SCRIPT.md, STORYBOARD.md, narration.txt, and transcript.json.
• Added generated narration audio as narration.wav.
• Added a project-local .gitignore so local HyperFrames caches, render outputs, snapshots, samples, and embedded skill cache are not committed.

Why

This gives the blog a concrete product-promo-style video artifact and creates a baseline for later iterations on pacing, bilingual presentation, reusable Bilibili intros/outros, and text-to-video workflows.

Related idea backlog:

• 用 HyperFrames 为博客打造双语 demo 视频 #45
• 用 HyperFrames 为 B 站视频设计片头片尾 #46
• 用 HyperFrames + TTS clone 一键把博客和 notes 转成 B 站视频 #47

Validation

Ran the HyperFrames checks before pushing:

• npx hyperframes lint
  • 0 errors
  • 1 advisory warning: the main composition file is large and could be split later
• npx hyperframes validate
  • no console errors
  • all checked text elements passed WCAG AA
• npx hyperframes inspect --samples 15
  • 0 layout issues across sampled frames
• Generated still snapshots/contact sheet locally for visual review; these are ignored and not committed.

Follow-up notes

This is intentionally a draft. Good next passes would include tightening transitions, improving the narration/script, exploring bilingual captions, and splitting the large index.html into smaller HyperFrames scene files if this grows into a reusable video system.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
blog	Ready	Preview, Comment	Jun 24, 2026 11:13am