KQ-1894 · SLATE/COURSES

Slate Courses

A roof, face on, that a roofer slates as the page scrolls: slates fly in from above and toward you and lay themselves in courses from the eaves up, each course lapping the head of the one below and breaking joint by half a slate, working left to right on one course and back on the next, so a picture with a headline painted across it reads only once the courses are on. A slate's travel glides in on the glide spring and its scale lands on recoil, a small settle with a clack when sound is on; when the last course is laid a slow sheen crosses the roof, and scrolling back lifts the slates off top course first on exit tweens. Down, Page Down and Space lay the next course, Up and Page Up lift the top one, and Home and End lift all or lay all.

KQ-1894 · SLATE/COURSES

Fieldline · Barn conversions in the Coldbrook valley

Three barns, one long view. Scroll down and we will put the roof on.

Each barn sleeps four. Slate from the old quarry at Basin Head, laid by hand, and a fire in every room.

2 of 7 courses laid · keep scrolling

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/slate-courses

Props

headline: string; default "Fieldline Farm Stays"; The words painted across the roof; also the heading assistive technology reads.
as: "h1" | "h2" | "h3"; default "h2"; The element that carries the headline for assistive technology.
src: string; default —; The picture the slates are cut from; defaults to a drawn farm valley at evening.
alt: string; default a description of the drawn valley; What the picture shows, for assistive technology.
courses: number; default 7; How many courses the roof has, 4 (a few big slates) to 10 (many small ones).
overlap: number; default 0.4; How much of each slate the course above covers, 0.2 (a long exposed tail) to 0.6 (a deep lap).
stagger: number; default 0.5; How far apart the slates of a course land, 0 (together) to 1 (one by one across).
cut: "square" | "round" | "point"; default "square"; The shape of each slate's tail.
startCourses: number; default 2; How many courses are on before any scroll, 0 to 3.
paint: string; default "oklch(0.97 0.01 90)"; The colour of the sign paint, a concrete CSS colour (the paint is an image, so not a var).
range: number; default 900; Scroll distance for the whole roof, px.
height: number; default 520; Height of the pinned stage, px; give it the height of the scroll container it sits in.
sound: boolean; default false; Play a clack as each slate lands.
onCoursesChange: (laid: number) => void; default —; Fires with the number of whole courses laid, from the scroll or key that changed it.
onProgressChange: (progress: number) => void; default —; Fires as the roof is laid, 0 to 1.
className: string; default —; Classes for the section.

Prop	Type	Default	Description
headline	string	"Fieldline Farm Stays"	The words painted across the roof; also the heading assistive technology reads.
as	"h1" \| "h2" \| "h3"	"h2"	The element that carries the headline for assistive technology.
src	string	—	The picture the slates are cut from; defaults to a drawn farm valley at evening.
alt	string	a description of the drawn valley	What the picture shows, for assistive technology.
courses	number	7	How many courses the roof has, 4 (a few big slates) to 10 (many small ones).
overlap	number	0.4	How much of each slate the course above covers, 0.2 (a long exposed tail) to 0.6 (a deep lap).
stagger	number	0.5	How far apart the slates of a course land, 0 (together) to 1 (one by one across).
cut	"square" \| "round" \| "point"	"square"	The shape of each slate's tail.
startCourses	number	2	How many courses are on before any scroll, 0 to 3.
paint	string	"oklch(0.97 0.01 90)"	The colour of the sign paint, a concrete CSS colour (the paint is an image, so not a var).
range	number	900	Scroll distance for the whole roof, px.
height	number	520	Height of the pinned stage, px; give it the height of the scroll container it sits in.
sound	boolean	false	Play a clack as each slate lands.
onCoursesChange	(laid: number) => void	—	Fires with the number of whole courses laid, from the scroll or key that changed it.
onProgressChange	(progress: number) => void	—	Fires as the roof is laid, 0 to 1.
className	string	—	Classes for the section.

Slate Courses

Fieldline Farm Stays

Install

Props