Hero loops & explainers
Site-hero, services, and process motion. Drop straight into landing pages or blog headers.
Capabilities + deliverables
Two-act sizzle: capability chips flash, then deliverable chips. Type-led intros with cyan cursor.
Open fullscreen ↗Pretoria pin radiating
Orange pin on faint world map, cyan ripples expand outward. "Built locally. Sells globally." Loops cleanly.
Open fullscreen ↗Wireframe to live site
Four stages animate left-to-right: wireframe, mockup, code, live site. Same direction. Real options.
Open fullscreen ↗Vertical reels
Purpose-built for LinkedIn, X, Instagram, TikTok. Same brand engine, vertical viewport, paced for thumb-stop.
What we build
9 service chips flash top-to-bottom. Closes on logo lockup. Made for "introducing the studio" social posts.
Open fullscreen ↗Built with what fits
Headline types out, then the stack chips flash bottom-to-top. Closes on tagline. For tech-credibility reels.
Open fullscreen ↗Shipped, not pitched
Counter tweens 0 → 6, six case-study cards stack-fade in. Closes on a "let's talk" pill. For portfolio social.
Open fullscreen ↗How these are made
- Pipeline. Pure HTML + GSAP timeline → headless Chrome captures frames → ffmpeg muxes to WebM.
npx hyperframes render. - Format. WebM (VP9). Modern browsers all play it. Lighter than MP4, transparent if needed.
- Content. Each composition is a single HTML file (~150-300 lines), no dependencies, fully editable.
- Re-cuts. Same source renders horizontal and vertical without rebuilding. Change the viewport, re-run the render.