Hero
Footer
Amber light drifting over a teal dusk.
Sets / Cinematic
12 Dusk Reel
Out-of-focus city lights after sunset, teal over amber. This page is using it right now: the header above and the footer below.
northfield.studio
NORTHFIELDWork Studio Contact
Spaces shaped by quiet light.
Architecture and interiors for homes that slow you down.
View projectsCasa Lumen
The Orchard House
Harbour Loft
NORTHFIELDMenu
Spaces shaped by quiet light.
Architecture and interiors for homes that slow you down.
Casa Lumen
Scroll inside the phone to reach the footer. Mobile uses its own 9:16 and 4:5 compositions.
Technical details
| File | Resolution | Ratio | WebM | MP4 |
|---|---|---|---|---|
| Hero · desktop | 2560 × 1440 | 16:9 | 237 KB | 991 KB |
| Hero · mobile | 1080 × 1920 | 9:16 | 180 KB | 613 KB |
| Footer · desktop | 2560 × 854 | 3:1 | 166 KB | 630 KB |
| Footer · mobile | 1080 × 1350 | 4:5 | 148 KB | 471 KB |
- Length
- 10 s seamless loop
- Frame rate
- 24 fps
- Audio
- None
- Codecs
- WebM (VP9) + MP4 (H.264)
- Overlay, hero
- 20% recommended (measured min 0%)
- Overlay, footer
- 25% recommended (measured min 0%)
In the package
- hero/ desktop + mobile, .webm + .mp4
- footer/ desktop + mobile, .webm + .mp4
- posters/ first frame of each video, .webp + .jpg
- code/html-css/ matteflux.css, matteflux.js, example.html
- code/framer/ MattefluxBackground.tsx
- code/webflow/ head code, footer code, hero and footer embeds
- README.md setup, overlay values
