About this template
Brightly is the hero section reference for an agency or studio, and the brief behind it is a full build spec rather than a mood board. The headline reads “Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive”, and the rest of the hero section is arranged around it. The whole page is built on black #050505 underneath and bright orange #F97316 carrying the accents. Delivery is React and Tailwind CSS, captured at 2046x1400 so the frame is fixed before any code is written. Motion is confined to 3.5s transitions and a looping video bed. It is most useful when the Agencies & Studios hero section has to survive a copy change without a redesign.
Designed for
- This hero section serves founders who need one screen of proof that agency copy can carry 13.7s of looping video.
- Made for a solo founder shipping one hero section for an agency or studio and no design system behind them.
- Made for content leads rewriting a hero section whose headline has to stay as long as Brightly's.
What's included
- The bar shares the page grid. The bar is the quietest part of the composition: wordmark, a short row of links and one #F97316 action, all held at the smallest type step in the brief. The links are set below the wordmark in size, and the #F97316 action is the only element in the bar with any weight.
- Measured against the viewport. Nothing in the layout is left to feel: the brief quotes 24px spacing steps and 3.5s transitions and the build has to hit those values. Every value can be checked against the captured prompt, which is what makes a rebuild verifiable rather than approximate.
- One clip does the work. The first screen is a single clip at 2046x1400, and everything else is arranged on top of it. The loop is short enough (13.7s) that the eye reads it as texture rather than as a timeline.
- Navigation without a background. The bar sits over the 2046x1400 composition without a background of its own, so the media runs edge to edge underneath it.
Motion & interaction
Ambient motion without a scroll library
One 13.7s 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 short enough to loop without a visible seam, which matters more than its resolution.
Timings in milliseconds
The controls resolve in 3.5s, fast enough that the page answers as it is touched rather than after it. Easing is specified alongside the duration (3.5s), so a rebuild cannot quietly substitute a different feel.
How the hero section reflows
Most responsive work stops at hiding elements. Here the layout changes shape: the navigation collapses into a mobile menu, and nothing important is dropped to make the fold fit. A squeeze would have been cheaper and would not hold.
The timing behind the hero section
Keeping motion this small means the page leans on the type and the frame instead. If 3.5s transitions, a 13.7s media loop and a word-by-word headline were removed entirely, the composition would still stand. Nothing animates for its own sake in this hero section.
Why the agency brief holds
Restraint costs you room for proof above the fold. This brief accepts that cost and spends the first screen on the offer, with 24px spacing steps and 3.5s transitions fixed so a proof section can be added below without a rework. It gives a agency reader the shortest honest route to the offer.
Frequently asked questions
What can I do with the Brightly brief once I have it?
Everything quoted on the page comes from the captured 2,298-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
How long is the prompt behind Brightly?
It is a build brief rather than a mood description: it names the composition at 2046x1400, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Can I rebuild the Brightly hero section in a different stack?
Brightly 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.
