About this template
Stories in Light shows one way to build the hero section for an agency or studio, and publishes the instructions that produced it. The palette runs deep blue #2B3342 underneath and white #FFFFFF for the type, and the type is Archivo. Delivery is a single component, captured at 2502x1730 so the frame is fixed before any code is written. Motion is limited to 0.4s transitions and a looping video bed. Keep it open while you write: the 4,462-character brief is the part that transfers to your own page.
Designed for
- This hero section serves teams who have to justify a single component to someone who was not in the kickoff.
- Anyone using an AI builder who wants a brief that already contains a 560px breakpoint instead of leaving it to the model.
- The page serves front-end developers rebuilding an agency or studio hero section in a single component and looking for the numbers behind the look.
What's included
- A navigation bar that gets out of the way. The bar is one row of text and one action, measured at a fixed 15px display size and 100vh sections so it reads as a strip rather than as a band. Labels are short enough to fit one line at 560px, and the active item is marked with weight rather than with a pill.
- The loop is the backdrop. The first screen is a single clip at 2502x1730, and everything else is arranged on top of it. The loop is short enough (13.3s) that the eye reads it as texture rather than as a timeline.
- A pill for the one thing that is new. One badge, one message: the pill sits above the headline in Archivo at the smallest step, and nothing else competes for that slot. There is one announcement only, which is what makes the badge feel like news. One badge, one message.
- Fluid where it needs to be. Width changes are handled in the type itself: a clamp between 55px and 40px carries the headline from phone to desktop without a separate mobile composition. The mobile menu is part of the same brief, so the collapsed state is designed too.
Motion & interaction
One duration for the controls
Every state change in the specification has a duration attached: transitions settle around 0.4s. Nothing is left at the browser default, which is why the page feels authored rather than animated. Easing is specified alongside the duration (0.4s), so a rebuild cannot quietly substitute a different feel.
Interaction kept local
States are handled per component (hover states on the buttons and links rather than on every card) rather than by a global animation layer. The interactive states do not move layout, so nothing jumps under the pointer. Keep the pointer effects on the controls.
Making the hero section yours
If your brand runs a heavier palette, test it against the frame before you commit. deep blue #2B3342 carries the page, so a darker accent needs more contrast than the reference uses. Keep the frame and the scale; the subject is the part that should change.
What moves in Stories in Light
You could drop a preset library onto this composition and it would look busier, not better. The brief keeps 0.4s transitions, a 13.3s media loop and hover and press states and spends the budget there. Nothing animates for its own sake in this hero section.
The order behind the hero section
The hero section has a stated reading path. Navigation establishes the product and gives a returning visitor a familiar way around. From there the eye takes navigation, the headline, the announcement badge and the stats row in sequence, which is what keeps a single screen from reading as a list. A agency reader gets the offer before the options.
Frequently asked questions
How much of Stories in Light depends on a single component?
Stories in Light was built in a single component, 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.
What does the brief behind Stories in Light actually contain?
The captured brief runs 4,462 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.
Can I ship a page rebuilt from Stories in Light 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 2502x1730.
