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.
Curtain Reveal Studio
curtain-reveal
Scroll Reveal 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
Curtain Reveal Studio — A bright orange footer that is already there when the page ends: it sticks to the bottom of the screen and the page content slides away from on top of it, like lifting a curtain. While it is still covered, a shadow lies over it and its content sits slightly higher, and both ease out as it is uncovered. Once most of it shows, the chunky blocky letters of the wordmark rise one after another and the subline follows, and they sink again if you scroll back up. Every link and the call to action scramble through random characters when you hover them, then settle. A film grain covers the orange, and the layout adapts from a wide desktop grid with panel seams to a simple mobile list.
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 animation library, no icon package and nothing extra to install.
02
Sticky Curtain: the footer is sticky to the bottom of the screen with a lower stacking order than the page. Your page content needs a solid background, relative position and a higher z — index so it covers the footer until the very end of the page.
03
Reveal Progress: on every scroll and resize, one frame at a time, the code measures how much of the footer the page has scrolled off, from 0 when covered to 1 when fully uncovered. It writes the shadow and the parallax straight to the DOM instead of through React state.
04
Shadow and Parallax: while covered, a black overlay at up to 55% opacity lies over the footer and the content sits up to 80px higher, 12% of the footer's height at most. Both ease away as the footer is uncovered.
05
Letters With Hysteresis: the wordmark letters rise once more than 60% is uncovered and sink again below 8%, so they do not flicker around one threshold. Each letter waits 70ms longer than the one before and the subline follows at 550ms.
06
Scramble on Hover: link labels, the call to action and the legal links run through random characters and settle left to right, one letter every two 28ms frames. Spaces never change, a new hover restarts it, and it only runs on devices that can hover.
07
Blocky Wordmark: the seven letters are drawn paths with notched corners and cut counters. Because they are SVG, the wordmark always fills the width at the same proportions.
08
Three Layouts: desktop puts the tagline on a 52% column beside three columns of links and shows thin seams that mark panels. Tablet puts the tagline and the button in one row above a ruled link grid. Mobile turns the button into a full width bar, the links into a two column list of 44px rows and shortens the legal and copyright text.
09
Reduced Motion: the letters and the subline are shown at once, and there is no shadow or parallax.
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
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Sticky Curtain RevealScroll ParallaxLetter RiseText ScrambleFilm GrainResponsive Layouts
Color Palette
#e8770f
#111010
#f0ede6
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
Zero Primitive
