July 27, 2026/Intermediate/Galleries & Media/BeNorth.Studio ↗

BeNorth Reel

Showreel video band (BeNorth.Studio). The dark rounded frame starts at scale(0.9) and lerps up to full size with an ease-out curve as it enters the viewport, while the video — oversized 16% inside the masked frame — slides vertically for an inner parallax. Overlay tag and year labels reveal once via IntersectionObserver, and playback is viewport-gated: the video plays only while on screen and never autoplays under reduced motion.

Live Demo ↗

Preview

BNS® — Showreel

Source

"use client";

import BeNorthReel from "./index.jsx";
import { benorthReel } from "../demo-data.js";
import styles from "./demo.module.css";

export default function BeNorthReelDemo() {
  return (
    <div className={styles.demo}>
      <header className={styles.intro}>
        <p>Scroll — the reel scales in as it enters.</p>
      </header>
      <BeNorthReel {...benorthReel} />
      <div className={styles.outro} />
    </div>
  );
}

Related Components

1W AGO

Lamalama Case Listgalleries

1W AGO

Inkfish Work Gridgalleries

1MO AGO

Infinite Draggable Gridgalleries