"A fashion brand landing page where text reveals video and the cursor leaves a trail of editorial images"

I built this hero section for a fashion brand called Najar. The main idea: the brand name acts as a mask that reveals video underneath, and when you move your cursor across the page, it leaves behind a trail of editorial fashion images.

The result is a landing page that feels alive. The text is not static. The cursor is not just a pointer. Everything moves.

WHAT I WAS BUILDING:

A text mask that clips video to the shape of the letters

A cursor trail that spawns images wherever the mouse moves

Smooth transitions so nothing feels jarring

The text mask works by using CSS clip-path or canvas compositing. The video plays inside the letter shapes, so you see motion through the typography. The cursor trail stores the last N mouse positions and places small images at each point, then fades them out over time.

THE TECHNICAL SIDE:

The page uses HTML, CSS, and JavaScript. No frameworks, no libraries.

The text mask is the core effect. I rendered the brand name on an offscreen canvas, then used that as a clipping mask for the video element. Every frame, the video draws only where the text pixels exist.

For the cursor trail, I tracked mouse movement with event listeners and stored positions in an array. Each position gets a small image element that fades out and removes itself after a short delay. The images are editorial fashion shots that match the brand feel.

The layout is minimal. Dark background, centered text, nothing else. All the attention goes to the interaction.

WHAT I LEARNED:

Canvas compositing is powerful but fiddly. Getting the text mask to update every frame without lag took some optimization.

The cursor trail needed throttling. Without it, too many images spawned on fast mouse moves and the page slowed down. I limited the spawn rate and capped the array length.

The full working example is on JSFiddle. Move your mouse around and watch the trail appear.

Built by Samin Sami | Developer & 3D Experimentation