About this template
Read Visual Hero as a hero section spec: the values were written down before the page was built. It leads with “Forma's AI understands context, composition, and style like a creative director would” and gives that line the frame rather than shrinking it into a card. Typography is Instrument Serif, and the brief fixes the sizes rather than leaving them to a scale. Delivery is React and Tailwind CSS, captured at 996x720 so the frame is fixed before any code is written. Motion comes down to a looping video bed. If you are briefing a SaaS hero section, start from this composition and replace the subject.
Designed for
- If three people have to edit this hero section, give content leads 50px spacing steps rather than a screenshot.
- This hero section serves founders who need one screen of proof that SaaS copy can carry 6.9s of looping video.
- People who brief a model on a hero section will use the 8,275-character prompt as the starting point.
What's included
- Navigation without a background. The wordmark holds the left edge and the links run to the right of it, all of it set in Instrument Serif so the bar belongs to the page below rather than to a separate system. The bar sits over the 996x720 composition without a background of its own, so the media runs edge to edge underneath it. If your own page has more sections, group them rather than widening the bar.
- Measured, not eyeballed. Every measurement in the brief is a number you can measure back: 50px spacing steps. The brief states values rather than proportions, so the composition keeps its relationships when the copy changes length. Substitute the face or the copy, not the scale.
- Proof in one row. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the hero section from turning into a feature list. Figures are set at one weight, so the row does not rank its own statistics.
- Links collapse at one width. Focus and hover states are specified for each link rather than inherited from the browser. The bar is a handful of elements, so it rebuilds without a component library.
Motion & interaction
Scroll drives the sequence
Parallax is the only scroll behaviour in the brief, which keeps the page from feeling like a sequence of separate effects. The scroll behaviour is measured against the same layout the static page uses, so nothing shifts when it is removed.
The loop does the ambient work
The background clip runs 6.9s at 996x720 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. The clip is muted and inline, so the first frame is available without an interaction.
The numbers behind the hero section
Committing to 50px spacing steps trades flexibility for repeatability. That is the point of the reference: the same page in a different brand, without a new set of guesses. Nothing in this hero section depends on a default.
How Visual Hero sequences the first read
Committing to one reading path means other paths are closed. The brief accepts that, fixes navigation, the announcement badge, the stats row and the background clip in place, and spends 50px spacing steps on making the route obvious. A SaaS reader gets the offer before the options.
Why this composition works for SaaS
If your first screen currently explains three things, this is the version that explains one. navigation, the announcement badge, the stats row and the background clip are staged in reading order, with 50px spacing steps setting the rhythm. It gives a SaaS reader the shortest honest route to the offer.
Frequently asked questions
What does the brief behind Visual Hero actually contain?
It is a build brief rather than a mood description: it names the composition at 996x720, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Visual Hero hero section in a different stack?
Visual Hero was built in React and Tailwind CSS, 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.
Where did the Visual Hero design come from?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 996x720.
