Back to Footers
Inspired by:Jolocky
Added on Oct 5, 2026
Pro Component
Source Code is Locked
Get instant access to complete production TypeScript code & CLI commands.
Freight Lane Footer
freight-lane
Maps & Location Architecture
Built from scratch by Jolocky, with our own layout, color and motion.
Signature Standard
Precision interaction engineering with zero external runtime bloat.
Pro Commercial Access
Production-ready multi-file tree built for modern Next.js and Tailwind CSS.
Engineering Breakdown
Freight Lane Footer — A big editorial footer for a freight and logistics company. It opens with a bold blue band that holds a tagline and a work email signup, then a tabbed marquee of industries or services that scrolls forever and fades at its edges. Below that sit company links, the head office, contact details and a dotted world map with pulsing blue pins for the operating cities. The footer ends with a photo, social rows, payment badges and a legal bar, and a giant wordmark made of thousands of square dots that scatter away from your cursor and spring back. Three layouts follow the window: a full twelve column desktop, a simplified tablet and a single column mobile.
Every interaction state, motion curve, and responsive edge-case has been extracted and reconstructed for seamless integration into modern React applications.
01
Zero — Primitive Dependency & Pure Standalone Pattern: pure React, scoped CSS and canvas. The original loads d3, topojson and a world atlas from a CDN, and none of that is needed here. The land outlines are stored as compact text in the component, and the Natural Earth projection is written out in a few lines.
02
Dotted World Map: the land is filled on a hidden canvas and read back on a grid, and every covered cell becomes a small grey square. The world is fitted to the box the same way d3 does it, so the pins land exactly. It rebuilds whenever its width changes.
03
Pulsing Pins: each office is a blue dot with a ring that grows and fades every 1.8 seconds, offset a little for every pin, plus a mono label that flips to the left when it would run out of the box. With reduced motion the map is drawn once without pulses.
04
Dotted Wordmark: the text is measured and drawn on a hidden canvas in a wide, heavy cut of Archivo, then sampled on a grid so every covered cell becomes a dot. It is rebuilt when the width changes and again when the fonts arrive.
05
Cursor Physics: dots within about half the wordmark height of the pointer are pushed outward with a slight swirl, then pulled home by a spring and slowed by damping. The animation loop stops by itself once nothing moves, and the cursor is replaced by a ring with a centre dot.
06
Tabbed Marquee: switching between Industries and Services fades the strip out, swaps the words after 280ms and fades it back in. The words repeat until the loop is at least 2.2 times as wide as the strip, it scrolls left at 70, 60 or 50 pixels per second by layout, pauses while the pointer is over it and stands still with reduced motion.
07
Layouts from the Window: desktop starts at 1100px and is a 12 column grid up to 1920px wide, tablet starts at 700px and drops the photo and extra legal links for icon buttons, and mobile is one column with larger touch targets. The server render assumes desktop, so hydration always matches.
08
Newsletter: the browser checks the e — mail format, then the button reads Subscribed. Pass an onSubscribe handler to send the address to your provider; returning false or throwing shows Try again.
09
Photo Slot: a wide photo shown in black and white through a grayscale and contrast filter. Pass photoSrc for your own image, or leave it out to see an empty frame with a caption.
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
HTML Canvas
Inline SVG
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Dotted World MapDot WordmarkCursor PhysicsTabbed MarqueeBlue BandZero Primitive
Color Palette
#1d2cf3
#f3f2f2
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
HTML Canvas
Inline SVG
Zero Primitive
