completed

Shadi Invitation Website

A mobile-first Hindi wedding invitation site with multiple templates, a template gallery landing page and an animated opening-gate reveal.

Timeline2024

Visibilitypublic

Artifacts

Private

Next.jsTypeScriptTailwind CSSFramer Motion

1. The Problem & Context

Why this project was initiated

Next.js + TypeScript project built around reusable invitation templates. Includes an opening gate (doors) animation, animated couple illustrations, a map view option for the venue and a tap-to-call button for the organizer. Numbers are shown in English digits for readability.

2. Technical Implementation & Highlights

Engineering Deliverables

Template system: add a new template without touching core code.

Landing page gallery that lists every template.

Opening-gate animation and animated illustrations, tuned for mobile.

Venue map option and one-tap organizer call.

Deep Dive: Mobile-First Indian Wedding Invitation Platform

Shadi Invitation Website is a mobile-first digital invitation platform built with Next.js, TypeScript, and Framer Motion. Built to replace expensive, static PDF invitations, it provides interactive, personalized ceremony cards featuring animated temple door reveals, traditional auspicious motifs, map navigation, and one-tap guest RSVP actions.

Architecture Topology

diagram

+-------------------------------------------------------------------------+
|                  Mobile Browser Client (iOS / Android)                  |
|      • Opening-Gate / Curtain Reveal Animation (Framer Motion)          |
|      • Hindi Typography Rendering with Google Fonts (Mukta / Tiro)      |
|      • One-Tap RSVP via WhatsApp Click-to-Chat API                      |
+------------------------------------+------------------------------------+
                                     |
                                     v
+-------------------------------------------------------------------------+
|                      Reusable Template Design Engine                    |
|      • Pluggable JSON event schema (Groom/Bride, Venues, Itinerary)     |
|      • Theme Palette Switcher (Royal Crimson, Marigold Gold, Emerald)   |
|      • English Numeral Formatting for high readability across elders    |
+------------------------------------+------------------------------------+
                                     |
                                     v
+-------------------------------------------------------------------------+
|                   Map & Venue Directions Integrations                   |
|      • Dynamic Google Maps deep link generation                         |
|      • Interactive OpenStreetMap fallback venue preview                 |
|      • 1-Click organizer phone dialer hook                              |
+-------------------------------------------------------------------------+

1. Spring-Physics Opening Gate Reveal Animation

Indian wedding invitations traditionally start with an auspicious opening of ceremonial palace doors. We implemented a 60 FPS gesture-friendly gate reveal using Framer Motion spring physics:

components/invitation/opening-gate.tsx

"use client";

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

interface OpeningGateProps {
  onOpen: () => void;
  title: string;
}

export function OpeningGate({ onOpen, title }: OpeningGateProps) {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
    setTimeout(onOpen, 900);
  };

  return (
    <AnimatePresence>
      {!isOpen && (
        <motion.div
          className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-amber-950"
          exit={{ opacity: 0, transition: { duration: 0.6, delay: 0.4 } }}
        >
          {/* Left Ceremonial Door */}
          <motion.div
            className="w-1/2 h-full bg-red-900 border-r-2 border-amber-400/60 shadow-2xl flex items-center justify-end pr-4"
            animate={{ x: isOpen ? "-100%" : 0 }}
            transition={{ type: "spring", stiffness: 80, damping: 18 }}
          />

          {/* Right Ceremonial Door */}
          <motion.div
            className="w-1/2 h-full bg-red-900 border-l-2 border-amber-400/60 shadow-2xl flex items-center justify-start pl-4"
            animate={{ x: isOpen ? "100%" : 0 }}
            transition={{ type: "spring", stiffness: 80, damping: 18 }}
          />

          {/* Center Royal Seal Button */}
          <motion.button
            onClick={handleOpen}
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="absolute z-10 px-6 py-3 rounded-full bg-amber-400 text-amber-950 font-bold shadow-lg"
          >
            {title || "निमंत्रण पत्र खोलें"}
          </motion.button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

2. Plug-and-Play Template Architecture

New templates can be added by declaring a new template definition without altering core layout routes. English numerals are automatically formatted to avoid font mismatches across older mobile browsers while preserving classical Devanagari headings.

Engineering Outcome & Takeaways

Shipping this project reinforced the value of clean architectural boundaries, automated verification loops, and clear error telemetry. In subsequent iterations, I focus on system observability, end-to-end integration test suites, and strict performance profiling under load.

Previous ProjectEnterprise AI Chatbot & Agent Orchestrator Next Project SweetCart