Lintas Nusa Logistics
A logistics website built with Astro, GSAP, Tailwind CSS, and Swup.
What is this system?
A plain explanation of the project, its scope, and the real tasks it carries out.
Lintas Nusa is a website and company profile for a fictional digital logistics operator serving Indonesia nationwide.
Its five pages (Beranda, Layanan, Jangkauan, Platform, and Tentang) present operational metrics, service SLA tiers, dashboard concepts for different roles, and a national distribution network.
Primary Technologies
Why did it need to exist?
The practical friction, human fatigue, or operational constraints that demanded this solution.
I find that B2B logistics websites often rely on stock photos and jargon without showing how the supply chain operates.
I wanted Lintas Nusa to feel credible through specific details. I used vector network maps and operational figures (97.9% scan compliance, 247 active cities), with smooth page transitions. Those figures belong to the fictional operator.
Technical Craft & Architecture
Engineering decisions, query plans, containerization, and measured benchmarks.
Field Benchmark
5 pages · 9-node interactive SVG map · Swup page transitions
Built with Astro’s zero-JavaScript-by-default architecture. GSAP handles scroll animations, and Swup handles client-side page transitions.
Fluid Swup page transitions
Built page transitions with custom veils and beams. They preserve client state and keep Astro’s static-build performance.
Interactive 9-node network map
Drew a responsive SVG map of the Indonesian archipelago, connecting the Cikarang national control tower to 8 regional gateways with animated route pulses.
GSAP scroll-linked choreography
Built responsive reveal sequences, hover interactions, and animated metric disclosures with accessibility support and respect for prefers-reduced-motion.
Implementation Notes
- Created shared design tokens for the maritime colors (Navy #0F2742, Mist, Signal Teal, Signal Orange) and type scales.
- Built FAQ disclosures, multi-tier service filters, and mobile drawer navigation. Each supports keyboard access without layout shifts.
Atmosphere & Feeling
How the project feels in production: its sensory texture and quiet rhythm.
“Maritime navy, mist white, teal beacons, and geometric lines give it the feel of a logistics control tower coordinating freight across the islands at dawn.”
A Note from the Field
I wanted the site to feel dependable at first glance. Keeping the map, typography, and transitions precise worked better for me than adding more decoration.
Choose another station stop
Station Stop · STN 03 · Rice Fields (稲田)
Visit another room or return to the main platform.