Template guide
Make Slate yours
What to change on each page, how the JSON collections connect and how to set up The Cut. About two hours from unzip to your own site.
Start here
- Serve the folder over HTTP — content loads with fetch, so don’t open the files from file://. From the folder:
python3 -m http.server 8011then openhttp://localhost:8011/. - Change the colour and text tokens first in
css/slate.css(--c-ink,--c-paper,--c-tally; the scale from--fs-megato--fs-label). Every page uses them. - Replace the logo text “Northcut” in the header and footer of each page.
- Edit your films in
data/projects.json. The home page, the work page and the reel update themselves.
Home, section by section
| Section | What to change |
|---|---|
| Hero | Reel video (16:9, under 3 MB), lead, two buttons, proof row. The wordmark is the H1. |
| The Cut | Clips and cut points in its props (see below). |
| Clients | Clients collection; the ticker repeats it. |
| Studio | One paragraph and four numbers. |
| Selected work | Projects with “Featured” on; the first six. |
| Services | Services collection. |
| Process | Six steps, each with a week range. |
| Testimonials | Testimonials collection, ordered. |
| Festivals | “Awards” field of each project. |
| Packages | Three plans, two prices each (single / retainer). |
| FAQ | FAQ collection with “Home” on. |
| Journal | Latest three posts. |
| Brief form | The contact <form>; wire it to your own endpoint or mail service. |
CMS collections
Six collections, connected by reference fields: Projects (→ Services, Crew, Testimonials), Services (→ FAQ), Journal (→ Crew), Crew, Testimonials (→ Projects), FAQ, plus Clients. The collections live in data/*.json and are served by js/cms.js; field names are listed in the documentation and in each JSON file.
The Cut (signature)
A dependency-free script (js/cut.js) that turns the hero reel into an edit timeline. Configure it with data-* attributes on [data-cut] (or via window.SLATE_CUT), with the clips in data/reel.json. Options:
enabled— off leaves a plain looping hero video.variant—liveorstatic(a graphic, no playhead).clips— label, project link, in and out points (seconds), thumbnail.fps(24/25/30),rate(speed),snap,keys,autoplay.pageTimecodeandpageRate— the timecode in the header.- Colours: playhead, clip, active clip, waveform, beat ticks.
Cut your reel so each cut lands on a beat of the music (at 120 BPM, every 0.5 s) and the waveform will line up.
Motion
All other motion uses GSAP + ScrollTrigger + Lenis (self-hosted in vendor/) and CSS: scroll-in reveals (fade, 24 px rise, blur), text effects by line, scroll transforms on the hero, sticky process cards, hover states and a “dip to black” on page change. Every call is guarded, so removing vendor/ leaves a working site with no errors. With reduced motion on, all of it is switched off.
Spanish version
Slate is bilingual with no duplicate pages: Spanish lives in data-es attributes on the same markup and is applied by js/i18n.js. Switch with the EN/ES links in the header, or add ?lang=es to any page. To translate, edit the data-es attribute next to each piece of text.
Changelog
- 1.0.0 — 6 Oct 2026. First release: 16 pages, 7 JSON collections, The Cut.