About this template
Neurolink Hero Section solves the hero section problem for an agency or studio with a single captured brief. The headline reads “Where Memories Live Forever”, and the rest of the hero section is arranged around it. The palette is deep blue #0D1017 underneath, white #FFFFFF for the type and bright orange #FFB733 carrying the accents, set in Inter. Delivery is vanilla JS — one page, no plugin, no build tooling between you and the design. Motion is limited to a looping video bed. Keep it open while you write: the 10,336-character brief is the part that transfers to your own page.
Designed for
- Anyone using an AI builder who wants a brief that already contains a 1526x1080 frame instead of leaving it to the model.
- If three people have to edit this hero section, give content leads 100vh sections and 16px spacing steps rather than a screenshot.
- Product marketers who need the hero section to still read with 3.9s of looping video behind the copy.
What's included
- Links before the action. Navigation is a thin strip rather than a band: wordmark left, links centre-right, one #FFB733 action, all of it sitting above the hero section without a background of its own. The links are set below the wordmark in size, and the #FFB733 action is the only element in the bar with any weight.
- Numbers carried into the build. The brief fixes 100vh sections and 16px spacing steps and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. Because the values are fixed, a substitution changes the look without changing the rhythm. Keep the values that look arbitrary.
- One media element carries the mood. One 3.9s asset carries the whole first screen, and the page has no second media element to keep in sync. The loop is short enough (3.9s) that the eye reads it as texture rather than as a timeline.
- Type does the styling. The faces are assigned roles rather than mixed: Inter carries the display and the interface together. Substituting the face is possible, but the proportions have to survive the swap.
Motion & interaction
The controls are the interactive layer
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card), so the page feels responsive without turning every element into a target. Each state changes one property, which keeps the feedback legible. Do not animate layout on hover.
The loop does the ambient work
The background clip runs 3.9s at 1526x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. A poster frame stands in when autoplay is blocked, so the motion is additive rather than required.
Why the agency brief holds
The design argues its case on one screen. The media is a 3.9s 1526x1080 loop. The media carries the atmosphere, the copy carries the offer, and 100vh sections and 16px spacing steps keep the two apart. Neurolink Hero Section states the offer once and lets the composition repeat it rather than adding a second claim.
How the hero section reflows
Wide, the composition is dense; narrow, the scale is fluid rather than stepped and the section is held at 100vh. Both states are described in the brief. Nothing important is dropped at narrow widths.
The order behind the hero section
Read the first screen in one pass and the offer is already clear. navigation, the headline, the announcement badge, the stats row and the background clip arrive in sequence, separated by 100vh sections and 16px spacing steps rather than by decorative dividers. A agency reader gets the offer before the options.
Frequently asked questions
Is the Neurolink Hero Section prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 1526x1080, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name vanilla JS at all?
The reference happens to be built in vanilla JS. Nothing in the layout depends on that choice: the spacing, type and motion values transfer to whatever you already use.
Can I ship a page rebuilt from Neurolink Hero Section without crediting it?
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 1526x1080.
