Your AI. Your style.

Frame Styles gives your AI coding app a visual vocabulary: layouts, components, typography and motion rules it can use to create videos with HyperFrames.

Start with HyperFrames

You need an AI coding app with file access and a working HyperFrames installation. Install Node.js 22 or newer, then follow the official setup for your app. HyperFrames renders HTML, CSS and timed animations into video.

These packs target Claude Code, Codex and Gemini CLI. They are not upload-and-render templates for ordinary chat apps.

Pick a style

Browse the previews, open a style and get the free download. The .skill package and .zip archive contain identical files. The .skill file is a ZIP archive with a different extension.

Install the pack

Each style page includes commands for your app. For Claude Code or Codex, extract the package into the app’s skills directory. For Gemini CLI, use gemini skills install ./your-download.skill, then /skills reload.

Start a fresh session after a manual installation. Ask the app to use the style by name, along with HyperFrames. The skill’s folder name begins with frame-styles-.

Installing on Windows

Download the .zip version and extract it. Keep the folder containing SKILL.md intact. Move that folder into %USERPROFILE%\.claude\skills\ for Claude Code, or %USERPROFILE%\.agents\skills\ for Codex. Create the skills folder if it does not exist.

Gemini CLI can install the .skill version directly using the command on the style page.

Give your AI a useful brief

Include the subject, key message, duration and format. If you have a brand guide, images or footage, give those to the app too. The style should adapt to your content and brand.

Use the Mixed-media collage skill with HyperFrames. Create a 12-second portrait video about my new workshop. Start with “Make something worth sharing”, show the date and finish with “Book your place”. Use my supplied brand colours.

What’s inside?

Every pack includes the style skill, visual and motion rules, editable components, an example generator and landscape, portrait and square compositions. The sample generator runs locally; it needs no paid media API.

The examples use a finite, paused GSAP timeline, so HyperFrames can seek any frame reliably. You can change the words, supplied data and canvas dimensions before rendering. Square gallery previews show the style; landscape and portrait examples adapt the framing for YouTube, Reels, Shorts and TikTok.

Use it for real work

The packs are free for personal and commercial projects. Keep any included font and third-party licence notices. Read the licence for the full terms.

Need a hand? Get in touch with Will.