Loading…
Live page · scroll inside
PremiumStrategy planning software · dark · landing page · gsap · lenis · html
Northstar
A strategy-planning SaaS site set under a still night sky in navy, starlight and gold: a glowing four-point star over a serif statement, then a pinned goal map that draws like a constellation as you scroll, with curved edges running from Today through three 2027 tracks and two 2028 milestones to break-even and a flaring gold star for 2029, while a stage panel names each milestone's owner and measure. Then a light monthly-review screen with statuses and a decision log, three plans and a centred star sign-off.
What's inside
- 01Star barSolid after 80 px.
- 02Night-sky statementThe star scales in; statement lines rise.
- 03Pinned constellation goal mapWhile pinned, scroll draws the map in four stages: curved edges draw from Today to the three 2027 milestones, then to the 2028 milestones, then to break-even, then to the star, which flares. Node labels appear as their edges arrive; the stage panel cross-fades to match and the progress bar fills.
- 04Monthly review screenThe card rises; status rows slide in.
- 05PlansColumns rise.
- 06Name your starLines rise.
- 07FooterNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
