Buyer guide · not in the menu, hidden from search engines
Make it yours.
This page is for the person who bought the template. It walks through every change a launch needs, in the order you will meet them, with the exact names used in the Framer editor. Only the small Guide link in the footer reaches it; the last section says how to remove both.
01
What you bought
Seven pages: Home with the scroll-driven 3D chapters, /specs, /reserve, /updates with one page per post, a 404 page, and this guide. The menu and the footer live in one layout template called Site, so a change there shows on every page (Assets tab, Templates, double-click Site).
Plan: the demo runs on the Free plan. The template uses two CMS collections, Updates and FAQ, which the Basic plan covers. The 3D model is 209 KB and the engine file 179 KB as served, both well under the Free plan’s 5 MB upload limit.
Everything on the demo is placeholder content for a fictional brand. The dark table near the end of this page lists every demo line to replace before you launch.
Third-party code and licences: the engine file bundles three.js (MIT License, copyright 2010 to 2026 three.js authors) and the meshoptimizer decoder (MIT License, copyright 2016 to 2026 Arseny Kapoulkine); both notices sit at the top of the engine file and must stay there. Mona Sans and IBM Plex Mono are under the SIL Open Font License and are served by Framer. Nothing else in the template is third-party.
02
Replace the 3D model
The headphone is one .glb file shown by a code component called Chapter Stage. It sits on Home inside the tall section named Track: as the visitor scrolls, the model turns, comes apart, walks through five feature chapters and reassembles into the ending.
1. Open Home, Layers tab, search Chapter Stage and select it.
2. In the right panel, click the file next to Model (GLB) and choose your .glb. Leave Engine (JS) as it is: it holds the 3D engine.
3. Preview and scroll through the whole track once on a laptop and once at phone width.
Export rules: glTF Binary (.glb), no Draco compression (meshopt compression is fine), Y axis up, centred on the origin, sized like the real product. The camera fits the whole model in every frame, so nothing gets cropped whatever its size. Keep it under 50,000 triangles and about 1 MB: the page downloads it only after the first scroll, but a heavy file still stalls the first frame.
Finishes recolour the model by material name. Name your materials shell, fabric, metal, dark and accent and the finish swatches in the ending repaint them; any other material keeps its own colour.
03
Set up the parts for the explode and the chapters
Every mesh in the file is one part. Four custom properties on a part (in Blender: Object Properties, Custom Properties) control it; the glTF exporter writes them when Include, Custom Properties is ticked. A property can sit on the mesh or on its parent, so a group under one empty can share one set.
explode_dir: three numbers, the direction the part travels, for example 1, 0, 0 for straight right. explode_dist: how far, in metres (0.08 is 8 cm). explode_order: 1 to 5; lower numbers leave first.
feature: one of sound, comfort, battery, control, fold. The five middle chapters light up the parts with these features in that order: chapter 02 sound, 03 comfort, 04 battery, 05 control, 06 fold. In chapter 04 the amber colour floods out of the battery part, so give that feature to the part you want the colour to come from.
A part without properties still works: it moves straight out from the centre by 8 cm. On phones the engine lays the parts out down the screen instead of using your directions; nothing to set up.
04
Write the chapters and the ending
Select Chapter Stage. The Chapters list holds seven items, one per chapter. Each has a Word (the giant word behind the model), a Label, a Title, a Figure, a line of Text, a Demo figure switch, and a Tone: Night or Signal (amber). Keep seven items: chapter 01 is the turn and explode, 02 to 06 are the five features, 07 is the ending.
Demo figure adds the line Demo figure, replace with yours to a card. Turn it off once the figure is real.
The ending: Wordmark, Ending line, Button and Button link set the lockup the model turns into. The Finishes list (up to four) gives each swatch a name and a colour for each material: Shell, Fabric, Metal, Dark parts and Accent part.
The readout counts down while the visitor scrolls: Readout label, Demo dB start, Demo dB end and Readout unit. Switch Readout off if your product has no such number.
05
Replace the opening and the stills
Opening word: the giant QUIET in the hero is two text layers, Opening word (solid, behind the product) and Opening word veil (the translucent copy in front). Change both, with the same word.
Hero still: Home, Layers, Hero still. In the right panel, Fill, click the image and choose yours. Use a square transparent WebP of about 1600 px, so the amber shows through. Write the Alt text in the same popover.
Chapter Stage also has two stills: Still, assembled and Still, exploded. They show before the 3D starts, for visitors who ask for reduced motion, and on browsers without WebGL. Use transparent renders of your model at the same angle as its first frame, so the change from image to 3D is invisible.
Other pictures: the front view and the exploded view on /specs (the exploded view carries the balloons and the Leader lines layer, drawn for the demo model: move them or delete them), and the Cover of each post in the Updates collection.
06
Colours, type and the figure strip
Colours: Assets tab, Styles, Color. The site is painted with these styles; Signal is the amber, Chapter is the night colour, Page the warm paper. Chapter Stage and Phone Menu are code components and cannot read colour styles, so they have their own colour controls (Night, Signal and the text colours): change them to match.
Type: Assets tab, Styles, Text. Thirteen text styles on Mona Sans (with its width axis) and IBM Plex Mono for labels carry all the type. Chapter Stage has Word font, Card font and Label font controls, and Phone Menu one Font control.
Figure strip on Home: each number is a Count Up component; set its value and suffix in the right panel. The small label next to each number ends in · demo; remove that once the figures are yours.
07
Performance and fallbacks
Load 3D: On first scroll (the default) downloads the model and the engine only when the visitor starts scrolling, so the first screen stays light. Immediately loads them with the page.
Software WebGL: computers without a graphics card (remote desktops, some virtual machines) run WebGL in software. Run at a lower pixel ratio keeps the 3D; Show the stills instead swaps in the two stills.
Max pixel ratio: sharpness on high-density screens, 1.5 by default. Higher is sharper and slower. Glass blur: the frosted cards blur only for a mouse and a hardware GPU by default, because blur is slow on phones.
Reduced motion: visitors who ask their system for less motion get the stills instead of the 3D. Canvas chapter only sets which chapter the editor canvas shows. Track layer names the tall section that drives the animation; leave it unless you rename Track. Keep Debug off.
08
Connect the reserve form
The form on /reserve is a demo drawn as an order slip with three variants: Form, Error and Sent. Its button only switches to Sent; nothing is sent or stored.
1. Open /reserve, Layers, select Reserve Form and note where it sits. Delete it.
2. Insert (the plus at the top left), Forms, the first tile. Framer adds a native form with fields and a submit button.
3. With the form selected, find Send to in the right panel and add your destination: email, a webhook, Google Sheets or one of the listed services. Set Redirect to a page, or leave it empty to show the form’s message.
4. To keep the slip look: inputs with no fill, a 1 px Ink border and square corners, labels in the Label style, and the submit button’s Error state styled like the Error variant. The slip head (order, batch, ship date) and the pairs bar are demo figures: edit or remove them.
5. Preview, send one test entry and check that it arrived. Then remove the two lines that say nothing is sent. Your plan’s monthly submission limit is listed on framer.com/pricing.
09
Selling: checkout and payment links
The template contains no checkout, no payment link and no third-party sales link. Every Reserve button leads to /reserve.
To sell or take deposits, point the buttons at your checkout (Shopify, Stripe Payment Links, Polar, Lemon Squeezy or any other) or keep /reserve as a waiting list. The buttons are instances of the Button component, each with its own Link: the menu (Site template), the ending of Chapter Stage (its Button link control), the amber bands at the end of /specs, /updates and each post, the band on /reserve and the 404 page.
10
The CMS: Updates and FAQ
Open the CMS (Canvas menu at the top left, then CMS). Updates holds the posts, FAQ the questions on Home. Click a row to edit, the plus to add one, Status to keep a draft off the live site.
Dates: the demo dates are labelled Demo date in the list on /updates and · Demo date on the post page. Both labels are plain text in the page, not in the CMS: delete them once your dates are real.
Post page title: Pages tab, open /updates, right-click the inner Updates page, Settings. The title and description use the post’s fields, so each post gets its own.
Long posts: the body uses Article Heading for its headings and Body for paragraphs, on a reading measure of about 68 characters. Images you add to a post body take the full column width.
11
The phone menu
On phones the menu becomes a Menu button that opens a full-screen list. It is a code component called Phone Menu in the Site template’s phone layout. Its Links list holds each label and its path, for example /specs or /#faq. Add or remove items there when you add pages.
12 · Before launch
Every demo line, in one table.
Work down the table once your content is ready. Each line names what to change and where it sits.
Home
Label, headline and intro
QUIET, two layers
Figures with Demo figure on
Label and the two dB values
Numbers and their · demo labels
List and its · demo eyebrow
Questions and answers (CMS)
/specs
View labels, dimensions, scale
All eight cells, the Demo cell last
Eight rows, balloons and leader lines
24 values, six · demo headings
/reserve
Order, batch, ship date
140 of 200 reserved
Wiring (section 08), note, Sent copy
/updates and posts
The sentence that calls the posts demo
Demo date labels, list and post
The five demo posts (CMS)
Fig. 1 · demo render caption
Site and settings
The fictional-brand line
Title, description, social image, favicon
Title and description
Button links, if you sell (section 09)
13 · Last step
Then delete this page.
Pages tab, right-click /guide, Delete. Then open the Site template and remove Guide from the footer links. Publish.