About this template
Gulfselite gives a travel brand a finished first screen and the numbers that produced it. Colour is limited to muted orange #69574B underneath and white #FEFEFE for the type, set in Inter. The build is Tailwind and vanilla JavaScript; every measurement in it is written down, which is what makes it reusable. Motion is 120ms transitions and a looping video bed, kept quiet enough that the copy still leads. This reference is for a travel brand that wants the first screen settled before the build starts.
Designed for
- Front-end developers who have to ship this normally will use Tailwind and vanilla JavaScript as the reference implementation.
- The hero section is aimed at teams that already know Tailwind and vanilla JavaScript and only need a 1920x1448 frame written down.
- Front-end developers rebuilding this in Tailwind and vanilla JavaScript who want the transitions specified rather than guessed.
What's included
- The bar shares the page grid. The bar is one row of text and one action, measured at 20px spacing steps and 120ms transitions so it reads as a strip rather than as a band. The bar sits over the 1920x1448 composition without a background of its own, so the media runs edge to edge underneath it. Keep the row to one line.
- 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. It is positioned so the headline keeps the centre of the composition. Remove it when the news is old.
- Top row, one action. Focus and hover states are specified for each link rather than inherited from the browser. Copy this pattern when you need navigation that survives a loud first screen.
- The sizes are in the brief, not in a scale. The brief names the numbers: 20px spacing steps and 120ms transitions. That is why the composition holds together, because there is no invented spacing step between the type and the frame. The smallest and largest values in that list set the range the composition works in.
Motion & interaction
Durations from the brief
The animation budget is small and explicit: 120ms, applied to state changes rather than to entrances. Every state change names a value, so the browser default is never used.
The loop does the ambient work
Ambient movement is one 9.9s clip at 1920x1448, looping quietly behind the copy rather than reacting to the pointer. Nothing else on the page animates continuously, so the media is the only thing asking for attention.
The timing behind the hero section
Count the animated elements and the list is short: 120ms transitions, a 9.9s media loop and a word-by-word headline. Nothing animates for its own sake in this hero section.
Making the hero section yours
Set the new copy at the display size the brief names (20px spacing steps and 120ms transitions), and the rest of the scale follows without a redesign. Your accent has to survive the same contrast test as the reference accent.
How the hero section reflows
The desktop composition is solved against 1920x1448, and the narrow layout is designed rather than inherited: the scale is fluid rather than stepped. Motion has a reduced-motion branch, and the media carries a poster frame so the page still communicates when autoplay is unavailable. The hierarchy is what survives the reflow.
Frequently asked questions
Can I rebuild the Gulfselite hero section in a different stack?
No. The brief is a specification, not a dependency list. It was written for Tailwind and vanilla JavaScript, but the same composition rebuilds in whatever you already use. The stack is named so you know how the reference was made.
How is this Gulfselite entry organised?
Everything quoted on the page comes from the captured 2,498-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
What does the brief behind Gulfselite actually contain?
It is a build brief rather than a mood description: it names the composition at 1920x1448, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
