Wax Seal Letter
Break the wax seal: it cracks in two, the flap swings open, the letter slides out.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
An 18th-century envelope. The seal splits along a jagged clip-path and falls, the flap rotates in 3D and the letter rises out of the pocket.
Installation
$ npx shadcn@latest add https://guetix.com/r/wax-seal-letter.json
Uses the shadcn CLI. It creates components/guetix/wax-seal-letter.tsx and installs nothing else.
Usage
example.tsx
import { WaxSealLetter } from "@/components/guetix/wax-seal-letter";
export default function Example() {
return <WaxSealLetter />;
}
InvitationsOffer lettersMuseum storiesWedding sites
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| initial | string | "G" | Seal monogram. |
| to / title / body / signature | string | — | Letter contents. |
| sealColor | string | "#9b1c1c" | Wax color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- The seal is a labelled button; the letter is hidden from AT until opened.