ReelHyperFrames and Remotion styles for Claude Code: what a style kit holds
HyperFrames and Remotion turn code into video, and both come with agent skills that teach Claude Code how to use them. What they leave to you is the look: the colours, the characters, how a shot is framed and how things move. A style kit is that look, written down so Claude Code can follow it. Ours run on HyperFrames. This page shows what one kit holds, what carries over to Remotion, and every style we have ready.
What is inside one kit
Take the Red paper-cut kit as an example. It is a folder of plain files:
- STYLE.md: the rules of the look. For paper-cut: every piece is one sheet of paper, no strokes, no gradients; the palette as hex values (hero red, a jade-ink night ground, one gold accent per film); the fonts and the smallest text size allowed.
- engine/: the drawing code that gives every piece its paper grain, cut rims and soft shadow, plus helpers for captions that size themselves to the text.
- characters/ and sets/: the cast and the places, drawn by functions, so a character looks the same in every shot.
- templates/: a 16:9 film and a 9:16 vertical film that already render, to start from.
- RENDER.md: the exact commands to lint, take stills, render and check the file, with the HyperFrames version the kit was tested with.
- RUBRIC.md: ten checks scored 0 to 2 (no frozen stretches, one focal point per shot, readable text, clean frames and more) that Claude grades its own stills against before it calls a film done.
- LESSONS.md: mistakes earlier films made in this style, so the next one avoids them.
You brief Claude in plain words ("a 35-second vertical Short about a lantern festival, in the paper-cut style, show me the shot list first") and it builds the film inside those rules.
Why HyperFrames
HyperFrames (HeyGen, Apache-2.0) plays an HTML page in a headless Chrome and records it frame by frame. Our kits draw on a canvas with plain JavaScript and pin the HyperFrames version they were tested with, so a film that rendered for us renders the same for you. You need Node.js, Chrome and FFmpeg on a normal computer; no GPU.
If you use Remotion
The kits are HTML and canvas code made for HyperFrames, not React components, and we test them only on HyperFrames. What carries over to a Remotion project is the design work: the style rules, palette, character designs and the rubric are plain text Claude can apply in any engine. The drawing code is plain canvas JavaScript, so Claude can port parts of it, but expect to do that work yourself. Remotion is free for individuals and companies of up to 3 people and needs a paid licence above that (Remotion licence). Our Remotion vs HyperFrames post compares the two engines.
Every ready style
119 styles, each with an example film made by a fresh Claude Code given only the kit. 29 of them are also tested as native 9:16 films for Shorts, Reels and TikTok.
Paper & print
- Cut-paper documentary (also 9:16)
- Ukiyo-e (also 9:16)
- Red paper-cut (also 9:16)
- Stained glass
- Gilt
- Vox collage (also 9:16)
- Halftone dossier
- Risograph
- Shadow puppet
- Woodcut
- Paper pop-up (also 9:16)
- Pop comic panels
- Paper-cut lightbox
- Fantasy atlas journey
- Celestial atlas
- Art nouveau poster
- Illuminated manuscript
- Evidence board
Cartoon
- Primal toon (also 9:16)
- Round-head toon (also 9:16)
- Mid-century cartoon (also 9:16)
- Sci-fi sitcom toon (also 9:16)
- Cel anime 80s (also 9:16)
- Handdraw story
- Doodle film (also 9:16)
- Rubber hose (also 9:16)
- Stick-figure metaphor Short (also 9:16)
- Crude line-face life story
- Illustrated true-horror story
- Everyday-object money explainer
- Black-and-white manga
- Flat big-limb illustration
- Round pseudo-3D toy
- Stick fight
- ASMR care cartoon
- Infinite zoom
Motion graphics
- Copper Boards (also 9:16)
- Editorial serif explainer
- Whiteboard explainer (also 9:16)
- Isometric infographic (also 9:16)
- Data storytelling
- Blueprint
- Sketch Explainer
- Corporate Premium
- Slide Explainer
- Swiss Motion
- Chalk Board
- Vector Explainer
- Pictogram Motion
- Motion Cards
- Arch diagram
- Countdown guessing quiz (also 9:16)
- Ranking Race
- Territory Map
- Chat text story (also 9:16)
- Tier list ranking
- Would you rather
- Money growth chart
- Evolution timeline
3D & cutaway
- Isometric machine cutaway
- three-procedural
- Brand World 3D (also 9:16)
- Tilt-shift town
- Arena Zero
- Low-poly island (also 9:16)
- 3D size comparison
- Oddly satisfying 3D loops
- Voxel diorama
- Glowing globe arcs
Painterly
- 1920s silent film
- Chinese ink wash
- Urban sketch, pen and wash (also 9:16)
- Impasto palette knife (also 9:16)
- Watercolour brush
- Painted animation
- Animated legend movie
- Painted anime sky
- Bioluminescent deep sea
- Charcoal drawing
- Pointillist dots
- Cozy room loop
Launch & product
- Dark Keynote
- Kinetic type (also 9:16)
- Neon Deck (also 9:16)
- Product Cinematic (also 9:16)
- Device Demo
- Hollow Light
- Spy Titles
Code art
- Hologram HUD
- Ember Cart pixel RPG
- Phosphor Terminal
- Shader art (also 9:16)
- Particle type (also 9:16)
- HD-2D
- Marble race simulation
- Isometric pixel city
- Flow-field particles
- Physics typography
- Pen-plotter drawing
- Living Turing patterns
- Paper marbling
- Topographic contours
Music & lyric
- Beat Plates (also 9:16)
- Lyric karaoke (also 9:16)
Retro & internet
- Neon synthwave drive
- Vaporwave dream
- Liminal camcorder tape
- Neon sign night
- Y2K glossy chrome
- 90s TV infomercial
- Glitch datamosh
- Retro desktop story
- Microgame frenzy
- Demoscene intro
- Oscilloscope vector
Craft
Get them
All styles come in one ReelStyles purchase, with every style we add later. They install as a Claude Code plugin; Codex, Cursor, Gemini CLI and other agents that read files and run a terminal can open the same folder.