Badge Stamp
A seal that lands like a stamp — oversized and over-rotated, settling with the rotation still unwinding after the scale has stopped.
PrimitivePaths & shapes
$ npx remotion-ui@latest add badge-stampThe seal comes in at more than twice its size and further round than it will finish, hits its mark, and settles. Scale and rotation run on separate springs so the rotation is still unwinding fractionally after the scale has stopped — that offset is what sells the weight. Collapse them onto one spring and the stamp reads as a sticker being placed.
The shockwave is thrown from the impact frame rather than from the start, so it can never arrive before the thing that caused it. Ink strength eases back a little after the hit, the way pressure comes off a real stamp.
Ring text runs on two separate half-arcs, both left to right. Letters stand up
from the direction of travel, so a single full-circle path would print
everything on the bottom half upside down — ringText takes the top,
ringTextBottom the bottom, and each should be short enough not to run past the
side of the ring.
Scale and rotation run on separate springs, so the rotation is still unwinding after the scale has stopped — that offset is what sells the weight, and collapsing them onto one spring makes the seal read as a sticker being placed. The shockwave is thrown from the impact frame rather than from the start, so it cannot arrive before its cause. Ring text uses two half-arcs because letters stand up from the direction of travel.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/badge-stamp- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: label, ringText, ringTextBottom, sublabel, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { BadgeStamp } from "@/remotion/primitives/badge-stamp";
<BadgeStamp
label="APPROVED"
ringText="REMOTIONUI"
ringTextBottom="VERIFIED BUILD"
sublabel="2026"
delayInFrames={14}
exitAtInFrames={92}
/>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "APPROVED" | The word in the middle of the seal. |
| ringText | string | "REMOTIONUI" | Text curved around the top. Keep it short enough not to run past the sides. |
| ringTextBottom | string | "VERIFIED BUILD" | Text curved around the bottom, on its own left-to-right arc so it reads upright. |
| sublabel | string | "2026" | Line under the label. |
| size | number | 220 | Rendered size in pixels. |
| color | string | "#E8B86D" | Ink colour for every part of the seal. |
| rotation | number | -9 | Degrees the stamp settles at. |
| windUp | number | 16 | How much further round it starts, in degrees. |
| delayInFrames | number | 6 | Frame the stamp lands on. |
| exitAtInFrames | number | - | Frame the stamp starts leaving. Omit to leave it on screen. |
| exitInFrames | number | 16 | Frames the exit takes. |
| impactRing | boolean | true | Shockwave thrown off on impact. |