How to edit
Start here
One rule runs this template: in every section gravity pulls one way, and the photo, the cards and the compass all obey it. The order on the home page is down, left, up, then down again at the end.
Everything below can be changed without code. Colours and type live in the style panels, the work lives in the CMS, and the motion lives in two components and the Gravity Field boxes.
Colours
Five colour styles: Plaster (page), Ink (text and lines), Linen (step cards), Shade (small labels), Sun (spare light surface).
Change a colour once in the style panel and it changes everywhere. Keep Shade dark enough to read on Plaster and Linen.
Type
Ten text styles in two families: Fraunces for the heavy things (Display, Figure, Title, Quote) and Mona Sans at a narrow width for everything else.
Each style already holds its tablet and phone sizes. Edit the style, not the layer. Framer keeps those sizes as extra entries with the same name in the style list; do not delete them.
Work and gravity
Your projects live in the CMS collection Work: Title, Client type, Year, Cover, Cover square, Summary and Gravity.
Gravity (Down, Left or Up) sets the compass on that project’s page. On the home page the cards always fall to the left, because that section’s rule is left.
Write an alt text for every cover when you add the image.
Room photos
The room photos are set dressing that comes with the template. Each sits in the Room photo component, which leans toward the section’s gravity as it scrolls into view: Left and Left pulled, Up and Up pulled.
To use your own, select a Room photo on the home page and replace Photo in the panel. Keep one photo per section, shot in the same room.
To remove them, delete the Room photo layers on the home page. The cards and the compass still carry the rule on a plain background.
Make your own room
Shoot or generate one normal room first, then make each direction from that same frame.
Change only the direction of gravity for light, hanging objects; keep walls, window and camera upright and identical.
Check every frame at full size before you use it: nothing drips or hangs the wrong way, no text or logos, and the same window in every version.
Gravity fields
Each box of loose words is a Gravity Field. Select one and change it in the panel on the right; no code needed.
Words: the loose words. From and To: the wall gravity pulls toward before and after the turn. Switch at: how high the middle of the box must rise on the screen before gravity turns (0.57 is 57% of the screen height). Start: Piled, Scattered or Falling in. Gravity and Bounce: how hard the words fall and how much they bounce. Throwable: visitors can grab a word and throw it. Keep each box to about ten short words so they still fit on a phone.
Motion
Four moves, one rule. Loose words in the boxes fall, pile up and slide to whichever wall gravity points at. Cards fall when their row scrolls into view. Room photos lean toward the section’s gravity, like the cards. The compass turns as you pass each section.
Reduced motion is respected: the boxes show their words resting against the wall, the cards and room photos keep still. To calm the page further, remove the scroll effect from the Work card and Room photo instances.
Images and type
The demo photos are AI-generated sample images made for this template; the rooms, projects and people they suggest are invented. Replace them with your own before you publish.
Type is Fraunces and Mona Sans, both from Framer’s font library under the SIL Open Font License 1.1.
Make each new photo the same way as the old one: one room, gravity in one direction, no text or logos in the picture.
Before you publish
In Site Settings, change the site title, description, social image and favicon. Replace the studio name, the email address and the text on the Legal page with your own.
Check every page on the Phone breakpoint in the canvas and keep each Gravity Field to about ten short words. Then publish, and connect your own domain in Site Settings.
Leave How to edit out of your navigation, or delete it once you no longer need it; search engines are already told to skip it.
Version and support
This is Side Gravity 1.0.0.
Support: support@alderthemes.com. Support covers setting up the template and fixing its faults; custom design and development are not included.