$ show nateherkai/hyperframes-student-kit
This repository is a motion-graphics video production toolkit designed for AI coding assistants (Codex and Claude Code). It provides a structured pipeline for turning talking-head footage into edited videos with animated overlays, using HTML/CSS/JS compositions driven by GSAP timelines. The system includes reusable style libraries (Vox Explainer and Kallaway) with hundreds of parameterized card templates, transcription and cut-detection scripts, beat-planning heuristics, and project scaffolding. The architecture is a collection of standalone Node.js scripts, agent skill definitions, and HTML templates rather than a monolithic application. It relies on external services (ElevenLabs, Kie.ai, HyperFrames CLI) and CDN-hosted libraries (GSAP, Google Fonts). The repo is actively maintained with recent commits and a CI pipeline, though it exhibits some duplication between mirrored skill directories and draft-status cards that have not all been individually rendered.
The LLM identified 7 files worth highlighting for reuse:
A standalone Node.js script that builds an interactive edit decision list (EDL) review page. It renders a timeline showing kept (green) and cut (red) regions, embeds both original and edited videos side-by-side, and allows scrubbing. This is a reusable pattern for any video editing pipeline that needs human review of automated cuts.
Analyzes word-level transcripts to detect stutters, retakes, and false starts using Jaccard similarity on text signatures (threshold ≥0.34) and immediate word-repeat detection. Outputs JSON and Markdown proposals. This is a reusable data-processing script for any video editing workflow that needs to identify problematic segments from transcripts.
Validates that motion-graphic beat timings align with transcript word timestamps. Can be extracted and reused in any project that requires synchronizing animations to spoken content. Demonstrates a clean validation pattern with clear error reporting.
A self-contained CSS custom properties file defining the complete visual language for the Kallaway style (dark glassmorphism, cyan accent, specific fonts, radii, shadows, glows, and textures). This is a reusable design token system that can be dropped into any project to enforce consistent styling. Demonstrates non-obvious skill in organizing a complex visual system into a single source of truth.
A CSS-only film grain overlay using radial gradients at configurable tile sizes (3/5/7px). No JavaScript, no external dependencies. Can be extracted and reused in any HTML-based video composition or web project to add texture. Demonstrates clever use of CSS gradients to create a deterministic, performant visual effect.
A CSS custom property-driven light pass (shimmer) effect with auto-injection script. Self-contained and reusable across any project that needs a polished highlight sweep over text or surfaces. Demonstrates a clean pattern for parameterized CSS animations without JavaScript.
A Python geometry helper for computing spatial narrative structures (a 5-slot spine with camera docking, socket markup, and payoff line). Isolated and reusable for any project that needs to algorithmically arrange visual elements in a video frame. Demonstrates non-obvious skill in translating narrative concepts into geometric constraints.