DAIDAN Group
Project Overview
The corporate website of DAIDAN, a business group spanning shipping, insurance, mining, coal trading and sportstainment. The brief: make a diversified group read as one team with one purpose, for partners, investors and future hires.
Our Scope
- UI/UX: structure, art direction and the scroll narrative.
- Slicing: pixel-faithful conversion of the design into responsive templates.
- Frontend: scroll-driven animation, section snapping and the milestone timeline.
- Backend: developed in full, including a CMS to manage the content of every frontend page, plus the contact, whistleblowing, vendor registration and investor download flows.
What Stands Out
The home page is a single scroll experience: photography and headlines are scrubbed by scroll position, with parallax layers and snapping between chapters. The Milestone page turns company history into a timeline that follows the scroll, the Operations Fields page is an interactive map of 24 clickable pins, and every page holds up on a phone.
01See It Move
Scroll, Timeline & Interactive Map
The scroll-driven home story, the milestone timeline, the same experience on a phone, and the operations map where every pin opens its ports.
02Scroll Scrub & Parallax
One Scroll, Five Chapters
The home page is built on GSAP ScrollTrigger: headlines and imagery are tied to scroll position, with snapping between chapters.
-
01Open on the water
The hero opens on aerial footage of the fleet with the first line of the group’s statement, “Encompassing a broad network of companies”.
-
02Images slide in
As you scroll, each line hands over to the next while a new photograph slides over the last, with layers moving at different speeds for depth.
-
03The sentence completes
“...and finds unity through a singular sense of purpose” - the statement is read in pieces, paced entirely by the scroll.
-
04Land on the business
The story resolves into the five sectors, then the vision and mission, each section snapping into place.
03Responsive
The Same Story, Smaller
The scroll narrative is not a desktop trick: layouts, navigation and the timeline are rebuilt for phone screens.
04Our Work
Explore Others
More campaign systems engineered for nationwide scale.
Let's Build The Engine
Bring the idea, or just the problem. We'll shape the experience and build the engine behind it.
