Peeping Wordmark Outro | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 5, 2026

components/footers/peeping-wordmark/peeping-wordmark-footer.tsx

// JOLOCKY PRO EXCLUSIVE: peeping-wordmark-footer.tsx
// Peeping Wordmark footer root: composes the sections and the reveal
// 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

Peeping Wordmark Outro

peeping-wordmark

Pointer & Magnetic 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

Peeping Wordmark Outro — A sunny yellow footer with a heavy black wordmark in the top right corner, where the two O shaped gaps are replaced by pill shaped eyes. The pupils follow your cursor, the pills stretch wider when you hover the logo, and every few seconds the eyes blink. When the footer scrolls into view the letters rise one after another, the pills open with a springy bounce and a thick rule draws across. Below it sit a legal list, a say hello block with the contact links, and a big year. Tablet shrinks the wordmark and moves the credits to one line, and mobile drops the wordmark and stacks the sections between rules.

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. The wordmark is real text with eyes built from plain elements, so there is no UI primitive library, no icon package and no image.

Eyes That Follow: the pointer position relative to the wordmark is clamped to between — 1 and 1 and written to two CSS variables once per frame. The pupil moves up to 0.3422em sideways, or 0.6472em while the logo is hovered, and up to 0.08em vertically.

No Re — renders While Moving: the variables are written straight to the DOM, so moving the mouse never re—renders the component.

Blink: every 3.8 seconds the pupils squash to 8% height for 140ms. It skips the blink when the wordmark is hidden or the tab is in the background.

Springy Pills: hovering the logo widens each pill from 1.34em to 1.95em with a spring curve, and the pupil travel grows with it.

Staggered Reveal: once 35% of the footer is visible, the letters rise with a 70ms stagger, the pills scale open and the rule draws across over 1.1 seconds. It runs once and is started a frame after the observer fires.

Three Layouts With CSS: desktop uses a three column grid with the meta block bottom left. Tablet below 1024px moves the credits to one row, and below 600px the wordmark is hidden and a rule is drawn above each section.

Em Based Wordmark: the whole wordmark is sized from one font size, so the letters, eyes and spacing scale together at each breakpoint.

Reduced Motion: the footer shows in its final state, the eyes do not follow or blink and every transition is switched off.

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

Cursor EyesBlinking WordmarkScroll RevealDrawn RulesResponsive GridZero Primitive

Color Palette

#edc84a

#141210