About this template
Adventra is the hero section reference for an agency or studio, and the brief behind it is a full build spec rather than a mood board. The headline reads “Home, Our Story, FAQ, Policies”, and the rest of the hero section is arranged around it. The palette runs black #303230 underneath and gray #CAC7BD for the type, and the type is Inter. The build is one self-contained HTML file; every measurement in it is written down, which is what makes it reusable. The brief spends its motion budget on a looping video bed. It is the right reference for an agency or studio hero section that has to look deliberate on the first screen.
Designed for
- Engineers who need the hero section to survive a slow connection will use 1856x1398 and the type scale as the weight budget.
- Front-end developers who have to ship this normally will use one self-contained HTML file as the reference implementation.
- Front-end developers rebuilding this in one self-contained HTML file who want the transitions specified rather than guessed.
What's included
- Links before the action. A slim bar sits over the hero section with the wordmark on the left and the links set in Inter, so the composition reads as content first and chrome second. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1856x1398 composition without a background of its own, so the media runs edge to edge underneath it. Keep the link count to four or five; the row is sized for that.
- Every measurement is written down. The layout is solved against fixed values (a fixed 60px display size, 100vh sections and 16px spacing steps), which is what keeps the first screen composed at any width. The smallest and largest values in that list set the range the composition works in.
- One row, no drawers. The wordmark is treated as type rather than as a logo lockup, which keeps the top row on one baseline. Copy this pattern when you need navigation that survives a loud first screen.
- Measured, not eyeballed. Spacing is quoted the same way (a fixed 60px display size, 100vh sections and 16px spacing steps), not as a scale that grows on its own.
Motion & interaction
Ambient motion without a scroll library
The background clip runs 7s at 1856x1398 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. A poster frame stands in when autoplay is blocked, so the motion is additive rather than required.
Interaction is on the controls
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. A control that looks interactive behaves interactively, so there are no false affordances. Fewer states, fully specified.
What moves in Adventra
Motion here is a set of decisions, not a library: a word-by-word headline, a 7s media loop and hover and press states, and nothing animates on scroll. The result is a page that feels authored: short durations, one entrance, and state changes that confirm an action rather than decorate it. Nothing animates for its own sake in this hero section.
What to change first in Adventra
Re-skinning the palette first is the usual mistake. It changes the mood without touching the composition, and a fixed 60px display size and 100vh sections still carry the layout; do the copy and media first and the palette last. Rewrite the copy and the media before you re-colour anything.
How Adventra sequences the first read
Nothing here competes with the first decision. “Home, Our Story, FAQ, Policies” is doing that work from the first frame. The supporting material waits below the fold, and navigation and the background clip carry the top of the page alone. A agency reader gets the offer before the options.
Frequently asked questions
Can I rebuild the Adventra hero section in a different stack?
Adventra 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.
Why is Adventra's prompt not printed here?
Everything quoted on the page comes from the captured 3,134-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What do I get when I copy the Adventra brief?
It is a build brief rather than a mood description: it names the composition at 1856x1398, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
