A beautiful, interactive 3D web-based graduation invitation built with React Three Fiber, combining immersive design, animations, and real-time 3D effects to create a memorable digital celebration experience.
- ✨ Fully 3D Invitation Scene using
@react-three/fiberand@react-three/drei - Dark mode and light mode themes
- 📸 Photo gallery & ambient effects
- 💡 Real-time lighting, camera motion, and postprocessing (Bloom)
- 📱 Responsive HTML overlays styled with TailwindCSS
- 🎨 Customizable thank you message (based on url path:
lec_<name>- lecturer,toho_<name>- Tourism Hospitality club,capstone_<name>- Capstone team,best_<name>- My best friends) - 🌐 Live Link
- 🎞️ Demo Video
- React + TypeScript + Vite
- TailwindCSS – For elegant, fast UI styling
- three - Core 3D library
- @react-three/fiber – WebGL renderer for React
- @react-three/drei – Helpers and abstractions
- @react-three/cannon - Physics engine for 3D objects
- @react-three/postprocessing – Postprocessing, ambient light and glow effects
- maath – For smooth animation transitions
- lodash - For utility functions
- react-responsive - For responsive design
- react-icons - For icons
- tailwind-merge - For merging Tailwind classes
📁 public/
├── 🖼️ assets/ – storing images
├── 🖌️ fonts/ – storing font mappings
├── 🔖 models/ – storing 3D model files
└── 🌌 textures/ – storing textures for 3D models and scenes
📁 src/
├── 📦 components/
│ ├── 🧱 3d-models/ – models generated from .glb files
│ ├── 🌀 3d-shapes/ – 3D shapes created with R3F and drei
│ ├── 🌠 3d-scenes/ – components for structure, loading, and controls of scenes
│ └── 🧩 ./ – non-3D related shared components
├── 🧠 context/ – context files for global state (e.g., theme)
├── 🖥️ screens/ – screen components (e.g., Home, Thank You)
├── 🎯 sections/ – 3D sections used in Home screen
└── 🛠️ utils/ – utility/helper functions
📜 App.tsx – Main React component
🎨 App.css – Main CSS file (e.g., Tailwind import)
🧷 index.tsx – React DOM entry point
🔧 main.tsx – App bootstrap/logic entry point
git clone https://github.com/Puppychan/graduation-invitation
cd graduation-invitationnpm install
npm run dev
| 🌚 Dark Mode | 🌝 Light Mode | |
| Thank You Screen |
|
|
| Instruction |
|
|
| 3D - Welcome |
|
|
| 3D - Subtitle |
|
|
| 3D - University Info |
|
|
| 3D - Invitation Info |
|
|
This project was born from a vision to transform the traditional graduation announcement into something extraordinary. Moving beyond simple text messages or static designs, I wanted to create an immersive, interactive experience that would make my invitation truly memorable.
My goal was to transport friends and family into a captivating 3D world where they could explore and interact with the invitation like a game. I imagined a space where loved ones could not only feel the excitement and joy of graduation but also feel honored as significant participants in my journey.
Having just begun my exploration of 3D rendering, Blender, and WebGL a month ago, this represents only my second venture into 3D creation. It's both a celebration invitation and a milestone in my developing skills. I hope you enjoy experiencing it as much as I enjoyed creating it!
- All 3D models are taken from Sketchfab
- Gradient texture is taken from uiGradients
- Gummy texture is taken from MatCaps
- Font is taken from Google Fonts
- Text design is inspired by Sandbox
Have ideas or feedback? Feel free to open an issue or submit a PR!
This project uses a dual licensing structure:
-
🧠 Source code: MIT License
-
🎨 Design and layout: CC BY-NC 4.0
Shield:
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.
If you use this code or design elements in your project, please include the following attribution:
Based on work by [Tran Mai Nhung] (https://github.com/Puppychan/graduation-invitation)
See NOTICE.md for asset attributions and third-party licenses.