twc-032 / A study by Syafril · not client work
A web wedding invitation for a fictional couple, Laras & Dimas: a terracotta envelope sealed with their initials opens on an ivory card with the akad and reception, a countdown, a schematic venue plan and a calendar file; the reply card turns attendance into a WhatsApp message to a fictional number. A guest’s name can travel in the link and is only shown. No music, verses, gift accounts or photographs.
READ THE DESIGN
The capture shows the implemented opening. Notes connect its composition to the working experience and its mobile behavior.
The terracotta envelope opens the page: Open the invitation turns the flap back and slides the card out. The card is always in the page below it; with reduced motion or without JavaScript the envelope is already open.
A guest’s name travels in the link (?untuk=): letters, digits, spaces and .,'-() only, at most 60 characters, otherwise the general greeting. It is shown and offered to the reply card, never stored or sent.
The ivory card reads like print: the couple in Bellefair with a terracotta ampersand, their parents, the date, both events with times in WIB, the countdown and the venue with a schematic plan — before any ornament.
#f3ebdd#3a2417#9a4330#d6c25e#fbf7ef#6b5040WHAT IS HERE / WHAT COMES NEXT
An invitation guests can read and answer.
This tool includes a working workspace and its own component book. Its controls operate on local state.
Exports are generated in your browser. No account, cloud storage or external service is connected.
Fictional design study. Laras & Dimas, their parents, the date, Pendopo Sekar Arum and its address do not exist; the number +44 7700 900142 is from a range reserved for drama and belongs to no one. Nothing is sent from the page and no guest list is kept.
Page scope, brand assets, content, handover, hosting, costs and support are discussed in a consultation before work begins. The demo is a reference for that conversation.
Prepare a brief for this directionA printed invitation, brought to the screen. In Indonesia a wedding is announced with a card in an envelope addressed to each guest, and answered with a reply. Sampul keeps that order: the envelope with the guest’s name and the couple’s seal under a curved janur, the card with names, parents, events, date and place, then the reply card. The envelope opens the page; it never stands between the guest and the facts.
The materials of a printed invitation, not gold foil: a terracotta envelope, a janur-yellow arch and seal, ivory card stock with a double rule, and sogan-brown ink. Names, date and place are read before any ornament; the janur arch and the venue plan are original drawings that never carry text.
Bellefair 400, a high-contrast transitional display serif with sharp serifs and a graceful ampersand, sets the couple’s names, titles, the date, event names, countdown figures, the seal and the wordmark: the voice of an engraved card, not a script that hides a long name. DM Sans carries labels, times, the address, the form and the message. Prata 400 stays an unused recorded fallback.
Three pages and a design book. The invitation sets the 640px envelope over the card: names and parents left, the date, events and countdown right, then the venue and its plan, then the call to reply. The reply page puts the form left and the 460px reply card right. Below 900px everything is one column; below 600px the envelope stands upright at 4:5.
With JavaScript and motion allowed, the envelope is sealed before the first paint. Open the invitation turns the flap back (0.42s), slides the card out (0.36s) and moves focus to the card’s title. The card is always in the page and can be scrolled to. With reduced motion — also when it changes while the page is open — or without JavaScript the envelope is already open. The countdown changes once a minute, without rolling digits.
A static bilingual Next.js demo. The envelope is HTML and SVG moved with CSS transforms; a small inline script seals it before paint. The guest name is read from ?untuk= in the browser, limited to 60 letters, digits, spaces and .,'-(), and never stored. The reply draft is kept as { version: 1, reply } under collection-sampul-rsvp-v1, at most 2 KiB, validated with zod/mini on every read and write. The .ics file is generated in the page.
The card is an article with ordered headings, a description list for the events and a figure with a title for the plan. The reply form uses fieldsets and legends; errors sit beside their group and focus moves to the first one. The countdown is not announced every minute. Copy and download report what actually happened; nothing claims to be sent.
A digital business card for a small trade.
Pick the goods, ask in one note.