Getting Started
Scroll Animations
Text Animations
Hover & Cursor
Sliders & Carousels
Galleries & Grids
Menus & Navigation
Preloaders & Intros
Page Transitions
3D & WebGL
logo-mask-zoom-scroll-demo
Scroll to reach the coast
Film Days
North Coast
June 11–19
Nine nights of cinema at the edge of the map.
import { LogoMaskZoomScroll } from "@/registry/tween/logo-mask-zoom-scroll"
export function LogoMaskZoomScrollDemo() {
return <LogoMaskZoomScroll />
}
Installation
Usage
import { LogoMaskZoomScroll } from "@/components/ui/logo-mask-zoom-scroll"<LogoMaskZoomScroll
image="/fjord.jpg"
foregroundImage="/fjord-cliff-cutout.png"
logoPath="M0 0H100V100H0Z"
title={
<>
Orhav <br /> Film Days
</>
}
/>logoPath is any SVG path d string. Pick a shape whose centre point sits inside a filled area, so the hole covers the whole screen at the starting zoom.
How it works
A full-size SVG overlay is filled with background and masked by a <mask> whose white rect has the logo path cut out in black. The path is fitted into a 400px box centred a quarter of the way down the hero. The hero pins for pinDistanceFactor viewport heights and a single ScrollTrigger (scrub: 1) drives:
0 → 0.15: the white logo on the image and the hint text fade out.0 → 0.85: the overlay scales frominitialOverlayScaledown to1on an exponential curve around50% 25%, so the hole closes evenly into the logo. The image layer scales from1.5to1.0.25 → 0.65: a white layer fades in over the image, so the logo reads as white.0.7 → 0.85: the headline fades in, scales from1.25to1, and a hard-stop gradient moves up through its clipped text.
If you pass foregroundImage, it sits between the hero logo and the hint, so a cut-out subject can overlap the logo. The trigger is rebuilt and the mask re-fitted when the scroller resizes. With prefers-reduced-motion: reduce the logo and headline are shown in their final state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | remote fjord photo | Hero background image. |
foregroundImage | string | — | Optional transparent cut-out above the logo. |
logoPath | string | blocky ORHAV wordmark | SVG path data for the mask hole and hero logo. |
hint | ReactNode | "Scroll to reach the coast" | Small text near the bottom of the image. |
title | ReactNode | three-line headline | Headline revealed with the gradient wipe. |
outroText | ReactNode | short closing line | Text of the section after the hero. |
initialOverlayScale | number | 500 | Starting zoom of the overlay. |
pinDistanceFactor | number | 5 | How many viewport heights the hero pins for. |
background | string | "#0d1417" | Overlay and page color. |
accent | string | "#f0a35e" | Lower color of the headline gradient. |
fontFamily | string | DM Sans stack | Font for all text. |
scroller | HTMLElement | string | null | — | Optional ScrollTrigger scroller. |