← heroeffects templates
Flat-top smash · Brioche · Open late

Two patties. No shortcuts.

A double smash burger hangs in the dark and opens layer by layer only as the reader scrolls — bun, pickles, two lacy-edged patties, cheese pulling in strings. This edition is a scroll-driven film: the stack comes apart at the reader's pace.

Scroll-drivenhero effect
4sections below
1file to deploy
Flat-top smash · Brioche · Open late

Every layer, on show.

The camera holds and the burger opens under the reader's thumb, down to the cheese stretching between the patties. The dish your kitchen is proudest of, taken apart one layer at a time.

Scroll to play
Why this one moves

Hand the reader the transport controls and they will watch the whole thing.

Smash Stack Film is directed, not decorated. The opening frame is treated the way a director treats a first shot: one continuous move, real depth, and the message placed exactly where the eye lands.

The hero becomes a runway three screens tall with the film pinned to the top of it, so every pixel of scroll moves the playhead and the reader becomes the projectionist. The seek is smoothed and quantised to a frame so the decoder never thrashes. Everything ships as a single self-contained file that drops into Webflow, WordPress, Shopify or Framer — and your team edits every word without touching code.

See the craft
What you get

Three things this template guarantees.

Built for restaurants & burgers teams that need the opening to carry weight and the rest of the page to stay out of the way.

01

Scroll-driven film

The hero becomes a runway three screens tall with the film pinned to the top of it, so every pixel of scroll moves the playhead and the reader becomes the projectionist. The seek is smoothed and quantised to a frame so the decoder never thrashes.

02

One file

Hero, sections, form and copy editor in a single HTML document. No build step, no framework, no plugin — paste it in and it runs.

03

Sixty frames

Device pixel ratio capped at two, reduced-motion honoured with a still frame, and a graceful image fallback if WebGL is unavailable.

The principle

The scrollbar is the playhead.

Everything in Smash Stack Film exists to make the first scroll feel intentional. Nothing wobbles for its own sake; every move is tied to how far the reader has travelled.

1.8sto first rendered frame
60fpson an ordinary laptop
0frameworks required
Use this template

Make Smash Stack Film yours.

Send the image you want in the hero and a line about the brand. We re-skin Smash Stack Film to your palette, type and copy, and hand back one file — usually inside five working days.

Or write to hello@heroeffects.com
Template · Smash Stack Film · effect: scrub · scroll-driven film
Preview · heroeffects.com · all rights reserved