START WITH YOUR PROPERTY
Make it yours before you change the light.
01 · Choose the site
For one property, edit Home’s Sun Stage, the shared Sun Plate and Sun Clock. For a small catalogue, edit the Properties collection; each record powers its own detail page. The home page is a separately authored feature, so update it when you change the featured property.
02 · Add the essentials
Give each property a title, location, guide price and concise specification rows: LABEL|VALUE, one per line. Add your own floor-plan image. With no uploaded plan the site shows an illustrative daylight study, not a surveyed plan. Keep headings to two or three short lines.
03 · Supply the photographs
Supply six matched photographs: 06 Dawn, 09 Morning, 12 Noon, 16 Afternoon, 19 Dusk and 00 Midnight. Keep the camera, crop and building geometry fixed across the set. The included demonstration frames are already aligned. Replacement images use your own crop and nudge controls; do not reuse the demo calibration. Missing images hold a supplied frame, so supply all six for a distinct full-day tour. Room images are optional and empty slots are hidden.
04 · Connect the enquiry
Select Property Enquiry on Contact. Add your email and, optionally, phone number. Email opens the visitor’s mail application with the selected property and page link included. There is no built-in inbox or form backend. An empty email keeps the demonstration notice. Test the resulting email draft without sending it.
05 · Check before publishing
Replace both demonstration records, their illustrative figures and shared imagery. Check Home and every CMS detail at phone, tablet and desktop sizes; inspect all six views and both directions of navigation. Confirm titles, prices, units, links, empty catalogue, actual photo rights, page metadata and enquiry destination. The lighting readings are illustrative art direction, not a location/date solar assessment.
06 · Keep time and surfaces together
The section order is House → 06 Dawn; Orientation → 09 Morning; Plan → 12 Noon; Day → 16 Afternoon; Rooms → 19 Dusk; Specification → 00 Midnight. Sun Stage has one Hour control per section; 24 means midnight at the end of the day. The tour uses these authored hours even when a standalone clock uses Live. Choosing a photograph or a dial tick temporarily changes the hour; entering another section restores its assigned hour. In Sun Clock, Bar opacity and Frost now control the header, footer and sundial together. The dial’s Arc, Readings, Density and Opens on controls remain editable.
A property template with a light system instead of a colour scheme.
Every colour is derived from one number: the time of day. You art-direct four colours and the physics derives the rest. There is no palette to keep consistent by hand and no dark mode to maintain separately — night is just a low sun.
THE ONE NUMBER
The hour, 06 to 22. Every token, every shadow and every contrast decision comes off it.
THE FOUR YOU SET
Ground Day, Ground Night, Sun Low, Sun High. Colour styles, so you edit them once.
THE BEARING
Which way the façade faces. It decides when the building is in sun, and the site says so out loud.
One frame. It does not scroll. The content changes inside it.
Scrolling steps through the six views and then carries on to the next page; scrolling back walks it in reverse. The photograph, the header, the readout and the footer never move. On a phone the readout collapses to a square badge under the wordmark that morphs open when tapped.
01 THE HOUSE
06:00 · the title, standing on the photograph
02 ORIENTATION
09:00 · the three figures the building is derived from
03 THE PLAN
12:00 · a plan is a noon drawing
04 THE DAY
16:00 · the six hours side by side
05 THE ROOMS
17:00 · the other cameras
06 SPECIFICATION
19:00 · the rest of it, in numbers
Everything supporting the type sits above it.
The headline lands on the same line in every view, because its distance from the foot of the frame is its own height and nothing else. Put a card below the type and that card’s height starts deciding where the type sits, which is what makes the eye hunt for the line it was reading.
MEASURED
Check every section at each breakpoint after changing its content.
WHY NOT A FIXED GAP
A constant gap only makes the empty space consistent. The position has to be the constant.
The bearing is a field, so every listing gets its own day.
Add a property to the Properties collection and it gets a page. Because the bearing is a collection field rather than a constant, a north-facing house genuinely has a different day: at 06:00 a south-west façade reads IN SHADOW while a north one reads DIRECT SUN, and every derived token follows.
Properties
The collection. One item is one listing.
/properties
The index. A collection list, two columns.
/property/:Properties
The detail page — the same frame, bound to one item.
THE SIX HOURS
Per property. Until a house has its own shoot they can share one set.
THE SINGLE PAGE
The home page is still a single-property showcase. Both ways work.
Two routes in. You will almost always want the first.
Give a layer one of the colour styles in the ordinary Framer picker and it relights with the sun — no naming convention, no code. Framer compiles every colour style to a custom property and Sun Clock writes the derived value straight into it. The second route is for things a colour alone cannot express.
USE A COLOUR STYLE
Ink, Surface, Accent and the rest. It follows the light on its own.
OR NAME THE LAYER
Append ink, ink-muted, ink-faint, accent, bg-base, bg-surface or rule to a layer name.
cast
Type standing on the photograph: white, with a shadow along the sun vector.
card
A frosted pane: background, radius, blur and hairline in one word.
casts
Anything that should take the building shadow — same direction, same softness.
One material for every surface, moved by four numbers.
The header, the footer, the readout, the cards and the room slots are the same frosted pane. Radius, Frost, Card opacity and Bar opacity on Sun Clock move all of them together, so the chrome can never drift away from the content.
Radius
Real squircles where the browser has corner-shape, a plain radius elsewhere.
Frost
Backdrop blur behind every pane.
Card opacity
How much ground the content panes carry.
Bar opacity
The chrome needs more than a card: its text must stay legible over any photograph.
Bar inset
How far the header and footer float off the edges.
Four techniques, chosen by what is moving.
Display type gets the real morph — blurred through an alpha threshold so glyphs fuse and split. Small labels slide behind a mask, which is transform-only and costs nothing. Cards and tables blur without the threshold, because a threshold at that size is mush. The photograph is different again: it arrives through a radial mask that opens FROM WHERE THE SUN IS, and the origin travels as the sun climbs.
THRESHOLD
Display type. Blur on MagicUI’s curve, then an alpha threshold.
MASK SLIDE
Small labels. Transform only, so the compositor owns it.
BLUR
Cards and tables. The same curve without the threshold pass.
THE PHOTOGRAPH
A radial mask opening from the sun’s own position on its arc.
ONE CURVE
cubic-bezier(.16, 1, .3, 1) for every hover and every transition.
One unit, and everything stays in proportion at every viewport.
Sizes are multiples of a single length that equals one pixel at 1440 by 900 and scales with the window. It takes the SMALLER of the width and height constraints, so an ultrawide window with no extra vertical room does not push type off the bottom of a frame that cannot scroll.
2160
Type scale 1. Readout full. Generous margins.
1440
The reference frame. Everything else is measured against it.
1200
Type scale 0.94. Tighter bars.
810
Panel readout, tighter margins.
390
Structural: content full width, the readout becomes a badge, the footer keeps numbers.
Three faces, three jobs. All from Framer’s own library.
Display carries the one statement a view is allowed and is the only place the site raises its voice. Text is a neutral grotesk that gets out of the way, because the photograph is the subject. Data is monospaced because it IS data. Library fonts are a constraint of the product, not a compromise: a commercial foundry font cannot legally be redistributed inside a template other people buy.
Mazius Display
The headline, and only the headline.
Switzer
Chrome, cards, body.
IBM Plex Mono
Readout, labels, figures. Tabular, so numbers do not shift.
Six frames of one building, and only the light may change.
This is the one thing the template cannot do for you. Shoot or generate a single master frame, then relight it from that same master — never from a fresh prompt, and never from an edit of an edit. If a window moves or the camera shifts the idea comes apart, because the site states the sun’s position out loud and the picture has to agree.
06 · DAWN
Façade in shadow, interiors lit. Match the photograph; Sun side reverses the UI cast for a correctly oriented reshoot.
09 · MORNING
Open shade. Cool, even, no direct sun on the concrete.
12 · NOON
Direct sun, short black shadows, the hardest light of the day.
16 · AFTERNOON
The master frame. Raking light across the façade.
19 · DUSK
Grazing light, long shadows, interiors coming on. Keep the cast consistent with the photograph and the chosen Sun side.
00 · MIDNIGHT
Optional. Without it the page still goes dark; only the picture holds at dusk.
NUDGE
A percentage, not pixels. Measured, not eyeballed. Re-measure after any reshoot.