Scroll-driven cinematic showcase
A reusable section that turns any demo into a short film: licensed footage opens from a framed window to full-bleed as you scroll, followed by a pinned photo gallery.
Technical objective
Give every demo the feel of an agency-produced site — real footage, confident typography and motion — while keeping it a single dependency-free script that works on phones.
Constraints
- No animation libraries: one small script per section.
- Only one video decoding at a time to protect battery and data.
- Must respect reduced-motion preferences and degrade to a static layout.
Architecture
- 01
Pinned reel
A tall section with a sticky stage; scroll progress drives clip-path, scale and chapter.
- 02
Chapters
Up to three clips cross-fade with captions; only the active clip plays.
- 03
Pinned gallery
A horizontal track translated by scroll with per-card parallax.
- 04
Own photos first
When a business's own photos are known, they lead the gallery.
Flow runs left to right, top to bottom.
Key implementation decisions
Footage over procedural 3D
The earlier procedural 3D room looked synthetic. Licensed footage made the same section feel real immediately.
Namespaced styles
The section is injected into many different templates, so every class is prefixed to avoid collisions with template CSS — a lesson learned from a real layout bug.
Preload the next clip only
The first clip loads eagerly; each subsequent clip is upgraded from preload='none' just before it is needed.
Screenshots
Challenges
CSS collisions
A generic class name in the gallery collided with a template's grid rule and collapsed the track. Prefixing every selector fixed it permanently.
Mobile overlap
The final call-to-action overlapped the sticky mobile action bar; on small screens it is now hidden in favour of the bar.
Lessons learned
- Scroll-linked motion should map to one progress value; everything else derives from it.
- Injected components must defend their own styles.
- Real footage plus restraint beats elaborate generated graphics.