Template guide
Instructions.
How the scroll story works and how to make it yours.
This template is a scroll story: the home page is built from tall “Scene” sections with a sticky screen inside, and small code overrides move things as you scroll through each scene. Everything else (Work, Ventures, Notes and their detail pages) is native Framer with the CMS, so you can edit it like any other site.
All colours live in Assets → Colors (Ink, Accent, Paper, Outline and one colour per scene). Text uses nine text styles: Name, Display, Headline, Serif Large, Serif Medium, Lede, Label, Mono and Body, plus Article styles for notes. Fonts: Bodoni Moda, Big Shoulders, Instrument Sans and JetBrains Mono, all free Google Fonts. Change a style once and every page updates.
Projects, Ventures, Notes and Testimonials are CMS collections. Each project has a page colour and an accent colour, which tint its detail page and its card. Steps, results, stats, features and timeline entries are list fields: add or remove rows and the pages follow. Notes support headings, images and quotes in the rich text.
Every home section named “Scene · …” has a sticky child that is 100vh tall; the scene’s height decides how long the animation lasts. Overrides from the ScrollScenes code file are attached to layers (Code Overrides in the right panel): withIntroTitle, withHelloWord, withProductsWord, withCardsRise, withCountUp, withSunRise, withHorizontalTrack, withVentureCount, withSceneBar, withDeckCard (the product cards in Products that flip as you scroll; name the cards “Deck 1”, “Deck 2”…) and others. To remove an effect, clear the override; the layer keeps its normal design.
The fixed “Backdrop” layer at the top of the home page reads each Scene and Section fill and blends from one to the next while you scroll. Just change a section’s fill colour. Keep the Backdrop layer first in the page and never rename it to start with “Scene”.
Button (Primary and Ghost), Contact CTA (the “Let’s talk” block on every page), Filter Tab (Work filters), Submit Button (form states), Phone Menu (the phone header menu) and the code components Odometer, Rider, Atmosphere (stars and grain), SceneBackdrop and Cursor Badge. The Cursor Badge shows “View project” over any layer whose name starts with “Project”, “Venture Card”, “Note Card” or “Next”: edit the list in its controls.
The ruler at the bottom of the home page jumps to sections by their scroll ID (intro, products, years, beliefs, lisbon, ventures, work, contact). If you add a section, give it a scroll ID and add a chapter in the Odometer controls.
Work covers are AI-generated illustrations plus one original mockup scene; venture screenshots, brand sheets and note illustrations are original placeholder art made for this template. Replace the portrait and the CMS images with your own, keeping the 4:3 cover and 16:10 screenshot ratios for the best fit.
Tb
Get Template