Scroll Morph Mask Video

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the section to your <body>:

Code snippet omitted: it ships with the download.

Copy the two d attributes from the demo's index.html to start with, then replace the word with your own (see below).

Using It With Your Own Design

What the effect needs from your markup: one [data-mask-video] section containing a [data-mask-stage] (this is what gets pinned), a [data-mask-layers] wrapper holding zero or more [data-mask-echo] divs and one [data-mask-film] with a <video> inside, a <clipPath clipPathUnits="userSpaceOnUse"> with a single empty <path>, and a hidden <svg viewBox="…"> holding the [data-mask-shape] paths in the order you want them morphed. Everything else ([data-mask-grade], [data-mask-scrim], [data-mask-reveal], [data-mask-hint], [data-mask-replay], the <filter>) is optional and skipped when absent. The script never reads a class name; all hooks are data- attributes.

Authoring the mask shapes: every shape is an ordinary SVG path in one shared design box, the viewBox of the shapes SVG (the demo uses 0 0 1200 675). The script fits that box inside the stage with a contain scale and centres it, so shapes are never stretched at other aspect ratios. To use your own word or logo: set the text in Figma or Illustrator, outline it (Figma: Flatten; Illustrator: Create Outlines, then Compound Path > Make), copy as SVG, and paste the d of the resulting path onto a [data-mask-shape]. Draw it at the size and position you want it to appear inside the design box. Shapes with no counters (holes) morph most cleanly; a letter with a counter (the D in the demo's TIDE, an O, an A) still works but passes through a stranger middle state, and a stem beside the counter makes a good zoom point. The demo's outlines come from Mona Sans at weight 800; any face you can outline works. Add more shapes for more stages: the script morphs through them in document order and always zooms through the last one to full bleed. One shape is also fine (mark, then zoom).

The zoom point: put data-mask-zoom="x y r" on the last shape: a point in design units that sits inside a solid part of the shape, and the radius of solid around it. The mask scales up about that point until the solid covers the stage, so choose a fat stroke or a crossing (the demo uses the stem of the D). Without the attribute the script zooms about the centre of the design box, which is only right if that point is inside your shape.

Footage: in the default play mode the video plays rather than scrubs, so any muted, looping MP4 works: no all-intra encode, no frame sequence. Because the film is seen through thin letter apertures for part of the journey, pick footage with bold, continuously moving texture and real depth (water, weather, a drone pass, a crowd) and avoid fine detail or a static frame. A 10-15s seamless loop is plenty. The demo clip is a drone pass over a surf break by Nadezhda Moryak on Pexels (https://www.pexels.com/video/9806388/, licence permits modification and redistribution; credited anyway), graded for contrast with a slight desaturation and no colour tint, then cut into a 12s loop by cross-fading the last second onto the first (xfade=transition=fade:duration=1 between the tail and the head, concatenated after the body). Ship a VP9 WebM first and an H.264 MP4 fallback: at 1600x900 the demo's land at 2.2MB each (-c:v libvpx-vp9 -b:v 0 -crf 52 -row-mt 1 and -c:v libx264 -crf 34); foam and water are expensive to encode, so calmer footage goes smaller. Supply a poster so the reduced-motion and autoplay-blocked paths show a real frame.

Scrub mode footage: seeking decodes from the previous keyframe, so a normal long-GOP encode stutters. Encode a dedicated file with a short GOP and point data-scrub-src on the <video> at it; the script swaps it in only when scrubbing. ffmpeg -i in.mp4 -t 10 -an -vf scale=1280:720 -c:v libx264 -crf 30 -g 6 -keyint_min 6 -sc_threshold 0 -movflags +faststart -pix_fmt yuv420p scrub.mp4 gives about 5MB for 10s with seeks around 20ms; all-intra (-g 1) is smoother still but three times the size. A scrubbed clip does not need to loop.

What is only the demo's styling: the font (Mona Sans from Google Fonts), the near-black ground and grade, the prompt, the content block's typography and the hairline button are all demo CSS; reskin or delete them freely. The echo colours are the --echo-a and --echo-b custom properties (the demo sets them to its accent and its chalk ink) applied on .mask-video__echo--a/--b; set them to anything, or remove the echo divs to drop the edge split altogether.

CSS the effect depends on: .mask-video__stage must be position: relative; overflow: hidden with a real height (the demo uses 100svh), and the layers, echoes, film and scrim must stay position: absolute; inset: 0 so all three masked elements share the same user space as the clip path. The <video> needs object-fit: cover at full size. Keep the .has-js gates: .has-js .mask-video__echo { display: block }, .has-js .mask-video__grade { display: block }, .has-js .mask-video__scrim { opacity: 0 } and the [data-mask-reveal] pre-hide, each with its reduced-motion restore; without JS the film simply fills the stage under your content, which is the correct fallback. The script sets clip-path: url(#…) inline on the film and echoes, so do not set clip-path on them in CSS.

Options

All attributes go on the [data-mask-video] section.

Accessibility

• Reduced motion: no pin, no ticker, no morph. The word shape is set once over the poster frame, positioned in the upper half so the content below it is fully readable, and the scrim and content are shown immediately. The video is never started.
• No JavaScript: the grade, echoes and hint are hidden, nothing is clipped, and the film fills the stage under the visible content.
• Keyboard: the only control is a real <button> (or <a> in your page) with :focus-visible styling matching :hover.
• Screen readers: the video, echoes and decorative layers are aria-hidden; the section carries an aria-label.

Dependencies

Required:

• GSAP 3.13+ (MorphSVGPlugin is free as of 3.13)
• ScrollTrigger plugin
• MorphSVGPlugin

Optional:

• Lenis (smooth scroll; opt out with data-smooth="off" on <html> or ?smooth=off)

Browser Notes

• clip-path: url(#id) on HTML elements is supported in all current browsers. The clip path uses userSpaceOnUse units so its coordinates are the element's own pixels, which is why every masked layer must be the same size as the stage.
• The ripple uses an SVG filter referenced from CSS; it is applied only on fine-pointer devices and only while there is scroll velocity.
• iOS Low Power Mode may refuse autoplay; the poster shows and the mask still morphs over it.