About this template
Aetheris Voyage keeps its decision trail: the brief that produced this hero section runs 10,190 characters. The page's own headline reads “Venture Past Our Sky Across the Universe”, and the composition is built around those exact words. The palette runs black #181719 underneath and muted orange #ECD9C1 for the type, and the type is Instrument Serif. Delivery is React and Tailwind CSS, captured at 800x570 so the frame is fixed before any code is written. Motion comes down to 100ms transitions and a looping video bed. It is most useful when the Travel hero section has to survive a copy change without a redesign.
Designed for
- Product marketers who need the hero section to still read with 8.8s of looping video behind the copy.
- Made for content leads rewriting a hero section whose headline has to stay as long as Aetheris Voyage's.
- Founders launching a travel brand hero section who need the Instrument Serif decision and the type scale settled before a developer starts.
What's included
- Top row: wordmark, links, one action. A slim bar sits over the hero section with the wordmark on the left and the links set in Instrument Serif, so the composition reads as content first and chrome second. The bar sits over the 800x570 composition without a background of its own, so the media runs edge to edge underneath it.
- The sizes are in the brief, not in a scale. The brief states its sizes at capture (10px spacing steps and 100ms transitions), so a rebuild can be verified instead of approximated. A rebuild that hits those numbers looks like the reference without further tuning.
- Links collapse at one width. The wordmark holds the left edge and the links run to the right of it, all of it set in Instrument Serif so the bar belongs to the page below rather than to a separate system. If your own page has more sections, group them rather than widening the bar.
- Every measurement is written down. Spacing is quoted the same way (10px spacing steps and 100ms transitions), not as a scale that grows on its own.
Motion & interaction
Sections arrive with scroll
Scroll reveal is the page's single scroll behaviour, so the effect has a defined place in the composition. Reduced motion drops the effect without changing the composition's final state.
The loop does the ambient work
One 8.8s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. A poster frame stands in when autoplay is blocked, so the motion is additive rather than required.
How Aetheris Voyage sequences the first read
Set your own copy into this hero section and the sequence still holds, because the elements are not interchangeable: navigation, the headline, the announcement badge, the stats row and the card grid each carry one job. A travel reader gets the offer before the options.
How the hero section reflows
A fixed desktop scale would have been easier. The brief adds a clamp between 11px and 10px, which is what keeps the display line proportionate between widths. A squeeze would have been cheaper and would not hold.
What to change first in Aetheris Voyage
Compare this with starting from a blank page. Here the frame (800x570) and 10px spacing steps and 100ms transitions are already decided, so the work is substitution rather than composition. Set the new copy at the same display size and re-check the contrast before you add anything.
Frequently asked questions
Is the Aetheris Voyage prompt a finished spec or a starting point?
It is a build brief rather than a mood description: it names the composition at 800x570, 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?
Aetheris Voyage 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.
Can I use Aetheris Voyage in a client project?
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 800x570.
