Paper Sticker

A taped paper chip that slaps onto the scene over two stop-motion poses

Installation

$ pnpm dlx shadcn@latest add @remocn/paper-sticker

Usage

The sticker is not rendered at all until the first pose after at. It then slaps down over two poses — landing oversized on the first, settling on the second — so with the default step of 3 an at of 6 means the chip appears on frame 9 and settles on frame 12. It is a container: the font, size and colour of the label belong to the children.

tsx

// src/Root.tsx
import { AbsoluteFill, Composition } from "remotion";
import { PaperSticker } from "@/components/remocn/paper-sticker";
 
const StickerScene = () => (
  <AbsoluteFill
    style={{
      background: "#f1eee7",
      alignItems: "center",
      justifyContent: "center",
    }}
  >
    <PaperSticker at={6}>
      <span style={{ fontFamily: "monospace", fontSize: 28 }}>remotion</span>
    </PaperSticker>
  </AbsoluteFill>
);
 
export const RemotionRoot = () => (
  <Composition
    id="PaperSticker"
    component={StickerScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

Stagger a group by feeding the index into at, and give each chip its own seed so they do not all land at the same angle:

tsx

const labels = ["remotion", "shadcn", "bun", "biome"];
 
<>
  {labels.map((label, i) => (
    <PaperSticker key={label} at={i * 6} seed={label}>
      <span style={{ fontFamily: "monospace", fontSize: 28 }}>{label}</span>
    </PaperSticker>
  ))}
</>;

The tilt is fixed per seed and the per-pose wobble is already built in, so do not wrap this in paper-wobble — that would shake it twice. maxTilt={0} removes the fixed tilt for a deliberately tidy row; the chip still carries the per-pose wobble of roughly a fifth of a degree, because it is still a piece of paper on a desk.

Props8

Prop	Type	Default
childrenrequired	React.ReactNode— Contents of the chip; styling is yours
at	number0 Local frame the slap starts from; the chip first appears one pose later and settles one pose after that
seed	string"sticker" Seed for the fixed tilt and the wobble — same seed, same placement
padding	string"10px 16px" CSS padding of the chip
background	string"#fbfaf6" Paper colour of the chip
borderColor	string"rgba(38,36,44,0.55)" Colour of the 1px pencil border
maxTilt	number2.6 Largest fixed hand-placed tilt in degrees; 0 removes it, leaving only the per-pose wobble
step	number3 Frames per stop-motion pose — the tempo control

childrenrequiredReact.ReactNode
Contents of the chip; styling is yours
atnumber
Local frame the slap starts from; the chip first appears one pose later and settles one pose after that
Default0
seedstring
Seed for the fixed tilt and the wobble — same seed, same placement
Default"sticker"
paddingstring
CSS padding of the chip
Default"10px 16px"
backgroundstring
Paper colour of the chip
Default"#fbfaf6"
borderColorstring
Colour of the 1px pencil border
Default"rgba(38,36,44,0.55)"
maxTiltnumber
Largest fixed hand-placed tilt in degrees; 0 removes it, leaving only the per-pose wobble
Default2.6
stepnumber
Frames per stop-motion pose — the tempo control
Default3