Secure Envelope

An interactive classified envelope sleeve & travel pass component featuring a secret card that glides out horizontally on hover and elevates gracefully onto the cover on click. Designed with a vector-precise thumb notch, authentic security crest seals, and luxurious 3D dual-sided flip physics.

SecureEnvelope brings tactile physical curiosity to train online tickets, travel booking passes, security dossiers, coupon reward vouchers, and VIP cards.

Biometric NFC SmartCard (Quantum Vault Variant)

High-tech biometric identity smartcard & encrypted key vault sleeve. Features golden EMV microchip, contactless NFC glyph, clearance level badge, encrypted magnetic stripe, and crypto signature panel with full light/dark theme adaptivity.

Design VariantcardDesign"smart-card": activates the Quantum Key Vault biometric smartcard layout and cyber nexus seal styling.
Data ObjectdatasmartCardData: passes essential holder name, role title, and clearance level. Chip serial, security keys, and cryptographic hashes use built-in defaults.
InteractioninteractionMode"step-flip": splits the animation into 3 distinct clicks: Click 1 opens to front smartcard, Click 2 flips to encrypted magnetic stripe & credentials, Click 3 closes.

Active Color

Auto Flip (Classic Voucher / Classified)

1st click slides the card out from the sleeve, elevates onto the front, and automatically flips 180° in-place to reveal the back details. 2nd click flips back and returns inside the sleeve.

Data ObjectdatavoucherData: passes key title, subtitle, and discount quote while all badges, metric pillars, and seals use component defaults.
InteractioninteractionMode"auto-flip": automatically executes the full slide-out and in-place 180° flip on first click.

Train Online Ticket (Hyperbolt Express Variant)

Exact high-speed rail ticket and envelope design. Features the top blue pill header, passenger info, seat/train numbers, vertical barcode, watermarked station route bar, tear-off stub, and Hyperbolt bullet train box sleeve.

Data ObjectdataticketData: passes essential passenger name, route, seat, and train number. All other train details automatically use authentic built-in defaults.
Design VariantcardDesign"train-ticket": activates the Hyperbolt Express train online ticket layout for both the card and the outer sleeve box.
InteractioninteractionMode"step-flip": splits the animation into 3 distinct clicks: Click 1 opens to front ticket, Click 2 flips to reverse route overview, Click 3 closes.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Secure Envelope

npx shadcn@latest add @algorize-ui/secure-envelope

components/custom/blocks/SecureEnvelopeBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Secure Envelope needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Rail Tickets & Biometric SmartCards

Rich variety of real-world templates including Hyperbolt European train tickets, classic classified dossiers, and biometric NFC smartcards with EMV microchips and full light/dark theme adaptivity.

Two-Stage Flight Choreography

When clicked, the document slides out horizontally past the sleeve edge, elevates in front on the z-axis, and glides back down with a gentle tilt onto the front cover.

Vector Thumb Scoop Notch

Engineered with a clean, subpixel-sharp SVG inward scoop notch along the right edge, exposing the card inside exactly like a high-end physical envelope sleeve.

3D In-Place Flip Physics

Features seamless 180-degree in-place 3D card flips with true perspective, preserved backface visibility, and dynamic theme adaptivity.

Best Practices & Guidelines

Keyboard & Accessibility

SecureEnvelope supports keyboard navigation: focus it with Tab and trigger the opening/closing animation using Enter or Space, or close with Escape.

Mobile & Touch Interaction

On touch devices where hover is unavailable, tapping the folder launches the smooth opening flight sequence immediately.

Biometric SmartCards & Access Credentials

Pass cardDesign="smart-card" with custom clearance levels, holder name, and department for cybersecurity credentials, VIP access badges, and identity portals.

Props Reference

Prop	Type	Default	Description
`data`	`SecureEnvelopeData \| SecureEnvelopeData[]`	`undefined`	Structured data object containing all ticket, pass, keycard, voucher, and card metric properties. Can also be passed as an array.
`cardDesign`	`"classified" \| "train-ticket" \| "smart-card"`	`"classified"`	Selects the visual template: `"smart-card"` for biometric NFC smartcards, `"train-ticket"` for European railway tickets, or `"classified"` for confidential dossiers.
`interactionMode`	`"auto-flip" \| "step-flip"`	`"auto-flip"`	Controls opening behavior: `"auto-flip"` opens and flips automatically on 1st click; `"step-flip"` splits the interaction into 3 clicks (Click 1 opens, Click 2 flips, Click 3 closes).
`passengerName`	`string`	`"Barbara M. Sandoval"`	Name of passenger printed on the train ticket.
`routeText`	`string`	`"ZÜRICH HB - PARIS-EST"`	Train route printed across the blue banner and solid black badge.
`seatNumber`	`string`	`"18A"`	Assigned train seat number.
`trainNumber`	`string`	`"6"`	Assigned train carriage/train number.
`date`	`string`	`"25/11/2024"`	Scheduled date of travel.
`departureTime`	`string`	`"06.30"`	Departure timestamp.
`trainCompany`	`string`	`"HYPERBOLT EXPRESS"`	Transit brand printed on the sleeve cover and ticket back.
`slogan`	`string`	`"UNLEASH THE POWER OF SPEED WITH HYPERBOLT EXPRESS"`	High-speed transit slogan on the sleeve and ticket back.
`barcodeNumber`	`string`	`"0 734664 235788"`	Code string for the vertical barcodes.
`websiteUrl`	`string`	`"HYPERBOLTEXPRESS.COM"`	Website URL printed on the sleeve and reverse side.
`folderColor`	`string`	`undefined (var(--primary))`	Optional custom theme color override for the folder sleeve and accents. Defaults to the active theme's primary color.
`initialPeek`	`number`	`38`	Horizontal pixel distance the card peeks out from the notch in resting idle state.
`hoverPeek`	`number`	`88`	Horizontal pixel distance the card glides out on hover before being clicked.
`cardVariant`	`"adaptive" \| "ivory"`	`"adaptive"`	Switches between dynamic dual-theme adaptivity (light in Light Mode, dark in Dark Mode) and classic physical ivory cardstock.
`defaultOpen`	`boolean`	`false`	Whether the folder opens directly in its elevated resting state.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Callback fired whenever the card opens or returns inside the sleeve.