Loading…
Live page · scroll inside
PremiumFractional COO firm · light · landing page · gsap · lenis · html
Fractional
A fractional-COO firm's site in sail-cloth white, navy ink and sea blue: a calm serif statement over a drawn waterline with a keel, then a pinned twelve-week calendar of seven operating rituals that fills week by week as you scroll, with a sliding 'now' column, a caption for what happened that week and four KPIs (runway, close days, meetings, decisions) moving to their week-twelve values. Then three situations in italic quotes, operators shown as initials tiles, a three-column engagement comparison and a sea-blue band with call slots.
What's inside
- 01Keel barSolid after 80 px.
- 02Operator statementStatement lines rise; the waterline draws left to right.
- 03Pinned twelve-week cadenceWhile pinned, scrolling walks through weeks 1 to 12: the now column slides one week at a time, each ritual's block for that week pops in, the caption changes and the KPIs move from their starting values to week-twelve values.
- 04Who it's forRows rise in turn.
- 05OperatorsCards rise.
- 06EngagementsColumns rise.
- 07Book a callLines rise.
- 08FooterNone.
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.
