A cinematic scrollytelling section. As the user scrolls down, a massive text block acting as an SVG clipping mask infinitely scales up until the hidden image or video breaks out of the letterforms to cover the entire screen seamlessly.

Live Preview

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { StickyImageMask } from "@/components/creative/sticky-image-mask";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { StickyImageMask } from "@/components/creative/sticky-image-mask";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <StickyImageMask
        text="example"
        imageUrl="example"
        videoUrl="example"
      />
    </div>
  );
}