About this template
This is the landing page from AI Runtime, published with the brief that produced it rather than as a screenshot. Colour is limited to neutral #28282A underneath and tint #C8C8C8 for the type, set in Inter. The build is React; every measurement in it is written down, which is what makes it reusable. Motion comes down to 0.85s transitions, cubic-bezier(0.22, 1, 0.36, 1) and a looping video bed. Keep it open while you write: the 9,593-character brief is the part that transfers to your own page.
Designed for
- Take the 1472x1080 frame and 100vh sections and 28px spacing steps from this landing page before you take anything else.
- This landing page serves founders who need one screen of proof that SaaS copy can carry 6.9s of looping video.
- Made for content leads rewriting a landing page whose headline has to stay as long as AI Runtime's.
What's included
- The bar shares the page grid. Navigation is a single row with no second level under it. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 1472x1080 composition without a background of its own, so the media runs edge to edge underneath it. Test the bar over your own media before giving it a background.
- Measured, not eyeballed. Sizes are quoted rather than inherited: 100vh sections, 28px spacing steps, 0.85s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing. Swap the face or the copy and those relationships still hold. The smallest and largest values in that list set the range the composition works in.
- A stat strip, not a table. The figures are set as type rather than in a card: Inter at the display size with labels one step below. Figures are set at one weight, so the row does not rank its own statistics. Cut a figure before you shrink the label.
- Top row, one action. Keep the row to one line. The reference was captured at 1472x1080.
Motion & interaction
A quieter branch is included
The brief includes a prefers-reduced-motion branch, so the entrance and the loop can be switched off without losing the layout. Copy that branch straight into your build. With reduced motion on, the composition holds its final state rather than snapping mid-transition.
The loop does the ambient work
Ambient movement comes from the 6.9s 1472x1080 loop rather than from scroll effects, which keeps the page calm and the type readable. The clip is muted and inline, so the first frame is available without an interaction. Shoot or export at 1472x1080 or wider.
How the landing page reflows
Responsive here means the scale changes, not the hierarchy: the scale is fluid rather than stepped, the section is held at 100vh and the navigation collapses into a mobile menu. Text stays above the fold, controls stay large enough to tap, and reduced motion is honoured. The order is the last thing to change.
The order behind the landing page
Compare the top of this page with a typical SaaS landing screen. Both carry a headline and an action; here navigation, the headline, the announcement badge, the stats row and the client row sit in a fixed order instead of competing at the same weight. A SaaS reader gets the offer before the options.
What an AI or SaaS product gains here
Where a template fills the fold with modules, this landing page uses navigation, the headline, the announcement badge, the stats row and the client row and stops. The difference shows in 100vh sections and 28px spacing steps: nothing is padded to fill space. AI Runtime states the offer once and lets the composition repeat it rather than adding a second claim.
Frequently asked questions
What does the brief behind AI Runtime actually contain?
The captured brief runs 9,593 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 AI Runtime landing page in a different stack?
The reference happens to be built in React. Nothing in the layout depends on that choice: the spacing, type and motion values transfer to whatever you already use.
How much of AI Runtime is animated?
Entrances and state changes are in the 0.85s range on cubic-bezier(0.22, 1, 0.36, 1) with a reduced-motion branch in the brief. They are driven by state changes rather than a scroll library, and they never hold up the copy.
