About this template
Lumina solves the hero section problem for an agency or studio with a single captured brief. The palette is red #EC4899 underneath and bright blue #3B82F6 carrying the accents. It ships as a single component, so the whole hero section can be lifted into a project without a design handoff. The page keeps its motion to a looping video bed. If you are briefing a agency hero section, start from this composition and replace the subject.
Designed for
- Agencies pitching an agency or studio hero section who want 70px spacing steps quoted in the deck so the estimate still holds after the kickoff.
- Product marketers who need the hero section to still read with 6s of looping video behind the copy.
- Contract teams taking over this hero section who need a 2056x1478 frame pinned in the repo before the first commit.
What's included
- Navigation without a background. Wordmark, links and the #3B82F6 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 #3B82F6 action is the only element in the bar with any weight.
- Values you can check. Sizes were read off the render at 2056x1478: 70px spacing steps. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate.
- The bar shares the page grid. The bar sits over the 2056x1478 composition without a background of its own, so the media runs edge to edge underneath it.
- Every measurement is written down. Spacing is quoted the same way (70px spacing steps), not as a scale that grows on its own.
Motion & interaction
Interaction kept local
The interactive layer is deliberately small: hover states on the buttons and links rather than on every card. Press states are specified as well as hover, so a tap gives the same confirmation as a click. Fewer states, fully specified.
Ambient motion without a scroll library
One 6s 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 muted and inline, so the first frame is available without an interaction.
The numbers behind the hero section
The cost of a fixed scale is less room to improvise. 70px spacing steps keep the composition coherent, but a new element has to be fitted rather than placed. Nothing in this hero section depends on a default.
The timing behind the hero section
Compare the motion here with a scroll-driven page. Both move; this one moves where the brief says (hover and press states, a 6s media loop and a looping marquee), so the copy stays in front. Nothing animates for its own sake in this hero section.
Making the hero section yours
Most people start with the accent colour. Start with the promise instead: rewrite the display line, then re-test bright blue #3B82F6 against your own media. The composition is the reusable part, and it survives a different brand.
Frequently asked questions
Is the Lumina prompt a finished spec or a starting point?
The captured brief runs 2,677 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.
Why does the entry name a single component at all?
The reference happens to be built in a single component. Nothing in the layout depends on that choice: the spacing, type and motion values transfer to whatever you already use.
What can I do with the Lumina brief once I have it?
Everything quoted on the page comes from the captured 2,677-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
