Hyperframes Motion

HyperFrames Motion Design Skill

After Effects-style motion graphics as plain HTML + GSAP. Turn a web page into a cinematic vertical video — 3D camera moves, kinetic typography, particle and film looks — with no After Effects and no build step.

What this skill does

Makes HTML videos look like professional motion graphics instead of basic slideshows.

Templates included

Each is a self-contained 1080×1920 HTML page under templates/.

1. cinematic-product.html — 4-scene product reveal: spotlight logo open, 3D product showcase, feature grid with stagger, gradient-text CTA.
2. kinetic-typo.html — aggressive typography: glitch, character-by-character reveals, elastic bounces.
3. brand-story.html — elegant narrative: smooth gradients, parallax, clip-path reveals.
4. social-ad.html — quick flash-sale ad: bold type, fast cuts, conversion CTA.

Motion effects library

CSS effects (css/motion-effects.css)

3D camera moves: camera-dolly, camera-pan, camera-tilt, camera-orbit Visual effects: motion-blur, light-leak, lens-flare, chromatic-aberration, film-grain, vignette Scene transitions: transition-iris, transition-wipe, transition-morph, transition-glitch

Text animations (js/text-animations.js)

Every helper takes a CSS selector string as its first argument:

javascriptCopy code
// Split text into characters and animate them in
splitTextChars('.headline', { stagger: 0.05, duration: 0.8, ease: 'back.out(1.7)' });

// Word-by-word reveal
splitTextWords('.subtitle', { stagger: 0.1 });

// Typewriter effect
typewriter('.line', { speed: 0.05 });

// Scramble / decode reveal
scrambleText('.code', { duration: 1.5 });

// Mask wipe reveal
maskReveal('.title', { direction: 'left', duration: 1 });

// Count a number up
countUp('.stat', { suffix: '+' });

Also available: waveText, textOnPath, gradientText, staggerReveal. If GSAP has not loaded, the split/mask helpers leave the text readable rather than hiding it.

Usage

Basic workflow

1. Copy a template from templates/ into your workspace.
2. Customize the text, colours and icons.
3. Preview by opening the HTML in a browser.
4. Export to MP4 with any HTML-to-video method (headless-Chrome capture, a screen recorder, or your own renderer).

Customizing templates

Change brand name:

htmlCopy code
<h1 class="brand-logo">YOUR BRAND</h1>

Change product icon:

htmlCopy code
<span class="product-icon">📦</span>

Change colours:

cssCopy code
.tagline { color: #ff0080; }

Modify timing in the template's GSAP timeline:

javascriptCopy code
.from('.element', { duration: 1.2 })

Installation

From Claude Code:

bashCopy code
npx skills add 2boysfromtown/hyperframes-motion --global --agent claude-code

Or clone the repo and copy a template into your own project:

bashCopy code
git clone https://github.com/2boysfromtown/hyperframes-motion.git

Requirements

• A modern browser (Chromium recommended for recording).
• GSAP 3.x — loaded from jsDelivr in each template, nothing to install.

About 2BFT

Built by two founders in a jewellery shop in Vaniyambadi, Tamil Nadu, documenting the real process of building AI products from India.

• 🌐 https://2bft.in
• 📸 https://instagram.com/navaratan.ai