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.
Lamp Light Studio
lamp-light
Light & Glow 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
Lamp Light Studio — A warm orange footer lit by a soft lamp that follows the pointer with a slow, eased lag, and follows a dragging finger on touch screens. The menu links rise in one after another, and hovering one dims the rest while its arrow slides in. Social pills fill with ink as their number rolls up into an arrow. The giant wordmark below is made of letters that rise out of a mask, and the letter under the pointer switches on in cream with a glow, then fades back slowly to leave a trail. Clicking the email copies it and confirms right in the button. Four layouts take it from a wide four column grid down to a single stacked mobile column.
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 and scoped CSS. There is no UI primitive library, no icon package and nothing extra to install.
02
Cursor Light: a radial glow follows the pointer with a 900ms eased lag. The position is written to two CSS variables once per frame, and the light turns off when the pointer leaves. A touch only lights it while the finger is down.
03
Entrance Once: when 20% of the footer is visible, the menu items rise 90ms apart and the wordmark letters rise from their masks 80ms apart. A scroll check and a 1.5 second check back up the observer, so the footer never stays hidden.
04
Letter Glow Trail: the wordmark finds the letter under the pointer, or under a dragging finger, and switches it on in 180ms. It fades back over 1.4 seconds, so moving across the word leaves a glowing trail.
05
Menu Dimming: on devices that can hover, pointing at one link dims the others to 32% and slides its arrow in. Keyboard focus shows the arrow too.
06
Rolling Pills: each social pill holds its number and an arrow stacked in a clipped box. On hover the stack slides up by half its height while the pill fills with ink.
07
Wordmark Sized by Container Units: the letters are sized with container query units, so the word fills the width at every breakpoint without any measuring in JavaScript.
08
Four Layouts: desktop has four columns and a credit line. Tablet landscape drops to three columns and moves the copyright into the legal row. Tablet portrait makes a two by two grid. Mobile stacks the brand first, then the menu and follow side by side.
09
Copy With Fallback: clicking the email copies it and shows Copied to clipboard for 1.8 seconds. If the clipboard is not available, it opens the mail app instead.
10
Reduced Motion: transitions shrink to 1ms and the cursor light is removed.
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
Container Queries
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Cursor LightLetter Glow TrailStaggered EntranceSocial PillsClick to CopyZero Primitive
Color Palette
#ff7417
#ff9152
#26221e
#fff3e8
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
Container Queries
Zero Primitive
