Gradient Bloom Glass | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 5, 2026

components/footers/gradient-bloom/gradient-bloom-footer.tsx

// JOLOCKY PRO EXCLUSIVE: gradient-bloom-footer.tsx
// Gradient Bloom footer root: composes the background, link groups, glass bar and address row
// 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

Gradient Bloom Glass

gradient-bloom

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

Gradient Bloom Glass — A warm cream footer that glows from behind with slow drifting blobs of orange, green, yellow and olive, finished with two layers of static grain so the gradients feel frosted. The link groups fade up one after another when the page loads, and each link slides a few pixels on hover. Below them a frosted glass bar holds the logo, the address and the legal link, and plays a single shine sweep across its surface when you hover it. On mobile the groups fold into an accordion with 44px tap targets where one section stays open at a time, and the bar shrinks to the logo and a short Legal link.

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.

Drifting Blobs: five blurred radial gradients sit behind the content, and four of them drift on 16 to 24 second loops with different paths. The fifth is a still highlight. All of it is decorative and hidden from assistive technology.

Static Grain: a fine soft — light noise and two white speckle layers are generated by SVG turbulence filters inside data URIs, so the grain needs no image files and does not move.

Glass Bar: the bar uses a translucent fill, a light border and a 14px backdrop blur. Hovering it runs one shine sweep, a skewed highlight that crosses the bar in 1.1 seconds.

Staggered Load: the four link groups fade up 10px with a delay of 80ms between them. Links slide 4px to the right on hover.

Accordion Only on Mobile: below 600px each group title becomes a button that opens one section at a time, and clicking the open one closes it. The panel height animates through grid rows from 0fr to 1fr.

Clean Semantics Across Breakpoints: when the groups are always open, the title buttons are taken out of the tab order and lose aria — expanded. On mobile they return with the right state, and crossing the breakpoint closes everything.

Three Layouts: desktop is a five column grid with the address inside the glass bar. Tablet uses three columns and moves the address and copyright under the bar. Mobile stacks the groups in a single column.

Reduced Motion: the drift, the staggered entrance, the shine and the accordion transitions are all 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

Inline SVG

Zero Primitive

Last Updated

Oct 5, 2026

Tags & Specifications