Text
Text
Stamp
A line that lands in one hit with a springy scale and a tilt that straightens as it settles.
Install
Usage
<Center>
<Stamp text="Sold out" size={170} />
</Center>Props
| Name | Type | Default | Description |
|---|---|---|---|
font? | "mono" | "heading" | "body" | — | |
delay? | number | — | Frames to wait before entering. |
duration? | number | — | Enter duration in frames. Defaults to 0.6s. |
exit? | number | boolean | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
stagger? | number | — | Frames between units. Defaults at 30fps: char 1, word 2, line 5. |
style? | CSSProperties | — | |
className? | string | — | |
text | string | — | |
split? | "word" | "char" | "line" | — | What staggers in. `line` splits on "\n". |
size? | number | — | Font size in design units. |
weight? | number | — | |
color? | string | — | |
accentColor? | string | — | |
accentWords? | string[] | — | Words painted in the accent color. Case and punctuation are ignored. |
align? | "left" | "right" | "center" | — |
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
Dependencies
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" | "motion">;
export function Stamp({ style, ...props }: StampProps) {
const m = useMotion({ delay: props.delay, duration: props.duration, motion: "bouncy" });
return (
<TextReveal
split="line"
{...props}
effect="scale"
motion="bouncy"
style={{ rotate: `${(1 - m.enter) * -8}deg`, ...style }}
/>
);
}