The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
NORTHLINE Premium Logistics & Energy Website
NORTHLINE is an ongoing web development project for an LPG and energy logistics company.
I’m currently designing and developing a premium digital experience that combines modern corporate branding with interactive motion and visual storytelling.
The website is being built around:
• Scroll-driven GSAP animations
• Interactive transport and fleet storytelling
• Premium dark technical UI
• Interactive Pakistan national network visualization
• Responsive Next.js architecture
• Modern typography and micro-interactions
• SVG and Canvas-based visual effects
• Responsive desktop and mobile layouts
The goal is to create something that feels more like a premium technology and logistics experience rather than a traditional corporate website.
The homepage is being developed as a long-form scrolling experience where different sections are connected through animation and storytelling.
The project is currently in development, with the animation system, interactive map, footer, navigation, and visual design being actively refined.
Tech Stack:
Next.js
React
TypeScript
GSAP
Tailwind CSS
SVG
Canvas
Lucide React
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Custom liquid interaction built in Framer.
Turning a static hero into a responsive visual surface through cursor-driven distortion.
How do you adapt the cursor-driven effect for touch screens?
Orion GT — Luxury Automotive Landing Page 🏎️🔥
Orion GT is a landing page concept for a premium performance car brand, built around speed, innovation, and a cinematic digital experience.
The goal was to make the vehicle feel like more than a product — creating an immersive introduction where lighting, motion, typography, and interface details reinforce the feeling of performance and exclusivity.
Special attention was given to:
• a cinematic hero composition that makes the vehicle the main visual focus;
• a high-energy red and orange palette inspired by speed, heat, and light 🔥;
• oversized typography that strengthens the premium, futuristic character;
• floating performance UI elements that communicate features without interrupting the visual experience;
• glass-style interface cards for drive efficiency, electric power delivery, and adaptive lighting;
• a clear “Discover the Line” CTA integrated into the storytelling;
• responsive mobile layouts that preserve the atmosphere while simplifying the composition 📱;
• a minimal mobile navigation designed to keep the experience focused and immersive.
The result is a bold automotive experience that combines luxury presentation with a technology-driven interface — turning the landing page into part of the product experience itself.
Looking to create a premium website for your automotive, mobility, or technology brand? Let’s build something that feels as powerful as the product. ⚡
How did you choose this color direction? 🔥
The 404 was treated as a proper page rather than a fallback state.
The number is constructed as an architectural drawing. The 4 and the 0 are formed from walls at true thickness, with furniture laid out inside the resulting rooms and dimension strings running along both edges. It sits inside the same drafting system as the rest of the site rather than borrowing a display typeface.
The error message then repeats. Instead of a single dialog, identical windows cascade back across the canvas, each one carrying the same 404 notice. It reads as a system throwing an unresolved warning over and over, which is the exact behaviour Heron is built to prevent inside a model.
Error pages are never in the brief. They're a good measure of whether a team understood the product or just styled it.
Treating a 404 as an actual page instead of a dead end is such a good instinct, where did the architectural drawing idea come from, personal interest bleeding into the work?