About this template
Organic Odyssey shows one way to build the hero section for an AI or SaaS product, and publishes the instructions that produced it. The headline reads “An odyssey through delicate living forms”, and the rest of the hero section is arranged around it. The colour scheme is black #000000 underneath, and the page is set in Geist. The entry names the stack that produced the page (React and Tailwind CSS) rather than hiding it. Motion is limited to 300ms transitions. Keep it open while you write: the 4,802-character brief is the part that transfers to your own page.
Designed for
- Engineers who need the hero section to survive a slow connection will use 640x470 and the type scale as the weight budget.
- Made for content leads rewriting a hero section whose headline has to stay as long as Organic Odyssey's.
- Keep Geist and rebuild the hero section around it rather than opening a new type scale for your brand.
What's included
- The nav is deliberately thin. A slim bar sits over the hero section with the wordmark on the left and the links set in Geist, so the composition reads as content first and chrome second. A mobile overlay takes over below the tablet breakpoint. The bar sits over the 640x470 composition without a background of its own, so the media runs edge to edge underneath it.
- One scale for type and frame. The layout is solved against fixed values (20px spacing steps and 300ms transitions), which is what keeps the first screen composed at any width. Values are quoted from the captured prompt rather than inferred, so they survive a re-render. Where the brief is silent, it is silent on purpose.
- Proof in one row. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the hero section from turning into a feature list. The row is aligned to the same margin as the headline above it.
- A navigation bar that gets out of the way. Keep the row to one line. The reference was captured at 640x470.
Motion & interaction
Short, matched timings
State changes are specified at 300ms, so the feedback on the controls is a designed value rather than a browser default. Nothing waits on a scroll position, so the page responds the moment you touch it. One duration per behaviour.
Pointer states, nothing more
Feedback is limited to hover states on the buttons and links rather than on every card, so the rest of the layout is a fixed composition. Feedback is limited to the controls, so the composition stays still around them.
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. The hierarchy is what survives the reflow.
The order behind the hero section
Order is the design here. navigation, the headline, the stats row and the background clip are placed so the offer lands before the proof, and 20px spacing steps and 300ms transitions set the gap between them. A SaaS reader gets the offer before the options.
The numbers behind the hero section
Compare this with a template that calls its spacing a preference. Here the same values are named (20px spacing steps and 300ms transitions), so an edit either keeps them or visibly breaks the composition. Nothing in this hero section depends on a default.
Frequently asked questions
Is the Organic Odyssey prompt a finished spec or a starting point?
The captured brief runs 4,802 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 rebuild the Organic Odyssey hero section in a different stack?
Organic Odyssey 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.
What drives the motion in Organic Odyssey?
Transitions are attached to interface states rather than to a scroll timeline, and they resolve in the 300ms range. The brief records the values so a port can match them without guessing.
