# Paper Sticker
URL: https://remocn.dev/docs/ui-blocks/paper-sticker

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

- Install: `npx shadcn@latest add @remocn/paper-sticker`
- Vibe: paper
- Natural length: 120f @ 30fps

## Installation

```bash
npx 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.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `children` (required) | `React.ReactNode` | — | Contents of the chip; styling is yours |
| `at` | `number` | `0` | 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` | `number` | `2.6` | Largest fixed hand-placed tilt in degrees; 0 removes it, leaving only the per-pose wobble |
| `step` | `number` | `3` | Frames per stop-motion pose — the tempo control |

## Use when
- Short labels, chips, or callout notes should exist as physical taped paper on a stop-motion scene.
- A group of tags should land one after another — stagger `at` by the index, give each its own `seed`.

## Don't use when
- The content is long text or looks like interactive UI — this is a paper prop, not a component sim.
- You need a media frame with a caption underneath — use `polaroid`.
- You were going to add `paper-wobble` on top: the wobble is already here.