Accordion Unfold

$ pnpm dlx shadcn@latest add @remocn/accordion-unfold

Usage

AccordionUnfold prints your logo across a paper card, then folds the card into vertical pleats. It starts as a tight zigzag and opens sideways on a smooth spring with no overshoot, staying centered as it widens. Pleats facing away from the light are shaded and the ones facing it catch a faint highlight, so the folds read in 3D. When the card is flat it switches to a single plain card, so no seams are left in the hold.

import { Img, staticFile } from "remotion";
import { AccordionUnfold } from "@/components/remocn/accordion-unfold";
 
export const LogoSting = () => (
  <AccordionUnfold color="#FFFFFF" panels={6}>
    <Img src={staticFile("logo-dark.svg")} style={{ height: 96 }} />
  </AccordionUnfold>
);

children are centered on the card, and each pleat shows its own slice of them, so the logo folds with the paper. Use a version of your logo that reads on color: the default card is white, so a dark logo works best. The card is 66% of the frame width, capped at 130% of the height, and 40% of the frame height tall, capped at 40% of its width. Children larger than the card are cropped at its edges.

The fold uses CSS 3D transforms (rotateY with preserve-3d), which Remotion renders in Chrome as expected.

Timing

At 30 fps and speed={1}:

The docs preview runs 66 frames to hold the flat card. speed scales the timeline.

Variations

Fewer panels gives wide, slow pleats; 10 or more gives a tight concertina. foldAngle sets how closed the card starts: near 89 it starts as a thin strip, 30–45 starts half open for a gentler move. shade={0} removes the fold shading for a flat graphic look.