Story
Classic
Theme Gallery
Every BrideCard theme, screen by screen — normal state beside the open action menu, with a copyable AI reconstruction prompt per theme. All features and sections are turned on in the previews.
Story · Cinema
13 screens · each shown in its normal state and with the action menu (bottom sheet) open. The previews are live — tap a FAB or drag a sheet to replay the interaction.
01
cover— Welcome / cover
The cover has no action menu —
it's the “tap to start” screen.
it's the “tap to start” screen.
Prompt — cover screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "cover" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Content: large italic couple names "Timo & Anna", a "T & A" monogram, the date line, and a LIVE countdown (days / hours / min / sec). Background scene: "PELHAM ESTATE · GARDEN".
Chrome: top progress-bar segments (one per screen). No action button — a pulsing "TAP TO BROWSE" hint instead.
INTERACTION: tapping the right ~68% advances to the next screen, the left 32% goes back, press-and-hold pauses. The cover has NO slide-up sheet.02
ourstory— How it all began.
Prompt — ourstory screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "ourstory" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "OUR STORY", title "How it all / began.", italic body "A few words about us.". Background scene: "SAVE THE DATE".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Our story" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the couple's story text with a small milestone timeline.
Also: tap right → next screen, left 32% → previous, hold → pause.03
venue— Where we celebrate.
Prompt — venue screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "venue" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "WHERE WE CELEBRATE", title "Where we / celebrate.", italic body "Find your way to us.". Background scene: "THE GLASSHOUSE · 14:00".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Map & route" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the venue(s) with name, address, a map and a 'get directions' link.
Also: tap right → next screen, left 32% → previous, hold → pause.04
timeline— How the day unfolds.
Prompt — timeline screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "timeline" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "THE DAY", title "How the day / unfolds.", italic body "From the ceremony to the last song.". Background scene: "THE DAY · 13:30 – LATE".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Day timeline" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the day's schedule as a vertical timeline (time · title · note).
Also: tap right → next screen, left 32% → previous, hold → pause.05
menu— What's on the table.
Prompt — menu screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "menu" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "FOOD & DRINK", title "What's on / the table.", italic body "Several courses, chosen with love.". Background scene: "THE ORANGERY · DINNER".
Chrome: top progress bars; a centred bottom pill CTA labelled like "The menu" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the multi-course menu; guests can like dishes and pick their main course.
Also: tap right → next screen, left 32% → previous, hold → pause.06
dress— Dressed for the day.
Prompt — dress screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "dress" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "DRESS CODE", title "Dressed for / the day.", italic body "Cocktail attire — suits and cocktail dresses.". Background scene: "DRESS CODE · GARDEN COCKTAIL".
Chrome: top progress bars; a centred bottom pill CTA labelled like "What to wear" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the dress code, a colour palette and a 'please avoid' note.
Also: tap right → next screen, left 32% → previous, hold → pause.07
gifts— A few little wishes.
Prompt — gifts screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "gifts" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "IF YOU'D LIKE", title "A few little / wishes.", italic body "Your presence is the greatest gift.". Background scene: "A FEW SMALL WISHES".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Wishlist" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the gift wishlist; items can be claimed.
Also: tap right → next screen, left 32% → previous, hold → pause.08
vote— Cast your vote.
Prompt — vote screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "vote" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "YOU DECIDE", title "Cast your / vote.", italic body "Two quick questions for the night.". Background scene: "THE DANCE FLOOR · LATE".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Your vote" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains a short poll (one or two questions) with options and a live tally.
Also: tap right → next screen, left 32% → previous, hold → pause.09
gallery— Share your photos.
Prompt — gallery screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "gallery" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "MOMENTS", title "Share your / photos.", italic body "Visible from the wedding day.". Background scene: "MOMENTS · #TIMOUNDANNA".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Gallery" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains the shared photo album plus an upload control.
Also: tap right → next screen, left 32% → previous, hold → pause.10
guestbook— Leave a few words.
Prompt — guestbook screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "guestbook" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "GUESTBOOK", title "Leave a few / words.", italic body "A greeting, a wish, a memory.". Background scene: "A FEW SMALL WISHES".
Chrome: top progress bars; a centred bottom pill CTA labelled like "Sign" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains a guestbook: a write form plus existing approved messages.
Also: tap right → next screen, left 32% → previous, hold → pause.11
faq— Common questions.
Prompt — faq screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "faq" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "GOOD TO KNOW", title "Common / questions.", italic body "The essentials at a glance.". Background scene: "THE GLASSHOUSE · 14:00".
Chrome: top progress bars; a centred bottom pill CTA labelled like "FAQ" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains frequently asked questions as an expand/collapse accordion.
Also: tap right → next screen, left 32% → previous, hold → pause.12
rsvp— Will you be there?
Prompt — rsvp screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "rsvp" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "ONE REQUEST", title "Will you / be there?", italic body "Let us know soon.". Background scene: "SAVE THE DATE".
Chrome: top progress bars; a centred bottom pill CTA labelled like "RSVP" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains a multi-step RSVP form (attendance → name & plus-ones → details → a success state with calendar links).
Also: tap right → next screen, left 32% → previous, hold → pause.13
closing— See you soon.
Prompt — closing screen + action slide-out
Reconstruct ONE screen of a mobile wedding invitation ("BrideCard", Story style, Cinema variant) — the "closing" screen.
Canvas 390×844. Serif "Cormorant Garamond", sans "Jost". Tokens: ink #f7f0e5, inkSoft rgba(247,240,229,0.74), accent #7a2b34, FAB pill bg #7a2b34.
Layout: Full-bleed background photo with a bottom-weighted dark scrim; the text cluster (kicker → title → italic body) is anchored bottom-left (bottom: 116px, padding: 0 26px, left-aligned). Cover is a centred cluster.
Text: kicker "FAREWELL", title "See you / soon.", italic body "We can't wait to celebrate with you.". Background scene: "THE DANCE FLOOR · LATE".
Chrome: top progress bars; a centred bottom pill CTA labelled like "A last word" + " →"; text enters with a 0.7s transform-only "riseIn".
ACTION SLIDE-OUT: tapping the CTA slides a bottom sheet UP from translateY(110%) to translateY(0) over 0.52s cubic-bezier(0.32,0.72,0,1); a dim scrim (rgba(14,10,8,0.55)) fades in behind it; the panel is 87% tall with 26px top corners and a drag handle. Dismiss by swiping the handle down (> ~92px or a quick flick), tapping the scrim, or Escape. The sheet contains a closing note from the couple.
Also: tap right → next screen, left 32% → previous, hold → pause.