Meridian Atlas Outro | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 4, 2026

FilesPRO

components/footers/meridian-atlas/meridian-atlas-footer.tsx

// JOLOCKY PRO EXCLUSIVE: meridian-atlas-footer.tsx
// Meridian Atlas footer root: composes sections and wires hooks
// Unlock full multi-file architecture at https://jolocky.com/pricing

Pro Component

Source Code is Locked

Get instant access to complete production TypeScript code & CLI commands.

Get All-Access

Meridian Atlas Outro

meridian-atlas

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

Meridian Atlas Outro — A dark studio footer built around a hatched world map. A mint light sweeps across the continents, office pins pulse on their cities, and a tooltip lifts on hover. On mobile the map turns into a twinkling dot grid behind the office list. The map is drawn from data shipped with the component, so it needs no map library and no network request.

Every interaction state, motion curve, and responsive edge-case has been extracted and reconstructed for seamless integration into modern React applications.

Zero — Primitive Dependency & Pure Standalone Pattern: pure React and scoped CSS. There is no UI primitive library, no icon package and no map library to install.

Built — in World Map: 176 country outlines are stored as compact encoded data and drawn as SVG. A short Natural Earth projection turns longitude and latitude into a position, so you can move or add an office by editing its coordinates.

Hatched Map with Light Sweep: the land is filled with a diagonal hatch, and a second mint hatch is revealed by a masked gradient that travels across the map every 7 seconds.

Pulsing Office Pins: each pin sends out a ring on its own delay, and its tooltip lifts and scales on hover. Pins near the right edge can flip their tooltip to open towards the left.

Container Query Layout: the layout follows the width of the footer itself (wide above 1000px, tablet from 601px to 1000px, mobile at 600px and below), so it behaves the same inside a narrow preview or a sidebar.

Mobile Dot Matrix: below 600px the map is replaced by a grid of dots sampled from the same outline, with a diagonal twinkle wave fading out behind the office list.

Fitted Wordmark: the large brand name is measured and resized to fill its row on tablet and mobile, and stays at a fixed size on wide screens.

Newsletter Micro — interaction: the underline draws in on focus, the arrow flies out while sending, the button turns mint when done, and an invalid email shakes the field. All motion stops with prefers—reduced—motion.

Technology Stack

Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.

React

Next.js

TypeScript

Scoped CSS

Inline SVG

Container Queries

Zero Primitive

Last Updated

Oct 4, 2026

Tags & Specifications