TITLE: Amelia & Rowan — a letterpress invitation in a sealed envelope
PROMPT: Hand-build a single self-contained HTML page that reads as a physical letterpress wedding invitation, with no external assets and no occurrence of the substring "http" anywhere. Ground: warm cotton paper #f7f4ec with two soft radial lights and a fine repeating-linear-gradient paper fibre texture, plus a ui-monospace masthead row ("No. 082 — Letterpress" / "Cotton 600gsm · Foil & Wax") in #8c8577. Centre a closed envelope (clamp 276px–540px wide, aspect-ratio 1.52) built from four stacked layers inside a perspective:1500px preserve-3d wrapper: a cotton back panel, an invitation card (inset 6%/8%), an envelope front clipped with polygon(0 0, 50% 42%, 100% 0, 100% 100%, 0 100%), and a top flap (height 58%) whose face is clipped polygon(0 0, 100% 0, 50% 100%) with transform-origin 50% 0. A wax seal (#7c3a2d radial gradients, 1px inner ring, Georgia monogram "A") sits at the flap tip. Clicking the envelope rotates the flap to rotateX(-180deg) over .95s cubic-bezier(.5,0,.2,1) while the card translates translateY(-58%) scale(1.015) over 1.05s to slide out and settle. Card typography: foil-gradient monogram "A&R" via background-clip:text with background-position tied to a --mx variable, an inline-SVG botanical rule with hover-rotating leaves, a tracked system-ui 500 kicker, italic Georgia names with a dual letterpress text-shadow (0 1px 0 white over 0 -1px 1px ink), small-caps Georgia date lines, and a ui-monospace wax-red RSVP line. Pointer movement over the room tilts the envelope (rotateX/rotateY via --rx/--ry, damped 12deg/9deg) and moves a radial gloss across the card, so the emboss and foil catch the light. Seal presses on load with a scale/rotate keyframe and an expanding ring. Respect prefers-reduced-motion by disabling the seal animation and shortening transitions. All CSS in one inline style block, all JS in one IIFE at the end of body.
DESCRIPTION: A quiet, tactile piece of stationery design rendered in the browser: a closed cotton envelope with a wax seal that opens in real 3D when clicked, releasing an embossed invitation card. The card carries a foil monogram, a botanical rule that stirs under the cursor, and letterpress typography whose dual shadows read as a physical impression in thick paper. Tilting the pointer moves a soft gloss across the paper so the foil and emboss brighten and dim, and the whole scene sits in a pool of floor shadow on a fibre-textured cotton ground. Nothing relies on entrance fades, so a frozen render shows the complete closed envelope.
TECHNIQUES: CSS 3D preserve-3d envelope with clip-path polygon panels and a rotateX flap hinge; translateY card ejection with a long easing curve; wax seal built from stacked radial gradients, inset shadows and a press keyframe with an expanding ring; foil via background-clip:text over a multi-stop brass gradient whose background-position follows a --mx custom property; letterpress emboss from dual text-shadow (light above, ink below); inline SVG botanical rule with transform-box:fill-box leaves that rotate on hover via per-leaf --r and --spin variables; paper fibre texture from layered repeating-linear-gradients; radial-gradient floor shadow (no filter); pointer-driven tilt throttled through requestAnimationFrame with a pending flag; prefers-reduced-motion branch.
INTERACTION: Clicking the envelope opens or closes it (flap rotates up in 3D, card slides out). Clicking the wax seal presses it — a squash-and-rebound animation with an expanding ring — without toggling the envelope. Moving the pointer across the page tilts the envelope up to 12deg and slides the gloss highlight and foil gradient across the card; leaving the room resets the tilt. Hovering the botanical rule makes its leaves rotate outward. Enter/Space opens the envelope when it has focus, Enter/Space on the seal presses it, and Escape closes an open envelope. The cue line under the scene swaps between "Click the envelope to open" and "Click the envelope to close".