Matteflux

Two collections · 9 sets

Ambient motion for heroes & footers.

Matching video backgrounds for the top and the bottom of your site. Design, code and seamless loops included. Paste one in and it plays in minutes.

Browse sets Star on GitHub
Now playing: Ember Aurora. Change it below Code-generated motion

Try it live

Pick a set. Watch this page change.

Every set is a hero and a footer from the same family. Choose one and the top of this page, the footer at the bottom and the preview beside you all switch to it.

Preview
20%

Recommended for Ember Aurora: hero 20%, footer 35%. Measured for white text at 4.5:1 contrast.

NORTHFIELDMenu

Spaces shaped by quiet light.

Architecture and interiors for homes that slow you down.

Casa Lumen

Let’s build something calm.

hello@northfield.studio

Scroll inside the phone to reach the footer. Mobile uses its own 9:16 and 4:5 compositions.

From download to live in three steps.

Read the setup guides
  1. 1

    Pick a set

    Choose a hero and footer pair that fits your site's mood. Preview both on desktop and mobile right here.

  2. 2

    Download

    One ZIP: desktop and mobile videos in MP4 and WebM, poster images, ready-made code and a README with overlay values.

  3. 3

    Paste the code

    Drop the snippet into HTML, Framer or Webflow. Poster first, lazy loading and reduced-motion support are already wired in.

code/html-css/example.htmlHTML
<section class="mf-section mf-section--hero">
  <div class="mf-bg" style="--mf-overlay: 0.2">
    <picture class="mf-bg__poster"> … </picture>
    <video class="mf-bg__video" muted loop playsinline preload="none"
           data-mf-load="eager"
           data-mf-desktop="hero/ember-aurora-hero-desktop"
           data-mf-mobile="hero/ember-aurora-hero-mobile"></video>
    <div class="mf-bg__overlay"></div>
  </div>
  <h1>Your headline</h1>
</section>

Collection 01 — Dark Ambient

Hero above, footer below. Always a pair.

View all sets

Collection 02 — Earthen

Warm earth. Rich metal. Deep forest.

View all sets

Why Matteflux

Code-generated motion.

Every frame is rendered from wave fields and code. That is what makes the loops exact, the files small and the edges clean.

Seamless loops

The last frame flows into the first by design. No jump, no crossfade.

Small files

Soft, slow motion compresses well. The Ember Aurora hero is 217 KB as WebM at 2560×1440.

Ready for page speed

Instant poster images, lazy-loaded footers and reduced-motion support out of the box.

Clean edges

No flicker, no warping, no watermark. The same clean motion every loop.

Legibility measured

Every set ships with overlay values measured for white text at 4.5:1 contrast.

Composed for each screen

Desktop and mobile are rendered separately, never cropped from one another.

Free and open source.

Every set is free to download. Star the repo on GitHub to help others find it.

Star on GitHub

All sets, all formats, all code — free for personal and commercial use.

Questions

What exactly is in a set?

A hero and a footer from the same visual family. Each comes as desktop and mobile videos in MP4 and WebM, with poster images, copy-paste code for HTML/CSS, Framer and Webflow, and a README with recommended overlay values.

Will a video background slow my site down?

The files are built to be light: the Ember Aurora hero is 217 KB as WebM at 2560×1440. The poster image shows instantly, the footer video only loads when it scrolls into view, and visitors who prefer reduced motion or have Data Saver on get the still poster instead.

How are the videos made?

Every set is code-generated: mathematical wave fields rendered frame by frame. That is what makes the loops exact and keeps the edges clean.

Is it really free?

Yes. All sets are free for personal and commercial use, including client work. Star the GitHub repo if you find it useful.

Can I use it for client projects?

Yes. All sets are free for unlimited projects, including sites you build for clients.