Golden Hour Meadow | Jolocky Collection

Inspired by:Jolocky

•Added on Oct 5, 2026

components/footers/golden-hour/golden-hour-footer.tsx

// JOLOCKY PRO EXCLUSIVE: golden-hour-footer.tsx
// Golden Hour footer root: lays out the canvases, figure, layers and content, and starts the scene
// 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

Golden Hour Meadow

golden-hour

Illustrated Scenes 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

Golden Hour Meadow — A footer that is a whole meadow. When it scrolls into view, a sheet of white paper tears away from left to right, revealing a green field and then fading up the links. The grass is drawn live on a canvas, sways in the wind, and gusts roll across it. Move the pointer down the field and the day turns to evening: the light warms, a person at a desk throws a longer shadow, their old monitor glows, and fireflies come out. On touch screens a tap or drag sets the time of day and it stays. The layout follows the footer's own width, from a wide scene on desktop to a tall stacked one on mobile.

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, scoped CSS, an SVG and two canvases. There is no UI primitive library, no animation library, no image files and nothing extra to install.

Paper Tear: a sheet of paper with a shadow, a frayed fibre edge and a grain texture is drawn as SVG. When 30% of the footer is visible its edge sweeps up from the bottom over 1.9 seconds, left to right, and the content fades up once the tear is more than half done.

Live Grass: the meadow is painted once into an off — screen canvas, and thousands of blades are then redrawn every frame. Blades are grouped by colour and width so each group is a single stroke, and the count scales with the footer's area.

Wind and Gusts: each blade bends by a slow sine that depends on its position, and a wider gust rolls across the field at a constant speed and bends everything it passes.

Sunset on the Pointer: the lower the pointer sits on the field, the higher the sunset level, which eases toward its target. It drives a warm tint, a dark gradient, the shadow length, the screen colour, the glow flicker and the fireflies. A press or drag sets the level on touch and it stays when the finger lifts.

Fireflies: between 14 and 48 fireflies, depending on the footer's size, drift on small loops and pulse. They only appear once the sunset passes 30%.

Pauses Off Screen: rendering stops while the footer is not visible, and resizing is debounced by 120ms before the whole scene is rebuilt at the new size.

Width Driven Layouts: container queries follow the footer's own width. Desktop is clamped between 640 and 900px tall, tablet is 960px with the brand above a four column nav, and mobile is 800px with three columns and the legal links in a row above a short copyright.

Placeholder Figure: the person at a desk is built from plain boxes and is meant to be swapped for an illustration or render. Keep the glow aligned with the screen when you do.

Reduced Motion: there is no tear and no wind and the scene is drawn once, but the sunset still follows the pointer.

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

Container Queries

Zero Primitive

Last Updated

Oct 5, 2026

Tags & Specifications

Paper Tear RevealCanvas GrassWind GustsSunset On PointerFirefliesContainer Queries

Color Palette

#6aa33a

#f7f6f2

#ffb27c

#9fe0b0