← heroeffects templates
Architecture · Interiors · Coastal homes

From the first line to the front door.

A villa above the bay, drawn in lines of light and filled in as the reader scrolls — the plan becoming the place at their own pace. This edition is a scroll-driven film: the house only rises when you do.

Scroll-drivenhero effect
4sections below
1file to deploy
Architecture · Interiors · Coastal homes

Every line, kept.

The camera holds on the hillside and the house assembles under the reader's thumb, down to the last pane of glass. The shot a buyer wants from a developer — the finished thing, arriving — driven by their own scroll.

Scroll to play
Why this one moves

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

Drawn Light 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 architecture & property 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 Drawn Light 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 Drawn Light Film yours.

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

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