About this template
Immersive Ocean is a agency hero section built from one written brief, and this page documents that brief. It leads with “Shaping visual narratives, one pixel at a time” and gives that line the frame rather than shrinking it into a card. Colour is limited to deep blue #000410 underneath, gray #C2CFCA for the type and teal #0E4154 carrying the accents, set in Geist. Delivery is React and Tailwind CSS, captured at 640x478 so the frame is fixed before any code is written. Motion is cubic-bezier(0.16,1,0.3,1), kept quiet enough that the copy still leads. This reference is for an agency or studio that wants the first screen settled before the build starts.
Designed for
- Designers who need the numbers first: 100vh sections and 80px spacing steps, all of it quoted from the brief.
- People who brief a model on a hero section will use the 4,030-character prompt as the starting point.
- Made for content leads rewriting a hero section whose headline has to stay as long as Immersive Ocean's.
What's included
- Top row: wordmark, links, one action. Wordmark, links and the #0E4154 action share one baseline, which is what keeps a thin row from looking accidental. The links are set below the wordmark in size, and the #0E4154 action is the only element in the bar with any weight. Give the wordmark no more room than its type needs.
- One scale for type and frame. The values are the specification: 100vh sections, 80px spacing steps and cubic-bezier(0.16,1,0.3,1) easing, captured at 640x478 rather than inferred from a screenshot. Each value maps to one job: a type step, a gap, a radius or a transition. Keep the values that look arbitrary.
- One family, two roles. The size steps and tracking in the brief are what give this its tone: Geist at a tight display size, then a clear drop to the supporting copy. The interface text stays on one face, so the page never mixes two voices at the same size.
- One row, no drawers. The bar sits over the 640x478 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Durations from the brief
Motion is measured in milliseconds here: 0 on cubic-bezier(0.16,1,0.3,1). That is the whole animation budget, and it is spent on state changes rather than on a scroll timeline. Focus states are timed with the same value as hover, so keyboard and pointer feedback match.
A small interactive surface
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. The states are named in the brief, so the page does not depend on a hover-effect library.
How the hero section reflows
If your breakpoints were chosen to make things fit rather than to change the layout, read this entry. the section is held at 100vh and the navigation collapses into a mobile menu rather than a list of hidden elements. Both states are described in the same brief.
What to change first in Immersive Ocean
Compare this with starting from a blank page. Here the frame (640x478) and 100vh sections and 80px spacing steps are already decided, so the work is substitution rather than composition. Substitution is cheaper than composition, and that is the point.
The order behind the hero section
You could shuffle these blocks and the page would still load. It would stop reading as an argument, though: navigation, the announcement badge, the stats row, the feature list and the background clip are a sequence, and 100vh sections and 80px spacing steps only work in that order. A agency reader gets the offer before the options.
Frequently asked questions
Is the Immersive Ocean prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 640x478, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Immersive Ocean was built in React and Tailwind CSS, 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 should I handle the Immersive Ocean media in a client build?
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 640x478.
