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.
Meadow Parallax Scene
meadow-parallax
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
Meadow Parallax Scene — A footer that is also a little illustration: a blue sky with thin drifting clouds, a cream cloud bank, an orange hedgerow with a tree, and a green field with grass stripes, all drawn in inline SVG with rough print edges and a paper grain on top. The layers rise into place one after another when the footer scrolls into view, then shift at different speeds as you scroll for a parallax effect. Hover the tree and it wobbles, click it and leaves fall out. The logo petals turn when you hover it. The layout follows the footer's own width, with floating content on desktop, a bottom bar on tablet, and an accordion of link columns on mobile with a shorter scene anchored on the left.
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, no image files and nothing extra to install.
02
Seeded Illustration: the hedgerow, the tree leaves and the grass stripes come from a small seeded random generator, so the scene looks the same on every render and on the server. The hedgerow grows taller from left to right.
03
Rough Print Edges: every layer goes through a turbulence filter and a displacement map, which roughens the edges like a misregistered print. A full size noise overlay, desaturated and multiplied at 17%, adds the paper grain.
04
Layered Entrance: when 20% of the footer is visible, each layer and block rises into place over 1.6 seconds, staggered from back to front. It plays again whenever the layout changes.
05
Scroll Parallax: a frame loop computes how far the footer sits from the middle of the viewport and moves each layer down by that progress times its depth, 6 for the floating clouds up to 26 for the ground. Nothing moves once the footer is above the middle.
06
Drifting Clouds: the four thin clouds slide 40 to 70 pixels back and forth on 11 to 16 second loops that alternate direction.
07
Tree Easter Egg: hovering the tree wobbles it from its base, and clicking it also drops ten leaves that fall, fade and remove themselves.
08
Width Driven Layouts: the layout is chosen from the footer's own width, mobile under 640px and tablet under 1024px, so it works inside any container. Desktop floats the content over a 705px scene, tablet stacks it above a 470px scene with a bottom bar, and mobile uses a 330px scene anchored left so the tree stays in view.
09
Mobile Accordion: the three link columns become accordion rows of 52px, one open at a time, with a plus that turns into a cross and a height animation driven by grid rows.
10
Underline on Hover: desktop and tablet links draw an underline from the left in 0.35 seconds, and the logo petals turn 60 degrees on hover.
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
SVG Filters
Zero Primitive
Last Updated
Oct 5, 2026
Tags & Specifications
Parallax SceneSVG IllustrationRough Print EdgesDrifting CloudsTree Easter EggMobile Accordion
Color Palette
#6b9fdc
#f8efe1
#ef7a4b
#9cad6c
#2b3340
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
SVG Filters
Zero Primitive
