(00) — Setup guide
8 steps — v1.0
Everything you need to make this template yours: brand, projects, the Shutter Hero, ready-made Framer AI prompts and a checklist to run before you publish. Delete this page before launch.
(01)
Make it yours
Logo
Open the Nav and Footer components in the left panel and replace the "Apse" wordmark with your own text or SVG logo. Both update on every page.
Colours
Go to Assets, then Colors, and edit the Apse styles. Change Accent (and Accent Text, Hover and Pressed) to your brand colour and Wash to a deep version of it. Every page follows. The Shutter Hero, Apse Motion and Phone Menu have their own colour fields in the right panel: set them to the same values.
Fonts
Go to Assets, then Text Styles. Swap Fraunces, Geist or Geist Mono in the Display, Body and Label styles. All three are Google Fonts under the SIL Open Font License. Sizes and spacing stay as they are.
(02)
Add a project
Open the CMS tab, choose Projects and click New item. The home page, the index and the project page all read from this one collection.
Title, slug
The project name. The slug is made from it and becomes the page address, for example /projects/casa-umbral.
Category
Architecture, Interiors, Landscape or Restoration. It shows as the label on each project card and at the top of the project page.
Facts
Location, year, area and client type fill the facts table at the top of each project page.
Summary, body
One or two sentences for cards and search results, then the full story in rich text.
Cover, gallery
A landscape cover at 2400px wide, plus up to three gallery images. Warm, low-key photographs suit the palette best.
Featured, order
Turn Featured on to show the project in Selected work on the home page. Order sets its position, lowest first.
(03)
The Shutter Hero
Select the ShutterHero layer on the Home page. Every setting lives in the right panel, so you never need to open the code.
Video, poster
Upload an MP4 under 8 MB, 10 to 20 seconds, no sound. Add a poster image from the first frame so the page looks finished before the video loads.
Scroll length
How many screen heights the scrub lasts. 2.2 is the default. Lower it for a quicker reveal, raise it to slow the video down.
Letterbox ratio
The shape the bars close to as you scroll. 2.39 is cinema scope; try 1.85 for a softer frame.
Reduced motion
Visitors who turn on reduced motion see the poster and the title with no scrubbing. Nothing to set up; just make sure the poster is a strong image.
(04)
Motion and interactions
One layer runs every effect on the site, so you switch things on and off in one place.
Apse Motion
The Apse Motion layer lives inside the Nav component. Select Nav, then Apse Motion, and every effect has its own toggle in the right panel.
Toggles
Scroll reveals, image zoom, link underline, row hover, cursor and its label text, magnetic pills, page shutter and scroll line. Turn off any one you do not want.
Reduced motion
The layer switches itself off for visitors who prefer reduced motion. On touch devices the cursor and the magnetic effect stay off.
Hover images
Add a layer named Preview inside any list row. It becomes a floating image that follows the pointer while the row is hovered.
Phone menu
The phone menu is the Phone Menu component in the Nav's Phone variant. Edit its labels and paths there.
(05)
Framer AI prompts
Paste these into Framer AI and replace the words in square brackets. Check each change before you publish.
Prompt 01 — Rebrand
Rebrand Apse to my studio: replace the name Apse with [NAME], set the accent colour to [HEX], and update the footer contact details.
Prompt 02 — Add a project
Add a new project to the Projects CMS called [TITLE] in [CITY], [YEAR], category [CATEGORY], with this summary: [SUMMARY].
Prompt 03 — Launch check
Run a launch check: list any page without a title or description, any link that goes nowhere, and any text that still says Apse or example.com.
(06)
Launch checklist
Every page has its own title and description in Page Settings.
Favicon and social share image are your own, in Site Settings.
The contact form sends to your inbox, and the email and phone are yours.
Sample projects, journal posts and team members are replaced or deleted.
Tablet and phone breakpoints checked in the preview.
This guide and the style guide are hidden or deleted.
(07)
Changelog
v1.0 — November 2026
First release.
(08)
Support
Replies within two working days.
Write to support
→