Animated MacBook
A closed MacBook that hinges open and powers on when you hover, in ten finishes.
Glass Envelope
ProA frosted glass envelope with stacked photo cards that fan on hover, then lift from the frame when opened with a click.
illustrationglassenvelopemailphotoshovericoncard
Overview
Glass Envelope is a React and Tailwind CSS icon card of a milky glass mail packet holding two photo cards, for gallery or inbox features, in Next.js or any React app. Hovering fans the photos, and clicking lifts them out of the frame until a second click tucks them back. The letter and each photo are real buttons with spoken labels, so it works from the keyboard, and reduced motion keeps the poses without the spring. Sender, subject, badge count, and glass tint are props. Only the first two images render, so extra images are never shown or fetched.
Installation
Run the following command
~/your-project
pnpm dlx wensity@latest add glass-envelope
~/your-project
npx wensity@latest add glass-envelope
~/your-project
yarn dlx wensity@latest add glass-envelope
~/your-project
bunx wensity@latest add glass-envelope
Usage
Import GlassEnvelope from @/components/wensity/glass-envelope and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.
app/example.tsx
"use client";import { GlassEnvelope } from "@/components/wensity/glass-envelope";export default function Example() {return (<GlassEnvelopefrom="Darkroom"subject="Re: Prints"count={36}/>);}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 340 | Card edge length in pixels. Clamped to a 220 minimum. |
from | string | "Darkroom" | Sender line on the front letter. |
subject | string | "Re: Prints" | Subject line on the front letter. |
images | GlassEnvelopeImage[] | Two Wensity landscape scans | Photo cards tucked in the envelope. Each needs src and alt. Only the first two are rendered. |
count | number | 36 | Badge count on the letter. |
glassTint | string | "#ffffff" | Tint for the glass body and flap. |
label | string | Derived from the sender and count | Accessible name announced for the illustration. |
