The guide · paste into Claude Code
Make carousels in Claude Code.
Paste this into Claude Code and it builds your Carousel Studio. First it turns a selfie into your own cartoon avatar (5 poses, fully customizable), then it stands up the design system, the render engine, and HyperFrames motion graphics. After that, a topic becomes a finished animated carousel, no Canva, no designer. It is a guide, not a one-and-done.
Paste into Claude Code
🔒 Drop your email to reveal the prompt
Get the full prompt, free.
Drop your email and the prompt unlocks instantly, plus every other guide and resource in the library. One email a week, unsubscribe anytime.
You are going to set me up with a Carousel Studio inside Claude Code: a reusable system that turns a topic into a finished, animated Instagram carousel (one MP4 per slide, 1080x1350, 4:5), fronted by a cartoon avatar of ME. Build it for real, step by step, and explain as you go.
START WITH MY AVATAR (do this first):
- Ask me for a clear photo of myself (face visible) and where it is.
- Using whatever image generator I have (Higgsfield, Nano Banana / Gemini, GPT Image, etc.), turn the photo into a flat modern vector-style cartoon of me: full body, clean bold shapes, soft cel-shading, subtle outline, casual streetwear, friendly confident expression, plain background. Keep my real face, hair, and skin tone recognizable.
- Generate 5 poses: casual (hands at sides), pointing (presenting), victory (fist up), arms-crossed, holding a phone.
- Remove the backgrounds so each is a transparent PNG (Higgsfield remove_background, or rembg). Save as assets/pose-<name>-cutout.png.
- Ask if I want to customize (outfit color, hair, glasses, expression, flat vs 3D) and re-generate until I approve.
THEN BUILD THE ENGINE:
1. Project: a folder with slides/, assets/, icons/, output/. Vendor gsap.min.js. Make sure ffmpeg and Google Chrome are installed.
2. Design system (base.css): a premium "spatial" look. Soft radial-lit background, floating white tile cards, deep dark plates for headlines, ONE accent color (electric blue by default, easy to recolor), tight Inter typography. Build it so changing 6 CSS variables rebrands the whole thing.
3. Generator (gen.js): each slide is a self-contained HTML file with an inline GSAP timeline that can be paused and seeked to any frame via a render flag (so it is deterministically renderable). Provide slide templates: cover (centered dark headline plate with icons/elements ringed around it, filling the frame), step/list (icon tile + heading + one line), big-stat, and CTA (comment-keyword call to action). Drop my avatar onto the cover, a couple content slides, and the CTA, matching the pose to the slide.
4. Renderer (render.sh): screenshot every frame of every slide with headless Chrome (force-device-scale-factor 1, allow-file-access-from-files), then ffmpeg-encode each slide to its own MP4. Be robust: low parallelism plus a retry pass for any dropped frames.
HOW WE MAKE A CAROUSEL:
- I tell you the topic and the comment keyword for the CTA.
- You draft a slide outline (cover, 4 to 6 content slides, CTA), confirm with me, then write the slides.
- Pull real app icons when I reference tools.
- QA as static frames first (fast), fix layout, then run the full render to MP4s.
For richer motion moments (counters, logo outros, kinetic captions, data charts), pull a HyperFrames component with: npx hyperframes add <component-name>. Repo: github.com/heygen-com/hyperframes.
RULES that keep it premium: fill the frame, no dead white space. One idea per slide. One accent color. Native 1080x1350. Avatar hosts the slide, never just decoration. Always QA frames before the slow render.
Go one step at a time, starting with my avatar. I want to understand it, not get a black box.