Upwind · growth studio for startups
Take your startup further, one tested idea at a time
A senior team that plans, runs and measures your growth experiments, from the first hundred users to the first million.
Sky launch
A sun behind layers of pastel clouds; the headline arrives word by word, a rocket takes off and leaves a trail through the sun, and the clouds rise to cover the hero as the page scrolls on.
Use when: Launches and growth stories that want warmth rather than tech: studios, coaching, fundraising, a product's first release.
Engine: DOM (HTML, SVG, CSS 3D), every browser
Render: …
npx shadcn@latest add @sharingan/sky-launchFirst time? Add the @sharingan registry to your project: getting started.
Add ?motion=final to the address for the repeatable still frame, or ?motion=off for the reduced-motion version.
Props
content what the hero says, real text in the DOM
| Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string (≤ 48 chars) | — | A short line above the headline. |
| headline * | string (8–70 chars) | — | The promise in one or two lines, 4–10 words; it arrives word by word. |
| subheadline | string (≤ 180 chars) | — | One or two sentences under the headline. |
| primaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — | |
| secondaryCta | object | — | |
| label * | string (2–28 chars) | — | Action verb first, 1–4 words. |
| href * | string (≥ 1 chars) | — |
config how it looks and moves; attributes on the Web Component
| Name | Type | Default | Description |
|---|---|---|---|
| sun | string (≥ 1 chars) | "#f3a39b" | The sun, and the rocket's window. |
| sky | string (≥ 1 chars) | "#dfe9da" | The sky at the top, and the back clouds. |
| clouds | string (≥ 1 chars) | "#f6cdc6" | The middle clouds; the front ones take the page's background. |
| rocket | boolean | true | A rocket takes off through the sun, leaving a trail. |
| launch | number (1–6) | 2.6 | How long the rocket takes to climb, in seconds. |
| exit | boolean | true | The clouds rise to cover the hero as the page scrolls past it. |
The same hero as a Web Component
Web Component · no framework
<sg-sky-launch>
The same engine, driven by attributes: a golden sun, a blue sky, lilac clouds and a slower climb. The sky is added behind the copy.