Stamp
A line that lands in one hit with a springy scale and a tilt that straightens as it settles.
A preset of Text reveal.
Installation
npx shadcn add https://www.reelcn.dev/r/stamp.jsonFiles land in src/reelcn/ with the items it builds on.
Usage
<Center>
<Stamp text="Sold out" size={170} />
</Center>Props
PropTypeDescription
font"mono" | "heading" | "body"
delaynumberFrames to wait before entering.
durationnumberEnter duration in frames. Defaults to 0.6s. Some items reuse
duration for an unrelated local timing. See that item's own prop docs.exitnumber | booleanExit at the end of the parent `<Sequence>`.
false keeps it on screen, a number sets the exit length in frames.motionMotionPersonalityOverride the theme's motion personality.
posterbooleanRenders fully entered, with no exit: for a still frame or thumbnail. Defaults to
false.holdFramesnumberDelays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to
0.staggernumberFrames between units. Defaults at 30fps: char 1, word 2, line 5.
styleCSSProperties
classNamestring
text*string
split"word" | "char" | "line"What staggers in.
line splits on "\n".sizenumberFont size in design units.
weightnumber
colorstring
accentColorstring
accentWordsstring[]Words painted in the accent color. Case and punctuation are ignored.
align"left" | "right" | "center"
from"left" | "right" | "below" | "above"Where
rise, blur and mask units travel in from.orderStaggerOrderWhich unit enters first.
scaleFromnumberStarting scale for the
scale effect: below 1 grows in, above 1 slams down.Built from
Use
- Verdicts and labels such as sold out, approved or new
- One- or two-word punchlines
Avoid
- Headlines longer than a few words. Use
pop-in
Guides
Components take their colors from a theme, their timing from motion props and their layout from the canvas.
Source
registry/items/stamp.tsx
/**
* @title Stamp
* @category text
* @description A line that lands in one hit with a springy scale and a tilt that straightens as it settles.
* @duration 30
* @use Verdicts and labels such as sold out, approved or new
* @use One- or two-word punchlines
* @avoid Headlines longer than a few words. Use `pop-in`
* @tags stamp, slam, bounce, label, punchline
* @preset text-reveal
* @example
* <Center>
* <Stamp text="Sold out" size={170} />
* </Center>
*/
import { useMotion } from "./core";
import { TextReveal, type TextRevealProps } from "./text-reveal";
export type StampProps = Omit<TextRevealProps, "effect">;
export function Stamp({ style, motion, ...props }: StampProps) {
const m = useMotion({ delay: props.delay, duration: props.duration, motion: motion ?? "bouncy" });
// A short thud as it lands: three frames of shrinking jitter.
const landed = m.frame - m.delay - Math.round(m.enterFrames * 0.35);
const shake = landed >= 0 && landed < 3 ? [0.03, -0.02, 0.01][landed] : 0;
return (
<TextReveal
split="line"
scaleFrom={1.6}
{...props}
effect="scale"
motion={motion ?? "bouncy"}
style={{
rotate: `${(1 - m.enter) * -8}deg`,
// transform, not translate: TextReveal's exit lift owns `translate`.
transform: `translate(${shake}em, ${-shake}em)`,
filter: "drop-shadow(0 0.05em 0.02em rgba(0, 0, 0, 0.22))",
...style,
}}
/>
);
}