About this template
Wellness Companion is the landing page reference for a health or wellbeing product, and the brief behind it is a full build spec rather than a mood board. The palette runs deep blue #1A1A1E underneath, and the type is Helvetica, Arial. Delivery is React and Tailwind CSS, captured at 1440x1080 so the frame is fixed before any code is written. Motion is 0.5s transitions, cubic-bezier(0.22, 1, 0.36, 1) and a looping video bed, kept quiet enough that the copy still leads. Use it as the reference when you are building a health or wellbeing product landing page and want a finished composition instead of a starting point.
Designed for
- Product marketers who need the landing page to still read with 5.9s of looping video behind the copy.
- People who brief a model on a landing page will use the 4,095-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as Wellness Companion's.
What's included
- Measured against the viewport. The brief fixes 12px spacing steps, 0.5s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing and leaves the rest to the arrangement, which is the opposite of a scale that grows on its own. Spacing is quoted in the same units as the type, so the two can be compared directly. Measure before you adjust.
- A full-bleed clip behind the type. The background is a single 5.9s loop at 1440x1080, cropped to cover and left un-tinted. Everything else floats above it on a higher layer. A poster frame at 1440x1080 holds the composition when autoplay is unavailable, so the layout never collapses.
- One idea per panel. The grid does the reading order for you: panels of equal weight, one idea each, set in Helvetica, Arial at a small size so the structure stays visible. The grid collapses to one column without changing the panel order.
- Measured, not eyeballed. Spacing is quoted the same way (12px spacing steps, 0.5s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing), not as a scale that grows on its own.
Motion & interaction
A loop, not a timeline
One 5.9s clip is the entire ambient layer: it plays behind the copy, loops without a visible cut and never reacts to the pointer. Because it is muted, the loop can run under the copy without competing for sound or focus.
State changes, timed
The animation budget is small and explicit: 0.5s using cubic-bezier(0.22, 1, 0.36, 1), applied to state changes rather than to entrances. Easing is specified alongside the duration (0.5s), so a rebuild cannot quietly substitute a different feel.
What moves in Wellness Companion
Compare the motion here with a scroll-driven page. Both move; this one moves where the brief says (0.5s transitions and a 5.9s media loop), so the copy stays in front. Nothing animates for its own sake in this landing page.
The numbers behind the landing page
You cannot fix a composition by eye when two people are rebuilding it. The brief removes the argument: 12px spacing steps, 0.5s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing, stated once. Nothing in this landing page depends on a default.
Why this composition works for health
A stock hero and this landing page use the same parts. Here they are ordered by the headline, the announcement badge, the stats row, the card grid and the countdown and measured with 12px spacing steps, 0.5s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing, so the screen reads as a sequence rather than a container. It gives a health reader the shortest honest route to the offer.
Frequently asked questions
Is the Wellness Companion prompt a finished spec or a starting point?
The captured brief runs 4,095 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.
How much of Wellness Companion depends on React and Tailwind CSS?
Wellness Companion 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.
How should I handle the Wellness Companion media in a client build?
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 1440x1080.
