A stunning, interactive wedding invitation website featuring ethereal parallax effects, fluid distortions, and smooth animations. Built with React Three Fiber, Three.js, and Framer Motion.
- Dynamic fluid simulation with realistic water ripple effects
- Multi-layered parallax heaven planes that respond to mouse movement
- Custom GLSL river shader with wave-like distortions and flowing patterns
- Interactive cursor with smooth size transitions and glow effects
- Elegant corner decorations with synchronized reveal animations
- Smooth content transitions using spring physics
- Hover-reactive RSVP button with 3D movement
- Real-time fluid dynamics with adjustable parameters (curl, swirl, pressure)
- Seamless blend between fluid layers using custom shaders
- Depth-based parallax movement
- Smooth interpolation for all motion using spring physics
- Customizable color schemes for fluid and background
- React + React Three Fiber
- Three.js with custom GLSL shaders
- Framer Motion for UI animations
- Custom post-processing effects
- TailwindCSS for styling
- Vite for fast development
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/mustvlad/wedding-lp.git- Install dependencies
npm install
# or
yarn install- Start the development server
npm run dev
# or
yarn dev- Open http://localhost:5173 in your browser
You can adjust the fluid simulation parameters in App.jsx:
<Fluid
radius={0.03}
curl={10}
swirl={5}
distortion={1}
force={2}
pressure={0.94}
densityDissipation={0.98}
velocityDissipation={0.99}
intensity={0.3}
rainbow={false}
blend={0}
showBackground={true}
backgroundColor="#a5d7e8"
fluidColor="#d6edf5"
/>The river effect can be customized in RiverPass.jsx by modifying the GLSL shader code and parameters.
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions, issues, and feature requests are welcome! Feel free to check issues page.
Vlad
- GitHub: @mustvlad
- Website: tuscan.wedding