How to edit
Where the content lives, how the zoom works and what to check before you publish. This page is hidden from search engines. Set it to draft or delete it before launch.
01
Pages and template
Home, Project (one page per item in Projects, at /work/slug), Index, Studio, Contact, 404, Legal and this guide.
Header, menu and footer live once in the Site layout template. Edit links, the address and the email there and every page follows. Pages with plain text (Index, Studio, Contact, Legal, 404, this guide) switch on the template’s Header Scrim option, a dark fade under the header so text never runs into it.
02
Collections
Projects
Everything on a project page, the first list on the Index and the Next panel. Name, Slug and Order; Syllable (the ×10 word, e.g. LAMP) and Letter (the ×100 letter, e.g. M); Year, Client, Role, Team; Short and Long; Image and Caption ×1, ×10, ×100; Match Box X, Y and Width; Theme; Title Colour and Text Colour; Next Project.
Write the alt text inside each image field. Order sets the number (01, 02…) and the sort. The project page counter reads “Order / 03”: if you add a fourth project, change “ / 03” in the Counter layer of the Project page.
Archive
Projects listed on the Index without a page: Name, Order, Client, Role, Year, Team. To give one a page, create it in Projects with all three pictures and delete it from Archive.
03
The home page keeps its own copy
Framer cannot pass CMS fields into Scale Shift’s slots, so Home is built by hand. When you replace a project, change it in Projects and in these places on Home (layer names in brackets):
Name: Display Title [Lamplit · Name, or Slot · Warmth Name / Slot · Ink Blue Name].
Credit line and counter: Meta and Counter in the same name screen.
×1 picture: Photo in Slot · <Project> ×1 (image, position, alt text).
×1 caption: Caption in the same slot.
×10 picture: Photo in Slot · <Project> ×10 (image, position, alt text).
×10 caption: Caption in the same slot.
Link: Open Project in the ×10 slot points to /work/slug.
Match box: in Scale Shift, After Box X, Y and Width (the same numbers as Match Box in the CMS).
Colours: the name screen and slot fills use the project’s theme tokens.
Lamplit only, the full chain: Slot · Lamplit Syllable ×10 (the word and its Focus layer), Slot · Lamplit ×100 (Photo, alt text, Caption) and Slot · Lamplit Letter ×100 (the letter).
Labels: the small project name in the top lines of these slots.
Slot frames sit on the canvas to the right of the page. Do not delete them or drag them into the page: Scale Shift renders them.
04
Themes and colours
Night, Paper, Signal and Ash are the site shell (header, menu, footer, Index, Studio, Contact, Legal, 404) and also the Warmth theme. Lamplit and Ink Blue have their own tokens: Theme/<Name>/Ground, Title, Text and Muted.
On project pages the backgrounds follow the Theme field through these tokens, and the big name, syllable and letter use the theme’s Title token. Framer cannot compute a text colour from an option, so the small text (counter, credits, labels) reads Text Colour from the CMS and the short line in the credits reads Title Colour. Keep those two fields equal to the theme’s Title and Text tokens.
Lamplit is black and white: its photos have a 100% greyscale filter (on Home in the Photo layers, on project pages computed from Theme). The CMS images themselves are in colour.
A fourth theme needs: one option in Theme, four tokens, three Project styles (Name, Syllable, Letter), one Body style, and one extra layer for the name, syllable (with its Focus layer), letter and long text on the Project page, each shown when Theme equals the new option.
05
Text styles
Display/* is the home page name, fitted to the screen width. Project/* is the project page name, syllable and letter, at fixed sizes per breakpoint. Body/* is the themed long text. The rest (Page Title, Lead, Label, Label Muted, Menu Item, Body, Wordmark) is the shell.
The style panel lists 22 styles in 46 entries. Entries with the same name are the tablet and phone sizes of one style. Do not delete them: the phone sizes would be lost.
On desktop and tablet the project name and the big letter are stretched to the full width by the Fit Width override (FitWidth.tsx), because CMS text cannot use Framer’s auto-fit. On phones they keep the style size.
Bodoni Moda’s hairline serifs meet on the baseline in LAMP. That ruler-like line is intended.
06
Scale Shift, the zoom
Scale Shift (ScaleShift.tsx) pins a screen while you scroll and zooms from Before into After, pulling focus on the way: the picture softens, the swap happens at the softest moment, it sharpens, slips once and locks. With Then set, the finished screen steps back and Then slides over it.
Settings you will change
Before, After, Then: the slot frames to show.
After Box X, Y, Width: where the After picture sits inside Before (see 07). Width 0 switches to a classic zoom with Focus Layer and Scale (used for the type zoom).
Hold, Zoom, Hold After, Pull Back, Hold End: scroll lengths in vh.
Background: the stage colour.
Plain on Phone: below 810 px the parts simply scroll. Pull Back Effect off: the finished screen does not shrink or darken.
Fine-tuning
Crossfade Start and End, Focus Blur, Recover Blur, Hunt Blur, Blur In, Peak Start, Peak End, Recover, Hunt, Lock, Lens Breath, Glow and Edge Feather shape the focus pull. The defaults are tuned; change them in small steps.
Phone values are set separately on the Phone breakpoint (for example Zoom 150, Hold End 25, Focus Blur 10). With reduced motion, and on the canvas, every part is shown one after another without the zoom.
The setting keys inside the code are short internal names. Edit only the titles shown in the panel; renaming a key in the code resets that setting on every instance.
The scale label says ×10 and ×100 as a concept. The real magnification comes from the match box: on a 1440 × 900 screen it is about 5.7× (Lamplit), 5.6× (Warmth) and 9.1× (Ink Blue).
Add ?smooth=0 to the address for recording or measuring: it turns off the smooth scrolling.
07
Measuring the match box
The ×10 picture has to land on the part of the ×1 picture it shows, so the two read as one camera move.
Open the ×1 picture at full size in an image editor.
Draw a square around what the ×10 picture shows (both eyes, the cup and gloves…). The square has the shape of the ×10 picture.
Width = square width ÷ picture width × 100.
X = square centre from the left ÷ picture width × 100. Y = square centre from the top ÷ picture height × 100.
Enter the three numbers in the CMS (Match Box) and, for Home, in Scale Shift (After Box). Publish, scroll slowly and nudge by 0.5 until the features line up.
The box is measured on the picture, not on the screen, so it holds on every screen size and when you change the picture’s position. A new picture needs a new box.
08
Layer names the code reads
Focus: a 2 px layer inside the syllable that marks where the type zoom goes. If you change the syllable or its style, move it by hand.
Caption and Open Project: in Before they fade out as the zoom starts, in After they appear in the last 10%.
Photo: the first picture in a ×1 slot is the one the match box is measured on.
Rename these layers and the effect silently stops (no error).
09
Phone
Every page has Desktop (1200), Tablet (810) and Phone (390) breakpoints. On phones the zoom is shorter, the pull back is off, the type zoom scrolls plainly and the scale label sits bottom right.
10
Before you publish
Replace the demo pictures, names, address and email (hello@kerfatelier.example).
Rewrite the Legal page for your business and country.
Site Settings: title, description, social image, favicon, language.
Set this guide to draft or delete it.
Publish from the top right of Framer and connect your domain.
11
Images and fonts
The demo pictures are AI-generated sample images made for this template. They show a fictional person, and the studio, people, clients and projects are fictional too. Replace them with your own work before you publish.
Bricolage Grotesque: SIL Open Font License 1.1.
Bodoni Moda: SIL Open Font License 1.1.
Mona Sans: SIL Open Font License 1.1.
All three are loaded from Framer’s font library. Check the licence at the source before you use them elsewhere.
12
Version and support
This is Kerf Atelier 1.0.0. If something does not work as this guide describes, write to support@alderthemes.com. Support covers setting up the template and fixing its faults; custom design and development are not included.