About this template
Scalable is a working reference for an AI or SaaS product: the hero section laid out, measured and ready to rebuild. The page's own headline reads “New Feature: Zapier Integration”, and the composition is built around those exact words. The whole page is built on deep indigo #2B1F36 underneath. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. Motion is a looping video bed, kept quiet enough that the copy still leads. This reference is for an AI or SaaS product that wants the first screen settled before the build starts.
Designed for
- Teams building an AI or SaaS product hero section who need a 1920x1592 frame on the record before an estimate goes out.
- Made for content leads rewriting a hero section whose headline has to stay as long as Scalable's.
- Designers who need the numbers first: 1920x1592, all of it quoted from the brief.
What's included
- Top row, one action. Navigation is a single row with no second level under it. The bar sits over the 1920x1592 composition without a background of its own, so the media runs edge to edge underneath it.
- Badge above the fold. A small pill sits above the headline for a single announcement, and the brief keeps it to one, because the point is to signal movement without turning the top of the page into a noticeboard. There is one announcement only, which is what makes the badge feel like news. Keep it above the headline, never beside it.
- 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. If a figure needs a paragraph, it is not a stat.
- A navigation bar that gets out of the way. The action is the only element in the row with a fill, which keeps the links reading as text. Copy this pattern when you need navigation that survives a loud first screen.
Motion & interaction
A loop, not a timeline
Ambient movement comes from the 10.5s 1920x1592 loop rather than from scroll effects, which keeps the page calm and the type readable. The clip is short enough to loop without a visible seam, which matters more than its resolution.
Static by design
This one is delivered as a still composition at 1920x1592, so the hierarchy has to work without motion, and it does. Motion is treated as feedback rather than as decoration.
Making the hero section yours
The composition is the reusable part and the subject is yours. Keep a 1920x1592 frame and replace the words, the media and the brand marks. Rewrite the copy and the media before you re-colour anything.
How Scalable sequences the first read
Order is the design here. navigation, the headline, the announcement badge, the stats row and the card grid are placed so the offer lands before the proof, and a 1920x1592 frame set the gap between them. A SaaS reader gets the offer before the options.
What moves in Scalable
Motion is limited to a sticky element and a 10.5s media loop; it runs once on entry and then gets out of the way, which is the right budget for the hero section to stay readable. Nothing animates for its own sake in this hero section.
Frequently asked questions
Can I ship a page rebuilt from Scalable without crediting it?
The prompt was published publicly by sceneai.art, and the preview here is their render. Treat it as a reference for structure and motion, check the source site's terms, and rebuild the composition with your own copy, media and palette before shipping it.
Is the Scalable brief the same as the prompt I would write?
Everything quoted on the page comes from the captured 8,462-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Scalable?
It is a build brief rather than a mood description: it names the composition at 1920x1592, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
