Tarn Ledger Status | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 5, 2026

components/footers/tarn-ledger/tarn-ledger-footer.tsx

// JOLOCKY PRO EXCLUSIVE: tarn-ledger-footer.tsx
// Tarn Ledger footer root: measures its own width, picks the layout and wires the clock and signup
// 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

Tarn Ledger Status

tarn-ledger

Illustrated Scenes 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

Tarn Ledger Status — A quiet warm grey footer for an uptime monitoring product, laid out like a ledger with hairline rules and mono labels. A short blurb and a pill shaped signup sit beside link columns and a table of live clocks for four cities, and the bottom bar shows an operational or degraded status dot. Under it all rises a hill drawn only with CSS dots that grow larger toward the bottom. The layout switches by the width of the footer itself, so it stays correct inside any wrapper: the full table on desktop, a slimmer one on tablet, and on mobile a single status row with the home clock and tap sized links.

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, no image and nothing extra to install.

Layout by Footer Width: a ResizeObserver measures the footer itself and picks desktop from 1024px, tablet from 640px and mobile below that. It follows the space the footer really has, so it works in narrow wrappers and side panels too.

Live World Clocks: four clocks tick every second with Intl.DateTimeFormat in 24 hour time, and showSeconds turns the seconds off. The times are empty on the server and in the first hydration pass, so they never mismatch.

Pure CSS Halftone: the hill is a circle made of five strips of dots on a 6px grid whose dots grow toward the bottom, plus a darker ridge cut with a clip path. No image is used, and the band is hidden from assistive technology.

Status Dot: the status prop switches the bottom bar between operational and degraded, with a green or amber dot and its own labels. Mobile shows the short label next to the home clock.

Three Layouts: the desktop layout has a four column ledger with the region labels, tablet drops the regions and the site address, and mobile hides the clock table, shortens Status page to Status and gives links a 44px line height.

Pill Signup: the field and the button share one rounded pill. After a submit the button reads subscribed and stays that way, as in the demo. Pass onSubscribe to connect an endpoint, and return false or throw to stay unsubscribed.

Hover Quirk Kept: the original sets a hover colour on links, but every link also has its own colour, which wins. The footer keeps that exact behaviour, so links only get the colour transition. A visible hover needs a change in styles/root.ts and in the link classes.

Autofill Safe: the email field keeps its look when the browser autofills it.

Technology Stack

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

React

Next.js

TypeScript

Scoped CSS

Zero Primitive

Last Updated

Oct 5, 2026

Tags & Specifications

Halftone HillWorld ClocksStatus IndicatorContainer Width LayoutPill SignupZero Primitive