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.
Sandstone Index Footer
sandstone-index
Glass & Grain 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
Sandstone Index Footer — A warm brown footer for an architecture studio that looks like pressed sandstone. The texture is drawn in the browser, a seamless sand speckle with a soft light falloff, a mottled layer and fine grain on top, so there is no image file to host. A narrow left panel with a fold line carries a huge zig-zag wordmark written upwards, whose letters slide out of clipped boxes one after another, and the right side is an index of selected projects whose rows shift to the right with a faint highlight and a fading in arrow on hover. Link columns, a one line newsletter field and legal links sit below. On tablet the index loses a column and a row, and on mobile the wordmark turns horizontal, the index becomes a single wide link and the newsletter moves to the top.
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 and no image files. The only outside request is the Archivo font for the wordmark.
02
Texture Drawn in Code: a 512px tile is filled with seeded noise from a small random generator, so it is the same on every load. Each pixel mixes its own speckle with a blur of its neighbours, wrapping at the edges so the tile repeats without seams, plus a little random warmth. It is drawn on a canvas once per page and handed to the CSS as a variable.
03
Layered Surface: on top of the sand the CSS stacks a light falloff from the bottom left, a darker corner at the top right, a soft mottle and a fine grain, both from SVG turbulence filters in soft light blending. Without script the footer keeps its solid colour and those layers.
04
Zig — Zag Vertical Wordmark: the letters are rotated, sit in boxes that clip them, and every second one is pushed to the right. They slide out of their boxes when 30% of the footer is visible, bottom letter first, 80ms apart. On mobile the wordmark turns horizontal and the stagger is 70ms.
05
Three Layouts: desktop from 1200px has a 440px left panel and a five row index with type, place and year. Tablet from 768px has a 232px panel, four rows without the type column and an address column. Mobile stacks everything, replaces the index with one wide link and puts the newsletter first.
06
Row Hover: each row of the index shifts 14px to the right with a faint highlight, and its arrow slides in while fading up. Keyboard focus does the same.
07
Newsletter Without Validation: as in the original, the form has no browser validation, so a submit swaps the field for the thank you message. Pass an onSubscribe handler to send the e — mail to your provider; then the e—mail must look right first, and the form stays if the handler returns false or throws.
08
Reduced Motion: the reveal is on at once, so the letters are simply visible, 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
HTML Canvas
SVG Filters
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Generated Sand TextureVertical WordmarkProject IndexFold LineRow Hover ShiftZero Primitive
Color Palette
#5A3B3B
#EDE8E3
Technology Stack
Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.
React
Next.js
TypeScript
Scoped CSS
HTML Canvas
SVG Filters
Zero Primitive
