Lisbon Studio Outro | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 4, 2026

FilesPRO

components/footers/lisbon-studio/lisbon-studio-footer.tsx

// JOLOCKY PRO EXCLUSIVE: lisbon-studio-footer.tsx
// Lisbon Studio 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

Lisbon Studio Outro

lisbon-studio

Interactive 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

Lisbon Studio Outro — A near black editorial footer for a design studio. A live clock for Lisbon sits in the top bar, the headline slides up from behind a mask, and the studio email copies to your clipboard when you click it. A hairline newsletter field comes next, then a giant wordmark that is cropped in half, whose letters lift towards your cursor on desktop. Links roll over on hover and dim their neighbours, and clicking the logo mark plays the whole intro again.

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 nothing extra to install.

Intro Sequence: it plays once when 20% of the footer is visible. The top rule draws in, the bars fade, the headline and email rise from behind masks, the J mark turns upright and the wordmark letters climb 70ms apart. Clicking the J mark plays it again.

Live Lisbon Clock: the weekday and time are formatted with Intl.DateTimeFormat and refresh every second. The time zone and the seconds are props, and the server renders the clock empty so it never shows a stale time.

Cursor Lift Wordmark: on desktop, once the pointer is within 200px above the wordmark or over it, each letter rises by up to 22px, fading with its horizontal distance from the pointer. Updates are throttled to one per animation frame.

Cropped Wordmark: the type is sized at 19.56% of the content width, rounded to whole pixels, and its box shows only the top part of the letters. The letters are spread edge to edge, with the first one pulled back so its stem lines up with the content.

Link Roll: every label is stacked twice in a small mask and slides up on hover. The other links in the group dim to 38%, and social arrows turn 45 degrees.

Click to Copy Email: hovering draws an underline from the left and shows a hint on desktop. Clicking copies the address and the hint reads Copied to clipboard for 1.8 seconds. The mailto link still works without JavaScript.

Newsletter Field: a hairline underline with a second line that draws in on focus. The submit button inverts and its arrow turns right while the email is valid, and the caption changes for errors and success.

Container Query Layout: the layout follows the width of the footer itself (desktop from 1100px, tablet from 680px, mobile below that), so it renders correctly on the server with no layout jump.

Reduced Motion: everything is shown at once, transitions are switched off and the cursor lift is disabled.

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