About this template
Read Innovation Lab as a landing page spec: the values were written down before the page was built. “We push past conventions, reshaping the virtual terrain with next-level technologies” is the line the layout is built to carry. The palette runs deep indigo #080219 underneath and white #F8F3EF for the type, and the type is Inter. Delivery is React and Tailwind CSS, captured at 1466x1080 so the frame is fixed before any code is written. The brief spends its motion budget on 0.2s transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. Keep it open while you write: the 6,911-character brief is the part that transfers to your own page.
Designed for
- Product marketers who need the landing page to still read with 6.9s of looping video behind the copy.
- Made for content leads rewriting a landing page whose headline has to stay as long as Innovation Lab's.
- Made for front-end developers who want the 0.2s timing and the cubic-bezier(0.16, 1, 0.3, 1) curve settled before they write a keyframe.
What's included
- A bar with nothing spare. A short run of links and a single action sit over the landing page, held at 12px spacing steps and 0.2s transitions so the bar never competes with the composition behind it. The bar sits over the 1466x1080 composition without a background of its own, so the media runs edge to edge underneath it.
- Numbers where the proof goes. The figures are set as type rather than in a card: Inter at the display size with labels one step below. The accent is spent on the figures that make a claim, not on the row as a whole.
- Links before the action. One action per bar. The reference was captured at 1466x1080.
- Measured against the viewport. Nothing here is eyeballed. The spec fixes 12px spacing steps, 0.2s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing, and the rest of the layout derives from those values. Each value maps to one job: a type step, a gap, a radius or a transition.
Motion & interaction
Ambient motion without a scroll library
The background clip runs 6.9s at 1466x1080 on an endless loop, muted and inline, so the page keeps moving while the reader's attention is on the copy. No scroll library is required, because the only ambient motion is the media itself. The clip is muted and inline, so the first frame is available without an interaction. Shoot or export at 1466x1080 or wider.
Interaction is on the controls
Every interactive element does one thing (hover states on the buttons and links rather than on every card), which is what keeps the states predictable. The states are drawn from the page's own palette rather than from a component default. A few reliable states beat a long list of effects.
Making the landing page yours
A template asks you to accept its layout; this reference asks you to keep it and change everything inside. The difference is that 12px spacing steps, 0.2s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing stay fixed while the subject moves. Keep the media crop; it is doing as much work as the type.
The numbers behind the landing page
Almost every decision here is a value you can check: 12px spacing steps, 0.2s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. The media is a 6.9s 1466x1080 loop. The type stays in Inter, so a substitution has to keep the same proportions. Nothing in this landing page depends on a default.
How the landing page reflows
There is no separate mobile design to maintain. the scale is fluid rather than stepped, and the same hierarchy carries across. Autoplay and motion are handled honestly, so the page still communicates when they are unavailable.
Frequently asked questions
How long is the prompt behind Innovation Lab?
The captured brief runs 6,911 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.
Do I need React and Tailwind CSS to rebuild Innovation Lab?
Innovation Lab 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 keep the Innovation Lab transitions and change the timings?
Entrances and state changes are in the 0.2s range using cubic-bezier(0.16, 1, 0.3, 1). They are driven by state changes rather than a scroll library, and they never hold up the copy.
