Include the word fail in your message to see the error path

Controls

variant

color

paper

ink

seal

accent

sealLabel

messageMaxLength

sendLabel

againLabel

successTitle

successMessage

flyDirection

durationx

widthpx

radiuspx

Envelope

A send-a-message form as a letter: it folds into the envelope, the flap closes, a seal stamps on and the envelope flies off.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/envelope

import { EnvelopeComposer } from "@/components/envelope"

export function Demo() {
  return (
    <EnvelopeComposer
      onSend={async (values) => { await fetch("/api/contact", { method: "POST", body: JSON.stringify(values) }) }}
    />
  )
}

Updates live as you change the controls. Only non-default props are included.