remocn-carousel

remocn-carousel

A photo carousel is N separate full-bleed still images — same aspect ratio, one story — exported from a Remotion project that uses remocn components. Not a video: no transitions between slides, no camera moves; the deliverable is a folder of PNGs.

This skill covers the carousel-specific workflow: slide architecture, aspect ratios, settle-frame math, and still export. Component-level knowledge (which animation to pick, props, vibes) comes from the official remocn skill and the live catalog — do not guess components from memory.

Prerequisites (do these first)

1. Remotion project exists — else npx create-video@latest.
2. components.json must have the remocn registry (shadcn init first if missing):

   "registries": { "@remocn": "https://remocn.dev/r/{name}.json" }
   

3. Official remocn skill: npx skills add Remocn/remocn --yes. If unavailable, fetch the catalog live at https://remocn.dev/llms-components.txt and per-component pages at https://remocn.dev/docs/<section>/<name>.md. Network down? Say so and stop — never invent component names or props.
4. Install components: npx shadcn@latest add @remocn/<name> (lands in components/remocn/).

One composition per slide

Each slide is its own Composition at the exact target size:

<Composition id="slide-1" component={Slide1} width={1080} height={1350} fps={30} durationInFrames={120} />
<Composition id="slide-2" component={Slide2} width={1080} height={1350} fps={30} durationInFrames={120} />

Slide scenes are full-bleed: wrap every slide in Backdrop with padding={0} radius={0} shadow="" (or a shader directly) so no corner shows canvas. All slides share one aspect ratio and one background/typography system — the deck must read as one piece (same vibe tag throughout).

Aspect ratios

Full matrix and safe zones: references/aspect-ratios.md. Pick by platform and content type:

• Instagram feed carousel → 4:5 (1080×1350) is primary; 1:1 is secondary.
• LinkedIn → 1:1 or 4:5.
• X → 16:9 or 4:5.
• Reels/Stories/TikTok → 9:16 (1080×1920).
• Web/embed → 16:9.

If the brief does not state the ratio, ask — never silently pick. If asked for "all ratios", produce one render pass per ratio.

Scaling for non-1280×720 canvases

remocn components are laid out for the 1280×720 canvas. On other sizes:

• Scale text fontSize by canvasWidth / 1280.
• Layout components take explicit width/height (e.g. Reel's card) — size them to the canvas with margins, don't stretch.
• Keep critical text inside the safe zone (~10% margin on every edge; for 9:16 keep the bottom ~15% clear — platform UI overlays).

Carousel story structure

5–10 slides, one idea per slide, the same three-act logic as a video:

1. Hook — bold claim, question, or pain.
2. Body — one feature or proof per slide.
3. CTA — action, URL, or next step.

Slide-component shortcuts (fetch exact props from the catalog): headlines soft-blur-in / tracking-in / per-character-rise / mask-reveal-up; copy staggered-fade-up; photos in frames polaroid (paper, handwritten caption) or reel (shots blooming in a fixed card); stats rolling-number / number-wheel; accents marker-highlight / inline-highlight.

Settle-frame math (sharp stills)

remotion still exports one moment of the timeline. Render at the frame where every entrance animation has finished and holds — never frame 0 (blank or mid-animation).

const ENTRANCE = 60;   // longest entrance animation on the slide (each component page lists Length)
const HOLD = 30;       // quiet hold so the image reads as settled
export const SLIDE_SETTLE = ENTRANCE + HOLD;

Rule: settle = max(component Lengths on the slide) + 10–30f buffer. Give the Composition durationInFrames ≥ settle + exit runway, but no exit animations on a carousel slide — the viewer swipes, there is no cut. If a slide uses Reel, settle past its last step + reveal.

Export

npx remotion still slide-1 out/slide-1.png --frame=90
npx remotion still slide-2 out/slide-2.png --frame=90
# ... one per slide

Verify: file out/slide-*.png must report the exact target size (e.g. 1080 x 1350). JPG when the brief asks for JPG (--image-format=jpeg).

Good vs slop (carousel edition)

• One accent color, sentence case, solid text color, no glow or gradient text fills.
• Real copy from the brief — no lorem ipsum, no "INSERT NAME HERE".
• Stills must look final: settled text, no half-drawn letters, no cropped corners.

Common mistakes

• Hardcoding 1280×720 when the brief says portrait → wrong deliverable. Read the ratio from the brief first.
• Exporting an MP4 when stills were asked (or stills from a video-render pipeline).
• Exporting at frame 0 or inside an animation → blurry, half-drawn text.
• Math.random() / setInterval → nondeterministic renders; use @remotion/random with a fixed seed.
• Fonts not loaded before render — use @remotion/google-fonts (the components expect the Manrope/--font-geist-sans variable) and delayRender patterns.
• Text in the outer 10% that platform chrome crops.
• Mixing aspect ratios across slides of one deck.