Indian Wedding Invitation & RSVP Form

Preview

Overview

Inspired by the heirloom craftsmanship of bespoke Indian royal wedding card invitations (Kankotri / Shaadi Patrika), this form fuses traditional Rajputana/Mughal heritage aesthetics with modern web animation principles (/web-animation-design) and performance auditing standards (/web-perf).

Guests experience the tactile delight of breaking a gold-crested royal wax seal (A & R) to unseal an embossed crimson envelope, revealing an authentic multi-day wedding celebration at The Oberoi Udaivilās, Udaipur.

Animation Engineering (/web-animation-design)

In alignment with Emil Kowalski's Animations on the Web guidelines:

1. Easing Blueprint:

   • Wax Seal Depress: Tactile button feedback uses transform: scale(0.95) on :active with immediate 150ms response.
   • Card Unfolding: Opening transitions employ --ease-out-quint (cubic-bezier(0.23, 1, 0.32, 1)) for an organic, responsive physical feel.
   • Avoided Linear & Ease-In: Exclusively uses ease-out for entrance reveals and ease for gentle gold foil sheen transitions.

2. GPU Acceleration & Layout Stability:

   • Strictly animates compositor-only properties (transform and opacity) with will-change: transform.
   • Avoids animating geometry (width, height, margin, padding), eliminating costly browser reflows and paint cycles.

3. Accessibility & Reduced Motion:

   • Supports prefers-reduced-motion: reduce seamlessly.
   • For users with vestibular motion sensitivity, animations fall back to instantaneous state transitions without jarring transforms.

Performance Auditing (/web-perf)

1. Cumulative Layout Shift (CLS = 0):
   • All ornamental borders, wax seals, and ceremony cards define explicit dimensions and flexbox containers, preventing layout shifts during interaction.
2. Zero External Asset Waterfalls:
   • 100% of ornamental elements (Ganesh motif, floral filigrees, wax seals, QR codes) are authored as pure inline vector SVGs, avoiding multi-megabyte image downloads and render-blocking request chains.
3. WCAG AA Contrast Ratios:
   • Gold foil accents (#d4af37, #f7e7a9) on deep crimson (#850e2b) and dark backgrounds exceed the 4.5:1 contrast requirement for readable typography and interactive controls.

RSVP Workflow & Ceremony Model

interface WeddingRSVP {
  salutation: 'Shri & Smt.' | 'Dr. & Family' | 'Padma Shri' | 'Mr. & Mrs.' | 'Kumari' | 'Family of';
  fullName: string;
  phone: string; // WhatsApp mobile for concierge updates
  email: string;
  adultsCount: number;
  childrenCount: number;
  attendingEvents: {
    sangeet: boolean; // Mehendi & Sangeet (Nov 14)
    haldi: boolean;   // Haldi & Chooda Rasam (Nov 15)
    baraat: boolean;  // Baraat & Swagat (Nov 15)
    pheras: boolean;  // Pheras & Wedding Vows (Nov 15)
    reception: boolean; // Grand Royal Reception (Nov 16)
  };
  dietaryPreference: 'Pure Vegetarian' | 'Jain Satvik' | 'Swaminarayan' | 'Royal Non-Veg' | 'Vegan / Gluten-Free';
  needsAccommodation: boolean; // Lake-view suite reserved at Udaivilās
  needsAirportTransfer: boolean; // Maharana Pratap Airport (UDR) chauffeur
  sangeetSong: string; // Song to get guest on the Sangeet dance floor
  blessingMessage: string; // Aashirwaad for the couple
}