About this template
Agent Wave is a SaaS landing page built from one written brief, and this page documents that brief. The palette is #000000 underneath and #FFFFFF for the type, set in Inter. Delivery is a single component, captured at 1478x1080 so the frame is fixed before any code is written. The page keeps its motion to 0.28s transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. Keep it open while you write: the 16,675-character brief is the part that transfers to your own page.
Designed for
- Product managers who have to estimate the build will read a single component as the scope of the work.
- Studio teams briefing a build and looking for a 901px breakpoint to react to.
- Teams rebuilding a competitor's SaaS landing page who want a single component named before anyone commits to a framework.
What's included
- The nav is deliberately thin. The bar is one row of text and one action, measured at a fixed 19px display size and 100vh sections so it reads as a strip rather than as a band. Labels are short enough to fit one line at 901px, and the active item is marked with weight rather than with a pill. If your own page has more sections, group them rather than widening the bar.
- Full-frame video, no panel. The clip runs 6.9s at 1478x1080 and loops without a visible cut, so it reads as surface rather than as footage. A poster frame at 1478x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- The announcement pill. One badge, one message: the pill sits above the headline in Inter at the smallest step, and nothing else competes for that slot. The pill sits at the smallest step in the brief, so it reads as a label rather than as a second title.
- One row, no drawers. Below 901px the links collapse instead of wrapping onto a second line.
Motion & interaction
A loop, not a timeline
Ambient movement is one 6.9s clip at 1478x1080, looping quietly behind the copy rather than reacting to the pointer. The loop is cropped to cover, which means the composition does not depend on a particular frame size. Shoot or export at 1478x1080 or wider.
Arrival order is the trick
Entrance motion is spent on one element only (each line rises out of an overflow-hidden window), which is what keeps a busy first screen from feeling busy. Under reduced motion the element simply appears and the layout is unchanged.
Reading Agent Wave as a spec
The landing page is measured, not eyeballed. a fixed 19px display size and 100vh sections come from the brief, and the layout is arranged to those steps rather than nudged into place. Nothing in this landing page depends on a default.
Why this composition works for SaaS
Count the decisions in this landing page and they trace back to one document: 16,675 characters naming the frame at 1478x1080, the type and the rhythm. It gives a SaaS reader the shortest honest route to the offer.
How the landing page reflows
Wide, the composition is dense; narrow, the layout shifts at 901px, the section is held at 100vh and the motion has a reduced-motion branch. Both states are described in the brief. Both states are described in the same brief.
Frequently asked questions
How much of Agent Wave depends on a single component?
Agent Wave was built in a single component, 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 long is the prompt behind Agent Wave?
It is a build brief rather than a mood description: it names the composition at 1478x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Where did the Agent Wave 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 1478x1080.
