About this template
This is the hero section from GlobalBank, published with the brief that produced it rather than as a screenshot. It leads with “Think Ahead. Move Fast. Exceed Expectations” and gives that line the frame rather than shrinking it into a card. The palette is white #FFFFFF underneath, deep green #1A2E24 for the type and green #22C55E carrying the accents, set in Inter. Delivery is one self-contained HTML file, captured at 1468x1080 so the frame is fixed before any code is written. Motion comes down to 4.1s transitions and a looping video bed. Keep it open while you write: the 31,093-character brief is the part that transfers to your own page.
Designed for
- Borrow the hero section structure whole and replace the copy line by line against one self-contained HTML file.
- Teams rebuilding a competitor's SaaS hero section who want one self-contained HTML file named before anyone commits to a framework.
- Start from type from 14px to 46px and 14px spacing steps and let the palette follow, because the spacing is what makes this hero section read.
What's included
- One row, no drawers. The top row holds the wordmark, four to five links and a single action tinted #22C55E, sized to stay quiet against the rest of the page. A mobile overlay takes over below the tablet breakpoint. The links are set below the wordmark in size, and the #22C55E action is the only element in the bar with any weight. Keep the link count to four or five; the row is sized for that.
- Numbers carried into the build. The layout works on absolute values rather than ratios: type from 14px to 46px, 14px spacing steps and 4.1s transitions. The list is short enough that a reviewer can check it element by element.
- The video is the background, not a panel. The 1468x1080 frame is filled by a single loop that plays behind the copy and asks for no controls. A poster frame at 1468x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- Links before the action. Design the collapsed state before adding a sixth link. The reference was captured at 1468x1080.
Motion & interaction
Durations from the brief
The timings are short and consistent (4.1s), so hover and press states read as one system instead of a set of separate effects. Easing is specified alongside the duration (4.1s), so a rebuild cannot quietly substitute a different feel.
A loop, not a timeline
One 4.9s 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 short enough to loop without a visible seam, which matters more than its resolution.
The timing behind the hero section
Where a template animates every section on entry, this one animates 4.1s transitions, a 4.9s media loop and a word-by-word headline and then holds. Nothing animates for its own sake in this hero section.
The order behind the hero section
Attention is routed rather than scattered. The page says it out loud: “Think Ahead. Move Fast. Exceed Expectations”. The eye lands on the display line first, then the supporting copy, then the action. That sequence is the design. A SaaS reader gets the offer before the options.
Reading GlobalBank as a spec
The brief is a specification, not a mood board. It fixes type from 14px to 46px, 14px spacing steps and 4.1s transitions, and it names the media at 1468x1080 and a 4.9s loop. That level of detail is why the design survives a rebuild: change the copy and the relationships still hold. Nothing in this hero section depends on a default.
Frequently asked questions
Can I rebuild the GlobalBank hero section in a different stack?
GlobalBank 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.
How long is the prompt behind GlobalBank?
The captured brief runs 31,093 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.
How do the 4.1s transitions in GlobalBank behave?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 4.1s range. The brief records the values so a port can match them without guessing.
