About this template
Heritage Grove was captured at 1920x1424 and kept as a specification rather than as a gallery image. The headline reads “Heritage Grove — Footer”, and the rest of the footer is arranged around it. The palette runs cream #EAE3DE underneath, teal #0F454F for the type and shade #2A707C carrying the accents, and the type is Poppins. Delivery is one self-contained HTML file, captured at 1920x1424 so the frame is fixed before any code is written. The motion budget is 2s transitions, cubic-bezier(.22,1.36,1) and a looping video bed. It is most useful when the Ecommerce footer has to survive a copy change without a redesign.
Designed for
- Quote cubic-bezier(.22,1.36,1) easing in the handoff note so the next build does not have to re-derive it from the page.
- Write your own headline, then rebuild this footer in one self-contained HTML file with the measurements intact.
- Made for agencies that pitch ecommerce work and need a 359px breakpoint in the first reply to the client.
What's included
- Links collapse at one width. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #2A707C action, all of it sitting above the footer without a background of its own. Labels are short enough to fit one line at 359px, and the active item is marked with weight rather than with a pill. Design the collapsed state before adding a sixth link.
- Media without an overlay. The media is doing atmospheric work rather than storytelling: one 9.6s loop at 1920x1424 behind everything else. Export at 1920x1424 or wider and the cover crop keeps working.
- Behaviour is defined per width. Width changes are handled in the type itself: a clamp between 240px and 52px carries the headline from phone to desktop without a separate mobile composition. Controls stay large enough to tap and the copy keeps its reading order at every width. Check the first screen on a phone.
- A bar with nothing spare. Below 359px the links collapse instead of wrapping onto a second line.
Motion & interaction
A loop, not a timeline
Ambient movement comes from the 9.6s 1920x1424 loop rather than from scroll effects, which keeps the page calm and the type readable. Because it is muted, the loop can run under the copy without competing for sound or focus.
A quieter branch is included
The brief includes a prefers-reduced-motion branch, so the entrance and the loop can be switched off without losing the layout. Copy that branch straight into your build. With reduced motion on, the composition holds its final state rather than snapping mid-transition. The layout has to survive without the animation.
How Heritage Grove sequences the first read
If your page currently leads with features, this is the order to copy: navigation, the stats row, the feature list, the form and the background clip in front, the supporting detail after, and a fixed 16px display size and 100vh sections setting the distance. A ecommerce reader gets the offer before the options.
How the footer reflows
The footer is composed at 1920x1424 and then re-composed for narrow widths. the scale is fluid rather than stepped, the layout shifts at 359px and the section is held at 100vh, so the phone version is a decision rather than a squeeze. Autoplay and motion are handled honestly, so the page still communicates when they are unavailable.
Why the ecommerce brief holds
The reason this works for an ecommerce brand is that it never asks the reader to assemble the message. “Heritage Grove — Footer” is doing that work from the first frame. Layout, type and colour are decided (cream #EAE3DE and shade #2A707C, set in Poppins), so the first screen reads as a finished argument rather than a pile of parts. Heritage Grove states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
How much of Heritage Grove depends on one self-contained HTML file?
Heritage Grove was built in one self-contained HTML file, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
What can I do with the Heritage Grove brief once I have it?
Everything quoted on the page comes from the captured 12,893-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Heritage Grove?
It is a build brief rather than a mood description: it names the composition at 1920x1424, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
