AquaFalls Park — Waterfall Experience

AquaFalls Park — Waterfall Experience

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.