Skip to content

Add course overview video - #24

Merged
DanWahlin merged 2 commits into
mainfrom
course-overview-video
Oct 6, 2026
Merged

DanWahlin merged 2 commits into
mainfrom
course-overview-video

Conversation

@DanWahlin

Copy link
Copy Markdown
Collaborator

Adds a 98.5-second overview video for the course, the project that builds it, and a skill to rebuild it.

Video

videos/copilot-app-for-beginners-overview.mp4 (1920x1080, 30 fps, H.264 + AAC, about 21 MB, -13 LUFS)

Time Scene
0:00 Hook: "What if you could direct a team of AI agents while staying focused?" Agent tiles fly in, then line up and finish their work
0:07 Studio analogy: the agents move into a glass live room (the band). A console with Interactive, Plan, and Autopilot channels rises below (the producer)
0:15.5 "Introducing GitHub Copilot app for Beginners"
0:21.5 Free. Hands-on. Open source. Then "8 tracks. 1 course."
0:29 One card for each chapter (00–07), with real dark-mode app captures and a Pick & Polish screen recording
1:27 "Agents do the work. You stay in control."
1:32 End card with the course URL

Project: videos/overview

  • video.config.json holds all copy, timing, screenshots, camera focus boxes, and the music edit.
  • npm run build | check | render | music | export. See videos/overview/README.md.
  • Built with HyperFrames (HTML + GSAP, rendered to MP4). Fonts: Mona Sans (OFL). Icons: Primer Octicons (MIT).
  • App captures come from the sanitized demo persona (Streamer Mode, profile name replaced). The Pick & Polish recording was checked frame by frame for private data.
  • The music ("Futuristic Dawn", 120 BPM) is edited on the beat so its hits land on the scene cuts.

Skill: .github/skills/overview-video

Explains how to update the video when the course or app changes: config fields, screenshot capture rules, glyph and frame checks, music alignment, and export.

Validation

  • npx hyperframes lint: 0 errors. npx hyperframes check: passed.
  • No black frames (ffmpeg blackdetect). Every headline checked for clipped letters.
  • The web export is visually the same as the render (SSIM 0.996).

- videos/copilot-app-for-beginners-overview.mp4: 98.5 s, 1920x1080, with music
- videos/overview: data-driven HyperFrames project (config, build, motion,
  dark-mode app captures, Pick & Polish clip, beat-matched music edit)
- .github/skills/overview-video: skill to rebuild and update the video

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI balanced review requested due to automatic review settings October 6, 2026 02:15

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot review overview

🟡 Changes recommended

Loudness normalization neutralizes the volume control, and the rebuild documentation incorrectly states that renders are silent.

Review effort: Balanced
Findings: 1 Medium severity · 1 Low severity

Open (2)
What changed in this PR

Adds the course overview video, its HyperFrames source project, media assets, and rebuild skill.

Changes:

  • Adds the 98.5-second rendered overview video and source assets.
  • Adds data-driven build, animation, music, and export tooling.
  • Documents the rebuild and validation workflow.
File Description
.github/​skills/​overview-video/​SKILL.md Video maintenance workflow
videos/​copilot-app-for-beginners-overview.mp4 Finished course video
videos/​overview/​.gitignore Excludes generated artifacts
videos/​overview/​.media/​preferences.json HyperFrames preferences
videos/​overview/​AGENTS.md Project authoring guidance
videos/​overview/​BRIEF.md Creative brief
videos/​overview/​README.md Build and scene documentation
videos/​overview/​frame.md Visual design system
videos/​overview/​hyperframes.json HyperFrames configuration
videos/​overview/​index.html Generated composition
videos/​overview/​meta.json Project metadata
videos/​overview/​package.json Build and render commands
videos/​overview/​video.config.json Copy, timing, shots, and music
videos/​overview/​scripts/​add-music.mjs Music mixing and normalization
videos/​overview/​scripts/​build.mjs Composition generator
videos/​overview/​scripts/​prepare-shots.mjs Screenshot frame preparation
videos/​overview/​src/​motion.js GSAP animation timeline
videos/​overview/​src/​styles.css Composition styling
videos/​overview/​assets/​clips/​pick-polish.mp4 Pick & Polish recording
videos/​overview/​assets/​fonts/​MonaSansVF.woff2 Display font
videos/​overview/​assets/​fonts/​MonaSansMonoVF.woff2 Monospace font
videos/​overview/​assets/​fonts/​OFL.txt Font license
videos/​overview/​assets/​music/​futuristic-dawn.mp3 Background music
videos/​overview/​assets/​frames/​*.webp Prepared video frames
videos/​overview/​assets/​shots/​*.webp Sanitized app captures
videos/​overview/​assets/​icons/​*.svg Primer UI icons
videos/​overview/​assets/​icons/​LICENSE Icon license

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines +96 to +99
`volume=${volume}`,
`afade=t=in:st=0:d=${fadeIn}`,
`afade=t=out:st=${Math.max(0, duration - fadeOut)}:d=${fadeOut}`,
"loudnorm=I=-14:TP=-1.5:LRA=11",
Comment thread videos/overview/README.md
Comment on lines +65 to +70
The video renders without sound. To add music, do one of these:

- Run `npm run music -- <file> --start <seconds>` after `npm run render`. This
is fast and does not render the video again.
- Set `music.src` (and `music.start`) in `video.config.json`, then run
`npm run render`.
The decoded audio is unchanged (same MD5).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@DanWahlin
DanWahlin merged commit 99e21ab into main Oct 6, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants