About this template
Portiva Hero shows one way to build the hero section for an agency or studio, and publishes the instructions that produced it. “Less complexity, more impact in every project” is the line the layout is built to carry. Colour is limited to teal #087573 underneath, white #D1E5E7 for the type and orange #C25E2E carrying the accents, set in Inter. It ships as one self-contained HTML file, so the whole hero section can be lifted into a project without a design handoff. Motion is confined to 120ms transitions and a looping video bed. Use it as the reference when you are building an agency or studio hero section and want a finished composition instead of a starting point.
Designed for
- Studio teams briefing a build and looking for one self-contained HTML file to react to.
- Borrow the hero section structure whole and replace the copy line by line against a 1466x1080 frame.
- This hero section 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
- Navigation without a background. Wordmark, links and the #C25E2E action share one baseline, which is what keeps a thin row from looking accidental. The links are set below the wordmark in size, and the #C25E2E action is the only element in the bar with any weight.
- The sizes are in the brief, not in a scale. Nothing in the layout is left to feel: the brief quotes 62px spacing steps and 120ms transitions and the build has to hit those values. A rebuild that hits those numbers looks like the reference without further tuning.
- Full-frame video, no panel. The media is doing atmospheric work rather than storytelling: one 4.5s loop at 1466x1080 behind everything else. Export at 1466x1080 or wider and the cover crop keeps working. Export at 1466x1080 or wider to keep the crop honest.
- Two faces, clear jobs. Typography is Inter, and the brief assigns the face a job rather than mixing for variety. Weight, tracking and size steps are all specified, so the hierarchy survives a substitution. A face swap is safe as long as the sizes and weights stay where the brief put them.
Motion & interaction
One duration for the controls
Motion is measured in milliseconds here: 120ms. That is the whole animation budget, and it is spent on state changes rather than on a scroll timeline. One value is reused across the controls, so their timing cannot drift apart. Fast state changes, no scroll timelines.
A loop, not a timeline
One 4.5s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. The clip is muted and inline, so the first frame is available without an interaction.
The order behind the hero section
Read it in order: navigation, the announcement badge, the card grid and the background clip. Each element has one job, and the orange #C25E2E accent is spent only on the element you are meant to press. A agency reader gets the offer before the options.
Reading Portiva Hero as a spec
When a rebuild drifts, the spacing goes first. Portiva Hero avoids that by publishing 62px spacing steps and 120ms transitions with the composition. Nothing in this hero section depends on a default.
How the hero section reflows
The hero section is composed at 1466x1080 and then re-composed for narrow widths. the navigation collapses into a mobile menu, so the phone version is a decision rather than a squeeze. The reflow keeps the action reachable at every width.
Frequently asked questions
What does the brief behind Portiva Hero actually contain?
The captured brief runs 2,639 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
Can I rebuild the Portiva Hero hero section in a different stack?
Portiva Hero 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.
Is the Portiva Hero brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 2,639-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
