Comic Panels

$ pnpm dlx shadcn@latest add @remocn/comic-panels

Usage

ComicPanels is a full-frame scene. Your content starts centered on the page, surrounded by ink speed lines that are redrawn every two frames. A page border closes in, and a slanted gutter cracks across the frame and lifts the content into the top panel. A second gutter cracks down, and two panels slide in underneath: a halftone panel in the accent color from the left and an ink panel with a small starburst from the right. The page shakes, and the starburst grows until its accent rays fill the frame, leaving a paper burst with the word in the middle.

import { ComicPanels } from "@/components/remocn/comic-panels";
 
export const Launch = () => (
  <ComicPanels word="POW">
    <Logo />
  </ComicPanels>
);

children is the hero content. It is rendered at full size at first and scales to heroScale as it moves into the top panel, so size it as you would for a full frame. Without children a placeholder "remocn" lockup is shown. word is optional. Without it the starbursts are empty. Keep the word short: it is set large and bold, and three or four letters read best.

Timing

At 30 fps and speed={1}:

comicPanelsLength is 36. The final burst keeps a gentle 4% pulse after that, so the hold never freezes. speed scales the whole timeline.