GalactrexAccountOriginals
CreativeStamp
It drops from above, lands with a squash, leaves uneven ink and knocks the surface under it. For approvals, shipped orders, completed tasks, certificates and 'sold out' moments.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add stampUsage
import { Stamp } from "@/components/galactrex/stamp";
<Stamp label="Approved" detail="04 · 10 · 26" trigger="manual" stamped={approved} />Source
Installs to components/galactrex/stamp.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The stamped word. |
detail | string | — | A small second line, such as a date. |
trigger | "mount" | "inView" | "manual" | "inView" | When it lands. |
stamped | boolean | — | Lands when true, for trigger="manual". |
tilt | number | -8 | Resting tilt in degrees. |
wear | number | 0.45 | How worn the ink looks, 0 to 1. |
impact | boolean | true | Knock the surface it lands on. |
onStamp | () => void | — | Called when it touches down. |
className | string | — | Extra classes for the outer element. |
Variants
- Approval. Lands when a request is approved: `trigger="manual"`.
- Certificate. With `detail` for a date or a number.
Accessibility
- The label is real text, readable before and after the animation.
- The ink texture is an SVG filter; contrast stays that of the theme ink.
Motion and reduced motion
- Transform and opacity for the drop; one Web Animations knock on the parent.
- Reduced motion: it is simply there, without drop or knock.