Serendib
A concept travel guide to Sri Lanka with a layered 3D hero, an illustrated island atlas and 30 hand-picked destinations.
- Web
Case study
The problem
Most Sri Lanka travel sites feel like booking forms. We wanted to show how a guide can feel like opening an old map, while staying fast and easy to read.
Project objectives
- Create a memorable first impression with a cinematic, scroll-driven hero
- Let travellers explore the island by region and category on a map
- Keep it light: no framework, no build step, plain files anyone can host
Engineering approach
Built with plain HTML, CSS and JavaScript. The hero layers the photo, the title and a cut-out of Sigiriya rock so the title sits between them, animated with GSAP ScrollTrigger and Lenis smooth scrolling. The atlas is a hand-built SVG map that places every destination from its latitude and longitude, and all pages are generated from one data file.
Technology stack
- HTML
- CSS
- JavaScript
- GSAP ScrollTrigger
- Lenis
- SVG
Key features
- Scroll-driven 3D hero with the title tucked behind Sigiriya rock
- Illustrated island atlas with 30 places across five categories
- A page for every place: highlights, best time to visit, travel time and sample prices
- Ready-made journeys and illustrative tour packages
- Sinhala place names throughout and an ආයුබෝවන් scroll intro
- Wikimedia Commons photos with a full credits page
Screenshots
Details for this section will be published soon.
Outcomes
Outcomes will be shared once they've been verified.
Contact
Have an Idea? Let's Build It.
Tell us what you're planning. Let's discuss how we can turn your idea into a reliable digital product.