Template guide
Every section: its text, then its animation.
Work through the page from top to bottom. For each section you will find which layers hold the text, followed by the animation applied to it.
01
Hero
Text
Headline: the lines “Grown” and “Built to stay.” are text layers; the outlined word “slow.” is the OutlineWord component (change its Text in the properties panel).
Paragraph and button: edit the paragraph layer; edit the button Label and Link on the Button instance.
Animation
Background photo wipes in with a ring mask (1.2s, scale 1.2 → 1) and drifts with inner parallax.
Headline lines rise out of a mask one by one on load; “slow.” fills with oak colour as you scroll.
Paragraph and button fade up after the headline (0.5s and 0.7s delay).
02
The numbers on the ring
Text
Heading and the four captions are text layers.
Each figure is a CountUp component: set Value, Prefix, Suffix and Duration in the properties panel.
Animation
Figures count up from zero when they enter the viewport.
The growth-ring line (RingLine component) draws itself with scroll and drops a ring marker at each figure.
Background photo reveals with the ring mask and parallax; heading reveals line by line.
03
Collections
Text
Four chapters, each with a photo, a title (Living, Dining, Bedroom, Workspace) and a View button.
To add a chapter, duplicate a chapter frame and swap the photo inside its “Parallax Image” layer.
Animation
Chapters are sticky, so every chapter slides over the previous one as you scroll.
Photos use the ring-mask wipe and inner parallax; titles rise out of a mask line by line.
04
Selected Specimens
Text
Heading, subtitle and the scroll hint are text layers.
Five specimen cards: image, name, wood, price. Duplicate a card to add more; the strip scrolls sideways.
Animation
Photos wipe in with the ring mask; every second card is delayed by 0.18s so they stagger.
Captions fade up; the strip uses native horizontal scrolling (scrollbar hidden).
05
Craft
Text
Heading and the three statements are text layers.
Swap the photo inside the “Parallax Image” layer of the Hands Photo frame.
Animation
The photo expands from a circle to full bleed as the section scrolls into view.
Statements fade up one after another (0.15s steps).
The wood ring ornament moves at its own parallax speed and sways gently.
06
Showroom
Text
Heading, address line, Book a visit button and three room names.
Four photos: the main plate and three vignettes.
Animation
Plate photo and vignette photos use the ring-mask wipe with inner parallax.
Heading and room names rise out of a mask line by line; the button fades up.
07
Voices & Journal
Text
Heading, archive label, three posts (label + title) and the customer quote with its author.
Add a post by duplicating a post frame.
Animation
Post photos wipe in with the ring mask (alternating delay); labels and titles fade up.
The quote reveals line by line over a darkened photo.
08
Final call and footer
Text
Headline “Sit. Stay.”, paragraph, button, the city strip and the footer columns.
The footer lives in the Main Layout template, so it updates on every page.
Animation
Headline reveals line by line; the paragraph and button fade up.
Two wood-shaving ornaments move at different parallax speeds and sway.
Footer columns fade up in sequence. Above them a marquee ticker scrolls; below, live gallery clocks, a giant wordmark and a back-to-top ring button.
+
Header, buttons and scroll
Text
Header links point to the section ids on the home page; edit them in the Header component.
Button instances expose Label, Link and a Dark / Light / Oak variant.
Animation
The header is sticky and frosted, with a split layout: numbered links either side of a growth-ring mark, and a thin oak line that grows as you scroll. Links roll up to an oak copy while an underline draws in (the Roll Link component, also used in the footer). On Tablet and Phone the menu button toggles the drawer and the two bars turn into a cross.
Buttons on hover: the wood grain shifts, a dovetail notch slides in, an oak bar draws along the bottom edge and a light streak sweeps across. Collection discs tilt and turn oak.
Smooth inertia scrolling comes from the SmoothScroll component placed once at the top of the page. It switches itself off for reduced-motion users and touch devices.
Good to know
Fonts: Playfair Display (headlines) and DM Sans (text), both from the Framer font library.
Colours: Cream, Sand, Ink, Walnut, Bark, Muted, Line, Oak and Oak Deep, all colour styles. Change a style once to retheme the page.
Text styles: Display XL, Display Numeral, Heading 2/3/4, Body Large, Body, Label, Button, Nav and Price. They change size at Tablet and Phone automatically.
Images are free Unsplash photos used as placeholders. Replace them with your own and update the Licenses page.
Motion respects the visitor’s reduced-motion setting. The only external script is the Lenis smooth-scroll library loaded from the jsDelivr CDN by the SmoothScroll component.
Slow-seasoned hardwood specimens and monumental heirloom joinery, crafted over generations in unhurried communion with ancient forests.
Archive
Sanctuary
Slow seasoning gazette
Quarterly monographs on raw timber sourcing, hand chisel joinery, and architectural installations.
Your architectural correspondence
Join