{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "envelope", "title": "Envelope", "description": "Animated envelope UI: a composer where the letter folds into the envelope, gets sealed and flies off, plus a presentational envelope that opens to reveal any content.", "dependencies": [ "gsap", "@gsap/react", "motion", "lucide-react" ], "registryDependencies": [ "utils", "https://trytweenly.vercel.app/r/use-reduced-motion.json", "https://trytweenly.vercel.app/r/tweenly-theme.json" ], "files": [ { "path": "registry/new-york/envelope/envelope.tsx", "content": "\"use client\"\n\nimport { useEffect, useEffectEvent, useId, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, useAnimate, useInView, type Transition } from \"motion/react\"\nimport gsap from \"gsap\"\nimport { useGSAP } from \"@gsap/react\"\nimport { Check, PenLine, Plane, Send } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useReducedMotion } from \"@/registry/new-york/hooks/use-reduced-motion\"\n\ngsap.registerPlugin(useGSAP)\n\n/* ------------------------------------------------------------------ types */\n\nexport type EnvelopeVariant = \"classic\" | \"airmail\" | \"minimal\" | \"glass\"\nexport type EnvelopeFlyDirection = \"up-right\" | \"up\" | \"right\"\nexport type EnvelopeTrigger = \"click\" | \"hover\" | \"inView\" | \"manual\"\nexport type EnvelopeField = \"name\" | \"email\" | \"subject\" | \"message\"\n\nexport interface EnvelopeValues {\n name: string\n email: string\n subject: string\n message: string\n}\n\nexport interface EnvelopeFields {\n /** Show the sender name field (required when shown). Default: true */\n name?: boolean\n /** Show the email field (validated when filled). Default: true */\n email?: boolean\n /** Show the subject field. Default: false */\n subject?: boolean\n}\n\ninterface EnvelopeLook {\n /** Look of the envelope, letter and seal. Default: \"classic\" */\n variant?: EnvelopeVariant\n /** Envelope color (any CSS color). Default: per variant (kraft, white, `var(--card)`, frosted white) */\n color?: string\n /** Letter paper color (any CSS color). Default: per variant */\n paper?: string\n /** Letter text color (any CSS color). Default: per variant */\n ink?: string\n /** Wax seal / stamp / dot color (any CSS color). Default: per variant (red wax, red stamp, accent) */\n seal?: string\n /** Accent used for buttons, focus, glow and the minimal seal. Default: \"#ff4d12\" */\n accent?: string\n /** Initial or monogram on the seal or stamp. Default: \"T\" (composer: the sender's initial) */\n sealLabel?: string\n /** Animation speed multiplier; 2 plays the choreography twice as slow. Default: 1 */\n duration?: number\n /** Envelope width in px (shrinks to fit its container). Default: 420 */\n width?: number\n /** Envelope corner radius in px. Default: 14 */\n radius?: number\n /** Additional classes for the root element. */\n className?: string\n}\n\nexport interface EnvelopeComposerProps extends EnvelopeLook {\n /** Which fields to show. The message field is always shown. Default: { name: true, email: true, subject: false } */\n fields?: EnvelopeFields\n /** Placeholder per field. Default: { name: \"Your name\", email: \"you@example.com\", subject: \"What's it about?\", message: \"Write your message…\" } */\n placeholders?: Partial>\n /** Visible label per field. Default: { name: \"From\", email: \"Email\", subject: \"Subject\", message: \"Message\" } */\n labels?: Partial>\n /** Maximum message length, shown as a live counter. Default: 500 */\n messageMaxLength?: number\n /** Send button text. Default: \"Send\" */\n sendLabel?: string\n /** Button text in the success state. Default: \"Write another\" */\n againLabel?: string\n /** Success heading, or a function of the sent values. Default: (v) => \"Sent. Thanks, {first name}.\" */\n successTitle?: string | ((values: EnvelopeValues) => string)\n /** Success body, or a function of the sent values. Default: \"Your letter is on its way. We'll write back soon.\" */\n successMessage?: string | ((values: EnvelopeValues) => string)\n /** Shown when `onSend` rejects (an Error's message is used when present). Default: \"Couldn't send. Try again.\" */\n errorMessage?: string\n /** Called with the trimmed values. Return a promise to hold the envelope until it settles; a rejection reopens it. */\n onSend?: (values: EnvelopeValues) => Promise | void\n /** Where the sealed envelope flies off to. Default: \"up-right\" */\n flyDirection?: EnvelopeFlyDirection\n /** Bring a fresh envelope back automatically after this many ms, or false to wait for \"Write another\". Default: false */\n resetAfter?: number | false\n}\n\nexport interface EnvelopeProps extends EnvelopeLook {\n /** Content of the letter, e.g. an invitation or a thank-you note. */\n children?: React.ReactNode\n /** Controlled open state. */\n open?: boolean\n /** Initial open state when uncontrolled. Default: false */\n defaultOpen?: boolean\n /** Called when the envelope asks to open or close. */\n onOpenChange?: (open: boolean) => void\n /** What opens the envelope. \"manual\" only responds to `open`. Default: \"click\" */\n trigger?: EnvelopeTrigger\n /** Accessible label for the open/close button. Default: \"Open envelope\" */\n label?: string\n /** Classes for the letter paper. */\n letterClassName?: string\n}\n\n/* ---------------------------------------------------------------- palette */\n\nconst ACCENT = \"#ff4d12\"\nconst ERROR = \"#e5484d\"\nconst EASE_OUT = [0.22, 1, 0.36, 1] as const\nconst spring: Transition = { type: \"spring\", stiffness: 460, damping: 32 }\n\n/** Flap depth as a fraction of the envelope height; the seal sits on its tip. */\nconst FLAP = 56\nconst FOLD = 0.34\nconst FLAP_CLIP = \"polygon(0 0, 100% 0, 50% 100%)\"\nconst FLAP_INNER_CLIP = \"polygon(5% 0, 95% 0, 50% 89%)\"\nconst FRONT_CLIP = `polygon(0 0, 50% ${FLAP}%, 100% 0, 100% 100%, 0 100%)`\n// Hard-edged airmail stripes (a pattern, no color blending)\nconst STRIPES =\n \"repeating-linear-gradient(-45deg, #d62839 0 9px, transparent 9px 15px, #1f4aa8 15px 24px, transparent 24px 30px)\"\n\n/** Two flat fold lines across the letter: a dark hairline with a light edge below. */\nfunction CreaseLines() {\n return [33.2, 66.5].map((top) => (\n \n ))\n}\n\nconst mix = (a: string, pct: number, b: string) => `color-mix(in oklab, ${a} ${pct}%, ${b})`\n\ntype SealKind = \"wax\" | \"stamp\" | \"dot\" | \"glow\"\n\ninterface Palette {\n env: string\n back: string\n flap: string\n flapInner: string\n crease: string\n frontInk: string\n paper: string\n ink: string\n muted: string\n seal: string\n accent: string\n font: string\n kind: SealKind\n glass: boolean\n stripes: boolean\n outline: boolean\n}\n\ntype LookInput = Pick & { accent: string }\n\nfunction palette(variant: EnvelopeVariant, o: LookInput): Palette {\n const accent = o.accent || ACCENT\n if (variant === \"airmail\") {\n const env = o.color || \"#fbfaf6\"\n const ink = o.ink || \"#1f2a44\"\n return {\n env,\n back: mix(env, 84, \"#1f2a44\"),\n flap: env,\n flapInner: mix(env, 78, \"#1f2a44\"),\n crease: \"rgba(31,42,68,0.16)\",\n frontInk: mix(ink, 60, \"transparent\"),\n paper: o.paper || \"#ffffff\",\n ink,\n muted: mix(ink, 55, \"transparent\"),\n seal: o.seal || \"#c8102e\",\n accent,\n font: \"font-mono\",\n kind: \"stamp\",\n glass: false,\n stripes: true,\n outline: false,\n }\n }\n if (variant === \"minimal\") {\n const env = o.color || \"var(--card)\"\n const ink = o.ink || \"var(--foreground)\"\n return {\n env,\n back: mix(env, 93, \"var(--foreground)\"),\n flap: env,\n flapInner: mix(env, 90, \"var(--foreground)\"),\n crease: mix(\"var(--foreground)\", 14, \"transparent\"),\n frontInk: \"var(--muted-foreground)\",\n paper: o.paper || \"var(--panel)\",\n ink,\n muted: mix(ink, 50, \"transparent\"),\n seal: o.seal || accent,\n accent,\n font: \"font-sans\",\n kind: \"dot\",\n glass: false,\n stripes: false,\n outline: true,\n }\n }\n if (variant === \"glass\") {\n const env = o.color || \"rgba(255,255,255,0.16)\"\n const ink = o.ink || \"#0a0a0a\"\n return {\n env,\n back: mix(env, 50, \"transparent\"),\n flap: mix(env, 80, \"rgba(255,255,255,0.3)\"),\n flapInner: \"rgba(255,255,255,0.08)\",\n crease: \"rgba(255,255,255,0.45)\",\n frontInk: \"rgba(255,255,255,0.9)\",\n paper: o.paper || \"rgba(255,255,255,0.92)\",\n ink,\n muted: mix(ink, 50, \"transparent\"),\n seal: o.seal || accent,\n accent,\n font: \"font-sans\",\n kind: \"glow\",\n glass: true,\n stripes: false,\n outline: true,\n }\n }\n const env = o.color || \"#d9b68a\"\n const ink = o.ink || \"#2b2118\"\n return {\n env,\n back: mix(env, 72, \"#3a220c\"),\n flap: env,\n flapInner: mix(env, 70, \"#3a220c\"),\n crease: mix(env, 62, \"#3a220c\"),\n frontInk: mix(env, 40, \"#2a1808\"),\n paper: o.paper || \"#fbf6ea\",\n ink,\n muted: mix(ink, 55, \"transparent\"),\n seal: o.seal || \"#a51d1d\",\n accent,\n font: \"font-serif\",\n kind: \"wax\",\n glass: false,\n stripes: false,\n outline: false,\n }\n}\n\n/* ------------------------------------------------------------------- seal */\n\nconst WAX_PATH = (() => {\n const pts: string[] = []\n const n = 60\n for (let i = 0; i < n; i++) {\n const a = (i / n) * Math.PI * 2\n const r = 45 + 2.2 * Math.sin(a * 7 + 0.6) + 1.3 * Math.sin(a * 13 + 2.1) + 0.8 * Math.cos(a * 5)\n pts.push(`${(50 + r * Math.cos(a)).toFixed(2)} ${(50 + r * Math.sin(a)).toFixed(2)}`)\n }\n return `M${pts.join(\" L\")} Z`\n})()\n\nconst SEAL_WIDTH: Record = { wax: \"17%\", stamp: \"16%\", dot: \"10%\", glow: \"13%\" }\n\n// Alpha mask that punches the perforated stamp edge, not a color gradient\nconst PERFORATION =\n \"radial-gradient(circle at 50% 50%, transparent 2.2px, #000 2.7px) -4px -4px / 8px 8px, linear-gradient(#000 0 0) content-box\"\n\nfunction SealMark({ p, label }: { p: Palette; label: string }) {\n const text = label.slice(0, 3)\n\n if (p.kind === \"wax\") {\n const size = text.length > 1 ? 24 : 36\n const common = {\n x: 50,\n y: 51,\n textAnchor: \"middle\" as const,\n dominantBaseline: \"central\" as const,\n fontFamily: \"Georgia, 'Times New Roman', serif\",\n fontWeight: 700,\n fontSize: size,\n }\n return (\n \n \n \n \n {text}\n {text}\n {text}\n \n )\n }\n\n if (p.kind === \"stamp\") {\n return (\n
\n
\n
\n \n \n {text}\n
\n
\n
\n \n \n \n PAR AVION\n AIR MAIL\n {[36, 50, 64].map((y) => (\n \n ))}\n \n \n )\n }\n\n if (p.kind === \"dot\") {\n return (\n \n \n \n )\n }\n\n return (\n \n {text}\n \n )\n}\n\n/* --------------------------------------------------------------- envelope */\n\ninterface BodyProps {\n p: Palette\n radius: number\n sealLabel: string\n flapOpen: boolean\n sealShown: boolean\n flapRef: React.RefObject\n flapInnerRef: React.RefObject\n sealRef: React.RefObject\n front?: React.ReactNode\n children?: React.ReactNode\n}\n\n/** Back, flap, front pocket and seal. Layers: back, open flap (10), letter (20), front (25), closed flap (30), seal (40). */\nfunction EnvelopeBody({ p, radius, sealLabel, flapOpen, sealShown, flapRef, flapInnerRef, sealRef, front, children }: BodyProps) {\n const glassFx = p.glass ? \"blur(14px) saturate(1.4)\" : undefined\n const line = p.outline ? `1px solid ${p.crease}` : undefined\n\n return (\n
\n {/* back / inside */}\n \n\n {children}\n\n {/* flap */}\n \n \n {p.stripes &&
}\n
\n \n \n \n
\n
\n\n {/* front pocket */}\n \n \n \n \n \n {front}\n
\n\n {/* seal */}\n \n
\n \n
\n \n \n )\n}\n\nfunction GlassGlow({ accent }: { accent: string }) {\n return (\n \n {/* Flat tinted shapes; the glass backdrop blur softens them where they sit behind the envelope. */}\n \n \n \n )\n}\n\nconst vars = (p: Palette, style: React.CSSProperties) =>\n ({ ...style, \"--env-accent\": p.accent, \"--env-crease\": p.crease, \"--env-error\": ERROR }) as React.CSSProperties\n\nconst shadowOf = (p: Palette) =>\n p.outline\n ? `0 0 0 1px ${p.crease}, 0 10px 30px -14px rgba(0,0,0,.35)`\n : \"0 1px 2px rgba(0,0,0,.08), 0 12px 28px -12px rgba(0,0,0,.35)\"\n\n/* --------------------------------------------------------------- composer */\n\nconst EMPTY: EnvelopeValues = { name: \"\", email: \"\", subject: \"\", message: \"\" }\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nconst DEFAULT_PLACEHOLDERS: Record = {\n name: \"Your name\",\n email: \"you@example.com\",\n subject: \"What's it about?\",\n message: \"Write your message…\",\n}\nconst DEFAULT_LABELS: Record = { name: \"From\", email: \"Email\", subject: \"Subject\", message: \"Message\" }\n\nconst FLY: Record = {\n \"up-right\": { x: 1.25, y: -1.5, r: 16 },\n up: { x: 0.04, y: -1.9, r: -5 },\n right: { x: 1.7, y: -0.12, r: 9 },\n}\n\nconst firstName = (name: string) => name.trim().split(/\\s+/)[0] ?? \"\"\n\nconst defaultTitle = (v: EnvelopeValues) => (v.name ? `Sent. Thanks, ${firstName(v.name)}.` : \"Sent. Thank you.\")\nconst defaultMessage = \"Your letter is on its way. We'll write back soon.\"\n\ntype Phase = \"idle\" | \"sending\" | \"success\"\n\nexport function EnvelopeComposer({\n variant = \"classic\",\n color,\n paper,\n ink,\n seal,\n accent = ACCENT,\n sealLabel,\n fields,\n placeholders,\n labels,\n messageMaxLength = 500,\n sendLabel = \"Send\",\n againLabel = \"Write another\",\n successTitle = defaultTitle,\n successMessage = defaultMessage,\n errorMessage = \"Couldn't send. Try again.\",\n onSend,\n flyDirection = \"up-right\",\n duration = 1,\n width = 420,\n radius = 14,\n resetAfter = false,\n className,\n}: EnvelopeComposerProps) {\n const id = useId()\n const reduced = useReducedMotion()\n const p = palette(variant, { color, paper, ink, seal, accent })\n const show = { name: fields?.name ?? true, email: fields?.email ?? true, subject: fields?.subject ?? false }\n const ph = { ...DEFAULT_PLACEHOLDERS, ...placeholders }\n const lb = { ...DEFAULT_LABELS, ...labels }\n const speed = 1 / Math.max(0.1, duration)\n\n const rootRef = useRef(null)\n const flyRef = useRef(null)\n const letterRef = useRef(null)\n const creaseRef = useRef(null)\n const footerRef = useRef(null)\n const trailRef = useRef(null)\n const flapRef = useRef(null)\n const flapInnerRef = useRef(null)\n const sealRef = useRef(null)\n const againRef = useRef(null)\n const fieldRefs = useRef>>({})\n const [paperScope, animatePaper] = useAnimate()\n\n const [values, setValues] = useState(EMPTY)\n const [errors, setErrors] = useState>>({})\n const [phase, setPhase] = useState(\"idle\")\n const [failure, setFailure] = useState(\"\")\n const [status, setStatus] = useState(\"\")\n const [sent, setSent] = useState(EMPTY)\n\n const busy = phase !== \"idle\"\n const label = (sealLabel || firstName(values.name || sent.name).charAt(0) || \"T\").toUpperCase()\n const count = values.message.length\n const firstError = ([\"name\", \"email\", \"subject\", \"message\"] as const).find((f) => errors[f])\n\n const { contextSafe } = useGSAP(\n () => {\n gsap.set(flapRef.current, { rotationX: 180, transformPerspective: 900, transformOrigin: \"50% 0%\", zIndex: 10 })\n gsap.set(letterRef.current, { transformOrigin: \"50% 100%\", transformPerspective: 1100 })\n gsap.set(sealRef.current, { opacity: 0 })\n },\n { scope: rootRef }\n )\n\n /** How far the letter travels to sit folded at the bottom of the pocket. */\n const measure = () => {\n const letter = letterRef.current\n const env = letter?.nextElementSibling as HTMLElement | null\n if (!letter || !env) return { drop: 0, envH: 0, w: 0, h: 0 }\n const overlap = letter.offsetTop + letter.offsetHeight - env.offsetTop\n const envH = env.offsetHeight\n return { drop: envH * 0.94 - overlap, envH, w: flyRef.current?.offsetWidth ?? 0, h: flyRef.current?.offsetHeight ?? 0 }\n }\n\n const runClose = contextSafe(() => {\n const { drop } = measure()\n const tl = gsap.timeline({ defaults: { ease: \"power4.inOut\" } }).timeScale(speed)\n tl.to(footerRef.current, { opacity: 0, y: 6, duration: 0.25, ease: \"power2.out\" }, 0)\n .to(letterRef.current, { scaleY: 0.64, rotationX: 22, duration: 0.36 }, 0.05)\n .to(creaseRef.current, { opacity: 1, duration: 0.25 }, 0.05)\n .to(letterRef.current, { scaleY: FOLD, rotationX: 0, duration: 0.34 }, \">-0.04\")\n .to(letterRef.current, { y: drop, duration: 0.55, ease: \"power3.in\" }, \">-0.06\")\n .addLabel(\"flap\", \">-0.08\")\n .to(flapRef.current, { rotationX: 0, duration: 0.62 }, \"flap\")\n .set(flapRef.current, { zIndex: 30 }, \"flap+=0.31\")\n .set(flapInnerRef.current, { opacity: 0 }, \"flap+=0.31\")\n return tl\n })\n\n const runFly = contextSafe((onDone: () => void) => {\n const { w, h } = measure()\n const v = FLY[flyDirection]\n const x = w * v.x\n const y = h * v.y\n const angle = (Math.atan2(y, x) * 180) / Math.PI\n const postmark = sealRef.current?.querySelector(\"[data-postmark]\")\n const tl = gsap.timeline().timeScale(speed)\n tl.fromTo(\n sealRef.current,\n { opacity: 0, scale: 1.9, y: -34, rotation: -14 },\n { opacity: 1, scale: 1, y: 0, rotation: 0, duration: 0.32, ease: \"power4.in\" }\n )\n .to(sealRef.current, { scaleX: 1.18, scaleY: 0.82, duration: 0.08, ease: \"power2.out\" })\n .to(sealRef.current, { scaleX: 1, scaleY: 1, duration: 0.5, ease: \"elastic.out(1, 0.45)\" })\n if (postmark) {\n tl.fromTo(postmark, { opacity: 0, scale: 1.25 }, { opacity: 1, scale: 1, duration: 0.18, ease: \"power4.in\" }, \"-=0.45\")\n }\n tl.to(flyRef.current, { rotation: -5, y: 10, scale: 0.97, duration: 0.32, ease: \"power2.inOut\" }, \"+=0.12\")\n .addLabel(\"fly\")\n .to(flyRef.current, { x, y, rotation: v.r, scale: 0.55, opacity: 0, filter: \"blur(6px)\", duration: 0.75, ease: \"power4.in\" }, \"fly\")\n .set(trailRef.current, { xPercent: -100, yPercent: -50, transformOrigin: \"100% 50%\", rotation: angle }, \"fly\")\n .fromTo(trailRef.current, { opacity: 0, scaleX: 0 }, { opacity: 0.85, scaleX: 1, duration: 0.4, ease: \"power2.out\" }, \"fly+=0.2\")\n .to(trailRef.current, { opacity: 0, duration: 0.3 }, \">-0.05\")\n .call(onDone, [], \"fly+=0.62\")\n return tl\n })\n\n const runReopen = contextSafe((tl: gsap.core.Timeline) => {\n return new Promise((resolve) => {\n if (tl.progress() === 0) {\n tl.kill()\n resolve()\n return\n }\n tl.eventCallback(\"onReverseComplete\", () => resolve())\n tl.timeScale(speed * 1.5).reverse()\n })\n })\n\n const runAgain = contextSafe(() => {\n const { drop, envH } = measure()\n const focus = () => fieldRefs.current[show.name ? \"name\" : \"message\"]?.focus()\n gsap.killTweensOf([flyRef.current, letterRef.current, flapRef.current, sealRef.current, trailRef.current])\n gsap.set(flapRef.current, { rotationX: 180, zIndex: 10 })\n gsap.set(flapInnerRef.current, { opacity: 1 })\n gsap.set([sealRef.current, trailRef.current], { opacity: 0 })\n if (reduced) {\n gsap.set(letterRef.current, { y: 0, scaleY: 1, rotationX: 0 })\n gsap.set([creaseRef.current], { opacity: 0 })\n gsap.set(footerRef.current, { opacity: 1, y: 0 })\n gsap.set(flyRef.current, { x: 0, y: 0, rotation: 0, scale: 1, clearProps: \"filter\" })\n gsap.to(flyRef.current, { opacity: 1, duration: 0.25, onComplete: focus })\n return\n }\n gsap.set(letterRef.current, { y: drop, scaleY: FOLD, rotationX: 0 })\n gsap.set(creaseRef.current, { opacity: 1 })\n gsap.set(footerRef.current, { opacity: 0, y: 6 })\n gsap\n .timeline({ onComplete: focus })\n .timeScale(speed)\n .fromTo(\n flyRef.current,\n { x: 0, y: envH * 0.7, rotation: -4, scale: 0.92, opacity: 0, filter: \"blur(6px)\" },\n { y: 0, rotation: 0, scale: 1, opacity: 1, filter: \"blur(0px)\", duration: 0.8, ease: \"expo.out\" }\n )\n .set(flyRef.current, { clearProps: \"filter\" })\n .to(letterRef.current, { y: 0, duration: 0.6, ease: \"expo.out\" }, 0.35)\n .to(letterRef.current, { scaleY: 1, duration: 0.55, ease: \"expo.out\" }, 0.6)\n .to(creaseRef.current, { opacity: 0, duration: 0.35 }, 0.7)\n .to(footerRef.current, { opacity: 1, y: 0, duration: 0.45, ease: \"expo.out\" }, 0.8)\n })\n\n const runHide = contextSafe((onDone: () => void) => {\n gsap.to(flyRef.current, { opacity: 0, duration: 0.25, onComplete: onDone })\n })\n\n const shake = () => {\n if (!paperScope.current || reduced) return\n animatePaper(paperScope.current, { x: [0, -10, 9, -6, 4, -2, 0] }, { duration: 0.5, ease: \"easeOut\" })\n }\n\n const validate = (v: EnvelopeValues) => {\n const next: Partial> = {}\n if (show.name && !v.name) next.name = \"Add your name\"\n if (show.email && v.email && !EMAIL_RE.test(v.email)) next.email = \"Check the email address\"\n if (!v.message) next.message = \"Write a message first\"\n return next\n }\n\n const send = async () => {\n if (busy) return\n const snapshot: EnvelopeValues = {\n name: show.name ? values.name.trim() : \"\",\n email: show.email ? values.email.trim() : \"\",\n subject: show.subject ? values.subject.trim() : \"\",\n message: values.message.trim(),\n }\n const invalid = validate(snapshot)\n const firstInvalid = ([\"name\", \"email\", \"subject\", \"message\"] as const).find((f) => invalid[f])\n if (firstInvalid) {\n setErrors(invalid)\n setStatus(invalid[firstInvalid] ?? \"\")\n shake()\n fieldRefs.current[firstInvalid]?.focus()\n return\n }\n\n setErrors({})\n setFailure(\"\")\n setPhase(\"sending\")\n setStatus(\"Sending your message…\")\n\n const finish = () => {\n setSent(snapshot)\n setPhase(\"success\")\n setStatus(\"Message sent.\")\n }\n const fail = (err: unknown) => {\n const text = err instanceof Error && err.message ? err.message : errorMessage\n setPhase(\"idle\")\n setFailure(text)\n setStatus(text)\n shake()\n }\n\n const request = Promise.resolve().then(() => onSend?.(snapshot))\n\n if (reduced) {\n try {\n await request\n runHide(finish)\n } catch (err) {\n fail(err)\n }\n return\n }\n\n const tl = runClose()\n const closed = new Promise((resolve) => {\n tl.eventCallback(\"onComplete\", () => resolve())\n })\n try {\n await Promise.all([request, closed])\n } catch (err) {\n await runReopen(tl)\n gsap.to(footerRef.current, { opacity: 1, y: 0, duration: 0.3 })\n fail(err)\n return\n }\n runFly(finish)\n }\n\n const again = () => {\n setValues(EMPTY)\n setErrors({})\n setFailure(\"\")\n setStatus(\"\")\n setPhase(\"idle\")\n runAgain()\n }\n\n const autoReset = useEffectEvent(() => again())\n useEffect(() => {\n if (phase !== \"success\" || resetAfter === false) return\n const t = setTimeout(autoReset, resetAfter)\n return () => clearTimeout(t)\n }, [phase, resetAfter])\n\n const update = (field: EnvelopeField) => (e: React.ChangeEvent) => {\n const next = e.target.value\n setValues((v) => ({ ...v, [field]: next }))\n if (errors[field]) setErrors((er) => ({ ...er, [field]: undefined }))\n if (failure) setFailure(\"\")\n }\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (e.key !== \"Enter\") return\n if (e.metaKey || e.ctrlKey) {\n e.preventDefault()\n void send()\n } else if (e.target instanceof HTMLInputElement) {\n e.preventDefault()\n }\n }\n\n const input = (field: Exclude, type = \"text\", autoComplete?: string) => (\n \n )\n\n const title = typeof successTitle === \"function\" ? successTitle(sent) : successTitle\n const body = typeof successMessage === \"function\" ? successMessage(sent) : successMessage\n\n return (\n
\n {p.glass && }\n\n {\n e.preventDefault()\n void send()\n }}\n onKeyDown={onKeyDown}\n className=\"relative isolate\"\n >\n {/* letter */}\n
\n \n {(show.name || show.email) && (\n
\n {show.name && input(\"name\", \"text\", \"name\")}\n {show.email && input(\"email\", \"email\", \"email\")}\n
\n )}\n {show.subject &&
{input(\"subject\")}
}\n\n \n {\n fieldRefs.current.message = el\n }}\n id={`${id}-message`}\n value={values.message}\n onChange={update(\"message\")}\n placeholder={ph.message}\n maxLength={messageMaxLength}\n rows={3}\n disabled={busy}\n aria-invalid={errors.message ? true : undefined}\n aria-describedby={`${id}-count${errors.message ? ` ${id}-error` : \"\"}`}\n className=\"block w-full resize-none bg-transparent text-sm leading-6 outline-none placeholder:opacity-50 disabled:opacity-100\"\n style={{\n color: p.ink,\n caretColor: p.accent,\n // Hard-edged ruled lines (a pattern, no color blending)\n backgroundImage: `repeating-linear-gradient(to bottom, transparent 0 23px, ${errors.message ? ERROR : p.crease} 23px 24px)`,\n backgroundAttachment: \"local\",\n }}\n />\n
\n \n {firstError ? (\n \n {errors[firstError]}\n \n ) : (\n \n )}\n \n messageMaxLength * 0.9 ? p.accent : p.muted }}\n aria-label={`${count} of ${messageMaxLength} characters`}\n >\n {count}/{messageMaxLength}\n \n
\n \n \n
\n
\n \n\n \n \n {failure ? (\n \n {failure}\n \n ) : (\n \n \n ⌘/Ctrl\n \n \n Enter\n \n to send\n \n )}\n \n \n {sendLabel}\n \n \n \n }\n >\n \n \n \n\n
\n {status}\n
\n\n \n {phase === \"success\" && (\n againRef.current?.focus({ preventScroll: true })}\n >\n \n \n \n \n

{title}

\n

{body}

\n \n \n {againLabel}\n \n \n \n )}\n \n \n )\n}\n\n/* ------------------------------------------------------------ reveal only */\n\nexport function Envelope({\n children,\n variant = \"classic\",\n color,\n paper,\n ink,\n seal,\n accent = ACCENT,\n sealLabel = \"T\",\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n trigger = \"click\",\n label = \"Open envelope\",\n duration = 1,\n width = 420,\n radius = 14,\n className,\n letterClassName,\n}: EnvelopeProps) {\n const reduced = useReducedMotion()\n const p = palette(variant, { color, paper, ink, seal, accent })\n const speed = 1 / Math.max(0.1, duration)\n\n const rootRef = useRef(null)\n const envRef = useRef(null)\n const letterRef = useRef(null)\n const creaseRef = useRef(null)\n const flapRef = useRef(null)\n const flapInnerRef = useRef(null)\n const sealRef = useRef(null)\n const tlRef = useRef(null)\n\n const [inner, setInner] = useState(defaultOpen)\n const inView = useInView(rootRef, { once: true, amount: 0.6 })\n const isOpen = openProp ?? (trigger === \"inView\" ? inner || inView : inner)\n const openRef = useRef(isOpen)\n const shownRef = useRef(false)\n\n const setOpen = (next: boolean) => {\n if (next === isOpen) return\n if (openProp === undefined) setInner(next)\n onOpenChange?.(next)\n }\n\n const announceInView = useEffectEvent(() => {\n if (openProp === undefined && !inner) onOpenChange?.(true)\n })\n useEffect(() => {\n if (trigger === \"inView\" && inView) announceInView()\n }, [trigger, inView])\n\n // Build the open timeline (paused), then park it at the current state.\n useGSAP(\n () => {\n const letter = letterRef.current\n const env = envRef.current\n if (!letter || !env) return\n const envH = env.offsetHeight\n const h = Math.max(1, letter.offsetHeight)\n const closed = Math.min(FOLD, (envH * 0.85) / h)\n // Open: the letter's tucked bottom stays in the pocket (22% deep)\n const rest = -envH * 0.72\n\n gsap.set(flapRef.current, { rotationX: 0, transformPerspective: 900, transformOrigin: \"50% 0%\", zIndex: 30 })\n gsap.set(flapInnerRef.current, { opacity: 0 })\n gsap.set(letter, { transformOrigin: \"50% 100%\", scaleY: closed, y: 0 })\n gsap.set(creaseRef.current, { opacity: 1 })\n gsap.set(sealRef.current, { opacity: 1, scale: 1, y: 0 })\n\n const tl = gsap.timeline({ paused: true, defaults: { ease: \"power4.inOut\" } })\n tl.to(sealRef.current, { scale: 1.12, duration: 0.12, ease: \"power2.out\" })\n .to(sealRef.current, { scale: 0.5, y: -8, opacity: 0, duration: 0.26, ease: \"power4.in\" })\n .addLabel(\"flap\", \"-=0.05\")\n .to(flapRef.current, { rotationX: 180, duration: 0.62 }, \"flap\")\n .set(flapRef.current, { zIndex: 10 }, \"flap+=0.31\")\n .set(flapInnerRef.current, { opacity: 1 }, \"flap+=0.31\")\n .to(letter, { y: rest, duration: 0.8, ease: \"expo.out\" }, \"flap+=0.4\")\n .to(letter, { scaleY: 1, duration: 0.7, ease: \"expo.out\" }, \"flap+=0.55\")\n .to(creaseRef.current, { opacity: 0, duration: 0.45, ease: \"power2.out\" }, \"<0.15\")\n // Reserve exactly as much room above as the open letter actually sticks out,\n // measured from the finished pose so the layout never jumps or overflows\n tl.progress(1)\n const protrude = env.getBoundingClientRect().top - letter.getBoundingClientRect().top\n // Assigned directly: gsap would keep the initial % unit and read 178px as 178%\n if (rootRef.current) rootRef.current.style.paddingTop = `${Math.max(12, Math.round(protrude + 12))}px`\n tl.timeScale(speed).progress(openRef.current ? 1 : 0)\n tlRef.current = tl\n return () => {\n tlRef.current = null\n }\n },\n { scope: rootRef, dependencies: [speed, variant], revertOnUpdate: true }\n )\n\n useGSAP(\n () => {\n openRef.current = isOpen\n const tl = tlRef.current\n if (!tl) return\n if (!shownRef.current || reduced) {\n shownRef.current = true\n tl.pause().progress(isOpen ? 1 : 0)\n return\n }\n tl.timeScale(isOpen ? speed : speed * 1.4)\n if (isOpen) tl.play()\n else tl.reverse()\n },\n { dependencies: [isOpen] }\n )\n\n const hover = trigger === \"hover\"\n const interactive = trigger === \"click\" || trigger === \"hover\"\n\n return (\n setOpen(true) : undefined}\n onPointerLeave={hover ? () => setOpen(false) : undefined}\n >\n {p.glass && }\n \n \n \n \n {children}\n \n \n \n \n \n {interactive && (\n setOpen(!isOpen)}\n className=\"absolute inset-0 z-[35] cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-(--env-accent) focus-visible:ring-offset-2 focus-visible:ring-offset-transparent\"\n style={{ borderRadius: radius }}\n />\n )}\n \n \n \n )\n}\n", "type": "registry:component" } ], "docs": "Docs, live playground and every prop: https://trytweenly.vercel.app/docs/components/envelope-reveal", "type": "registry:component" }