Template help
What to change in each section, the CMS collections and their fields, the motion system and the Floor Lines component. Read this before you start.
Your site in two hours
- Change the name, colours and font in Assets → Colors and Text Styles. The whole site uses those styles.
- Edit the Specialties and Doctors collections: every line’s colour and number come from there.
- Replace the hero photo and adjust vanish in Floor Lines so the lines sit on your floor, or switch them off.
- Swap ten photos: specialties and portraits. Keep each frame’s ratio.
- Rewrite the home copy and connect the form and the booking to your inbox or tool.
What to change in each section
Hero
Photo, headline, two buttons and the rating. The floor lines are the Floor Lines component: switch it off or change its data in its props.
Line bar
A Collection List of Specialties. Hovering a chip lights its line in the photo.
Insurers ticker
Native Ticker with the Insurers collection.
Intro and numbers
Text with the line-by-line effect, one photo and four numbers. Edit them on the canvas.
Specialties, doctors, reviews, journal
Collection Lists. Change the content in the CMS; the cards take the line colour from the Specialty reference.
Corridor, building, departures board
Optional code components. Delete the section if you don’t want it; nothing else depends on it.
Plans and FAQ
Plans and FAQs collections. The Individual / Family toggle is a native variant.
Call-back form and footer
Native form: set where it sends in the form settings. The footer is one component on every page.
CMS collections
Seven collections. Each cms/*.json file is one collection; these tables are generated from those files.
Motion system
One curve, cubic-bezier(.2,.7,.1,1), across the whole site. Everything is plain CSS/JS.
| Effect | What it does | Duration |
|---|---|---|
| Appear | opacity 0 → 1, y 24 → 0, blur 6 → 0 | 0.7 s |
| Headings | line by line, y 105% → 0 | 0.8 s, 0.06 s per line |
| Images | mask from the bottom, scale 1.08 → 1 | 0.9 s |
| Sticky | Visit steps, building, corridor | — |
| Hover | cards lift the line bar, images scale 1.04 | 0.4 s |
| Page | wipe in the colour of the line you clicked | 0.55 s + 0.75 s |
| Reduced motion | everything visible, no wipe, lines static | — |
Floor Lines
The signature piece: the lines painted on the floor of the hero photo. It is one code component with these props. Switch it off and the template works the same.
| Prop | Default | What it does |
|---|---|---|
enabled | true | Switch the lines off. The photo stays; nothing else changes. |
variant | "live" | "live" draws the lines in and lets them flow on hover; "static" paints them at once. |
lines | Specialties collection | Array of { slug, number, colour }. One painted line per item, in order. |
vanish | 750, 520 | Vanishing point in the photo (viewBox 1600 × 1067). |
far / near | 745 / 1067 | Where the paint ends (far wall) and starts (bottom edge). |
centre, step, width | 963, 50, 34 | Bundle position and spacing at the bottom edge. |
focus | 0.62, 1 | Which part of the photo to keep when the card crops it. |
Changelog
- 2.0 26 Sep 2026. Photo hero with floor lines, 17 page templates, 7 collections, motion system, call-back form, brand footer.
- 1.0 25 Sep 2026. First version.