Create a text mask video effect in Squarespace

In this tutorial, we’ll recreate a popular Webflow-style effect—where a background video appears through text—using SquareKicker. The best part? You can build this in just a few minutes.

What We’re Building

This effect uses:

• A background video

• Fixed scrolling

• A custom stencil (mask) applied over the video

By layering these correctly, the video appears to show through your text or shapes.

Step 1: Set Up Your Sections

Start by preparing your page:

1. Add two sections to your page.

2. Apply the same background video to both sections.

This duplication is key to creating the seamless visual effect.

Step 2: Apply Fixed Scrolling

Next, we’ll lock the background in place:

1. Open the bottom section settings.

2. Open the Extension and navigate to the Advanced tab.

3. Enable Fix Scrolling.

4. Choose Background (instead of content).

5. Click Apply.

Repeat the same steps for the top section.

This ensures both videos stay aligned as you scroll.

Step 3: Add a stencil (mask effect)

Now for the main visual effect:

1. Reopen the Extension in the top section.

2. Navigate to the Stencils tool in the Advanced tab.

You have two options here:

• Use a pre-made shape from the shapes library

• Upload a custom SVG. You’ll need to do this if you want to create a text heading as in the example in the tutorial.

Creating a custom SVG

You can design your own stencil using a tool like Canva. Export it as an SVG and upload it into SquareKicker.

Step 4: Style the background video

To enhance the effect:

1. In the Design tab, open Background.

2. Click on Media (this targets the video).

3. Apply a filter—Blur works especially well here.

4. Adjust the intensity to your preference.

This helps create contrast so the stencil effect stands out more clearly.

Step 5: Sync the videos

You may notice the videos aren’t perfectly aligned at first. That’s normal.

Simply refresh the page, and the videos will sync perfectly.

Final Result

Once everything is applied, you’ll have a smooth, eye-catching effect where the video appears through your stencil or text—similar to what you might see in advanced Webflow builds.

Try It Yourself

That’s it. With just a few steps, you can create a standout visual effect on your Squarespace site using SquareKicker.

Experiment with different shapes, videos, and filters to make it your own.