A modern, visually rich landing page for AquaFalls Park, featuring a glassmorphism UI, an animated Three.js waterfall particle background, and a fully responsive layout.
Key Features
- Animated particle background — 6,000 water particles rendered with Three.js, flowing like a waterfall
- Glassmorphism design — frosted-glass cards, nav, and overlays throughout
- Responsive layout — adapts from mobile to wide desktop screens
- Sections included: Hero with park stats, Experience/attractions, Photo gallery (CSS Grid masonry-style), Ticket pricing cards, Contact/footer
- Smooth scroll & active nav tracking — navbar highlights the current section on scroll
- Lucide icons — lightweight line icon set used across the UI
- Google Fonts — Inter (body) + Playfair Display (headings)
Design & UI
- Glassmorphism effects with frosted-glass cards and overlays
- Smooth animations and scroll interactions
- Responsive grid layout for photo gallery
- Professional color scheme with water-inspired palette
- Accessible navigation with active section tracking
- Clean, modern interface optimized for user engagement
Tech Stack
- HTML5 / CSS3 for structure and styling
- Vanilla JavaScript (ES5 IIFE) for app logic and animations
- Three.js r128 for WebGL particle system
- Lucide Icons for lightweight SVG icon set
- Google Fonts for typography
- No build tools or package manager required — everything runs directly in the browser
Browser Support
- Chrome 90+
- Edge 90+
- Firefox 90+
- Safari 15+
Outcome
A stunning landing page that combines cutting-edge WebGL particle effects with glassmorphism design principles. The project demonstrates modern web development techniques and creative use of Three.js for immersive user experiences.
