—
Template guide
6 notes
—
Template guide
6 notes
How it’s built
01
Projects live in the CMS
Open CMS, then Projects. Each film has a title, number, file name, client, category, cover, clip, credits and two stills. Add an item and it shows on Work, its category page and the Next link.
01
Projects live in the CMS
Open CMS, then Projects. Each film has a title, number, file name, client, category, cover, clip, credits and two stills. Add an item and it shows on Work, its category page and the Next link.
02
Swap the footage
Upload an MP4 to a project’s Clip field and a JPG to its Cover. Keep clips 8 to 15 seconds and under 4 MB. The hero clip and the Reel video sit on Home.
02
Swap the footage
Upload an MP4 to a project’s Clip field and a JPG to its Cover. Keep clips 8 to 15 seconds and under 4 MB. The hero clip and the Reel video sit on Home.
03
The work index
Footage FX on Home, Work and the category pages plays a row’s clip on hover, dims the other rows and opens the player on click. Its controls set the cursor label, dim level, colours and the reel file.
03
The work index
Footage FX on Home, Work and the category pages plays a row’s clip on hover, dims the other rows and opens the player on click. Its controls set the cursor label, dim level, colours and the reel file.
04
The project player
Player Controls sits over the film on each project page: the Play toggle, timecode and progress bar. Fade lists the layers that clear while the film plays.
04
The project player
Player Controls sits over the film on each project page: the Play toggle, timecode and progress bar. Fade lists the layers that clear while the film plays.
05
The booking form
The form on Contact is a native Framer form. Send it to your email or a webhook in the form settings. The chips are radio buttons named Type.
05
The booking form
The form on Contact is a native Framer form. Send it to your email or a webhook in the form settings. The chips are radio buttons named Type.
06
Grid, colours and type
The 4 grid lines are one fixed layer in the Main template. Every colour is a token (Bg, Ink, Mute, Accent) and every text uses a style, so one change updates the site.
06
Grid, colours and type
The 4 grid lines are one fixed layer in the Main template. Every colour is a token (Bg, Ink, Mute, Accent) and every text uses a style, so one change updates the site.