About this template
Before rebuilding a footer for an agency or studio, read Playful Idea: the composition and the specification behind it are both here. The palette runs #F0EEFA underneath and near-black #080909 for the type, and the type is Epilogue. Delivery is one self-contained HTML file, captured at 1564x1080 so the frame is fixed before any code is written. The motion budget is 2.54167s transitions and a looping video bed. If you are briefing a agency footer, start from this composition and replace the subject.
Designed for
- Borrow the footer structure whole and replace the copy line by line against one self-contained HTML file.
- Teams building an agency or studio footer who need a 700px breakpoint on the record before an estimate goes out.
- This footer serves designers who have to hand a one self-contained HTML file build to an engineer and want the motion written down.
What's included
- Links collapse at one width. The wordmark holds the left edge and the links run to the right of it, all of it set in Epilogue so the bar belongs to the page below rather than to a separate system. Labels are short enough to fit one line at 700px, and the active item is marked with weight rather than with a pill.
- The video is the background, not a panel. A 6.9s clip at 1564x1080 does the atmospheric work; the brief fixes its crop and leaves the type untouched on top of it. Export at 1564x1080 or wider and the cover crop keeps working.
- Fluid where it needs to be. Width changes are handled in the type itself: a clamp between 14px and 17px 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.
- Figures as typography. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the footer from turning into a feature list. There are no dividers inside the row; spacing alone separates the figures.
Motion & interaction
Motion can be switched off
The motion layer ships with an off switch: the entrance and the loop is dropped under prefers-reduced-motion. Interaction feedback still works under reduced motion; only the entrances are dropped.
The canvas holds the first screen
The visual is produced at runtime (a WebGL canvas) rather than loaded as a still, so the 1564x1080 frame has one fewer asset. The scene is drawn at the size of its container, so it does not depend on a fixed render resolution.
Reading Playful Idea as a spec
Every relationship on this page is a value you can check: type from 14px to 17px, 100vh sections, a 2-column grid, 100px corners and 30px spacing steps. That is what makes Playful Idea rebuildable rather than merely reproducible. Nothing in this footer depends on a default.
What to change first in Playful Idea
Change the copy and the media first, the colour second, the layout last. The 1564x1080 frame and the Epilogue scale are what hold the page together, so substitute around them rather than through them. Rewrite the copy and the media before you re-colour anything.
How Playful Idea sequences the first read
The footer has a stated reading path. Navigation establishes the product and gives a returning visitor a familiar way around. From there the eye takes navigation, the headline, the announcement badge, the stats row and the background clip in sequence, which is what keeps a single screen from reading as a list. A agency reader gets the offer before the options.
Frequently asked questions
Why does the entry name one self-contained HTML file at all?
Playful Idea 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.
How is this Playful Idea entry organised?
Everything quoted on the page comes from the captured 30,665-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What does the brief behind Playful Idea actually contain?
It is a build brief rather than a mood description: it names the composition at 1564x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
