A beautifully crafted digital wedding invitation template.
A modern, elegant and highly animated wedding invitation built with Next.js, designed to feel personal, intimate and more like a piece of premium stationery than a conventional website.
🌐 Live Website: Open Ever After
Ever After is a modern digital wedding invitation designed to turn a traditional wedding card into an immersive web experience.
Instead of presenting information as a collection of ordinary website sections, the design focuses on typography, spacing, photography, subtle motion, storytelling and visual rhythm.
The invitation includes the couple's introduction, wedding countdown, venue information, personal memories, RSVP, frequently asked questions and a closing section.
The project was designed as a reusable wedding invitation template, making it possible to replace the couple's information, dates, venues, images and story without rebuilding the entire application.
- Full-screen wedding introduction
- Elegant editorial typography
- Couple names and wedding date
- Atmospheric background artwork
- Responsive image composition
- Subtle entrance animations
- Live wedding countdown
- Days, hours, minutes and seconds
- Updates automatically every second
- Client-side calculation to avoid SSR hydration mismatches
- Scroll-triggered entrance animation
- Separate ceremony and reception details
- Wedding date and time
- Venue name and address
- Google Maps integration
- Responsive venue cards
- Mobile-friendly navigation buttons
A visual timeline presenting important moments from the couple's relationship:
- First Meet
- First Date
- The Proposal
Each memory contains:
- Hand-painted / artistic imagery
- Timeline numbering
- Short descriptions
- Editorial typography
- Rounded image presentation
- Scroll-based animations
- Subtle dreamy movement
- Dedicated RSVP section
- Guest response interface
- Designed to integrate with a backend or database later
- Prepared as a template-friendly component
- Frequently asked wedding questions
- Clean expandable layout
- Mobile-friendly interaction
- GSAP animations
- ScrollTrigger-based reveals
- Smooth scrolling
- Section entrance animations
- Staggered content animations
- Subtle image transitions
- Responsive motion behavior
The design intentionally avoids the appearance of a conventional wedding website.
The visual direction combines:
- Editorial typography
- Warm ivory backgrounds
- Deep forest green
- Muted gold accents
- Handmade-paper aesthetics
- Soft photographic artwork
- Generous whitespace
- Rounded image corners
- Subtle borders
- Slow, understated motion
The goal is to make the website feel closer to a physical wedding invitation brought to life digitally.
| Layer | Technology |
|---|---|
| Framework | Next.js |
| Language | TypeScript |
| UI | React |
| Styling | Tailwind CSS |
| Animations | GSAP |
| Scroll Animation | GSAP ScrollTrigger |
| Icons | Lucide React |
| Deployment | Vercel |
The project uses a component-based architecture so individual sections can be modified independently without affecting the rest of the invitation.
┌──────────────────────┐
│ Next.js App │
└──────────┬───────────┘
│
┌────────────────┼────────────────┐
│ │ │
▼ ▼ ▼
Hero Countdown Venue
│ │ │
└────────────────┼────────────────┘
│
▼
Our Story
│
▼
RSVP
│
▼
FAQ
│
▼
Footer
Animations are handled independently through GSAP and ScrollTrigger.
ever-after/
│
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ └── globals.css
│
├── components/
│ │
│ ├── animations/
│ │ └── ScrollAnimations.tsx
│ │
│ ├── countdown/
│ │ └── Countdown.tsx
│ │
│ ├── hero/
│ │ └── Hero.tsx
│ │
│ ├── venue/
│ │ └── VenueSection.tsx
│ │
│ ├── story/
│ │ └── OurStory.tsx
│ │
│ ├── rsvp/
│ │ └── RSVP.tsx
│ │
│ ├── faq/
│ │ └── FAQ.tsx
│ │
│ ├── footer/
│ │ └── WeddingFooter.tsx
│ │
│ └── smooth-scroll/
│ └── SmoothScroll.tsx
│
├── public/
│ ├── images/
│ └── ...
│
├── package.json
├── tsconfig.json
├── next.config.ts
├── postcss.config.mjs
├── eslint.config.mjs
└── README.md
Make sure you have:
- Node.js 18+
- npm
- Git
git clone https://github.com/jbmsacps-stack/YOUR-REPOSITORY.git
cd YOUR-REPOSITORYnpm installnpm run devOpen:
http://localhost:3000
To create a production build:
npm run buildThen run the production server:
npm startThe production application will be available at:
http://localhost:3000
The project is designed for deployment on Vercel.
- Push the project to GitHub.
- Open Vercel.
- Import the GitHub repository.
- Allow Vercel to detect the Next.js configuration.
- Click Deploy.
No database is required for the current template version.
Supabase is intentionally not required for the current version.
The project is currently designed as a reusable static wedding invitation template.
A backend/database can be introduced later for features such as:
- RSVP storage
- Guest management
- Attendance tracking
- Private invitation links
- Guest messages
- Admin dashboard
This keeps the template lightweight and easy to deploy.
Each venue can contain its own Google Maps search URL.
Example:
const venues = [
{
type: "Wedding Ceremony",
date: "Saturday, 18 June 2027",
time: "10:30 AM",
name: "Marriage Venue Name",
address: "Full venue address, Chennai, Tamil Nadu",
mapsUrl:
"https://www.google.com/maps/search/?api=1&query=Marriage+Venue+Name+Chennai",
},
];This allows each ceremony or reception location to have its own directions button.
The countdown is based on the wedding date:
const weddingDate = new Date(
"2027-06-18T10:30:00+05:30"
).getTime();The timer calculates:
Days
Hours
Minutes
Seconds
The initial countdown state is rendered consistently on the server and updated after the component mounts, preventing the hydration mismatch that can occur when Date.now() is evaluated during server rendering.
Animations are handled using GSAP and ScrollTrigger.
Example animation flow:
Section enters viewport
│
▼
Eyebrow fades in
│
▼
Title rises
│
▼
Divider expands
│
▼
Content appears
│
▼
Cards stagger in
The animations are intentionally subtle rather than excessive.
The goal is to make scrolling feel natural while preserving readability and performance.
The invitation is designed primarily around a mobile experience while remaining responsive on larger screens.
Mobile
↓
Tablet
↓
Desktop
Particular attention is given to:
- Typography scaling
- Image cropping
- Section spacing
- Button sizing
- Venue cards
- Story cards
- Countdown columns
- Touch-friendly interactions
The template can be adapted for a different wedding by changing:
Sarah & Alexander
18 June 2027
10:30 AM
Marriage Venue Name
6:30 PM
Reception Venue Name
First Meet
First Date
The Proposal
Replace the files inside:
public/images/
while keeping the component references intact.
- Supabase-powered RSVP storage
- Guest-specific invitation links
- RSVP confirmation messages
- Guest management dashboard
- WhatsApp RSVP integration
- Music / ambient audio option
- More story transition effects
- Image preloading and optimization
- Progressive image loading
- Multiple wedding themes
- Theme customization panel
- Shareable invitation URLs
- QR-code invitation support
- PWA support
Current Status: Production-ready template
The core invitation experience is complete, including:
- Hero
- Countdown
- Venue information
- Our Story
- RSVP interface
- FAQ
- Footer
- Scroll animations
- Responsive layout
- Google Maps integration
The backend/database layer is intentionally left out of the current template.
Joshua Baskar — Aspiring Full-Stack Developer
📬 Email: jbmsacps@gmail.com
🔗 GitHub: https://github.com/jbmsacps-stack
🔗 LinkedIn: https://www.linkedin.com/in/joshua-baskar-2b4a88381/
Ever After · Copyright © 2026 Joshua Baskar · All rights reserved.
- Viewing and studying the source code for personal learning
- Referencing the project for academic or portfolio purposes with attribution
- Private experimentation and modification
- Sharing links to the repository or live website with proper credit
The following require explicit written permission from the author:
- Republishing the project as an original work
- Commercially selling the template
- Redistributing the project under another name
- Claiming authorship or ownership
- Monetizing substantial portions of the source code
- Selling modified versions of the template
Commercial licensing can be discussed directly with the author.
📬 Contact: jbmsacps@gmail.com
| Use Case | Status |
|---|---|
| Personal learning & study | ✅ Permitted |
| Private experimentation | ✅ Permitted |
| Academic reference with credit | ✅ Permitted |
| Portfolio reference with attribution | ✅ Permitted |
| Sharing repository link | ✅ Permitted |
| Public redistribution | |
| Commercial use | |
| Selling modified versions | ❌ Not permitted |
| Claiming ownership | ❌ Not permitted |
Ever After
An invitation made for a day worth remembering.
Last updated: September 2026 · Created by Joshua Baskar
⭐ If you found this project useful, a star is appreciated.
Don't leave:
YOUR_VERCEL_URL
YOUR-REPOSITORY
in the final README. Once you've deployed, replace those two values with the actual Vercel and GitHub URLs.
Also, because this is a template, I would keep the README honest about Supabase: don't list Supabase in the current tech stack just because you created a project for it. Since we're deliberately leaving the database out for now, the README should reflect the actual deployed architecture.