---
title: "Text Image Mask — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Jerel Le Blanc · Text. Image-Clipped Text Masking"
canonical: "https://framer.elliotli.dev/component/textimagemask"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Image Mask

# Text Image Mask

Image-Clipped Text Masking

[View on Framer](https://framer.com/marketplace/components/textimagemask/?via=elliot-li)

![Text Image Mask preview image 1](https://framer.elliotli.dev/og/component/textimagemask/e726ab2c30989588/1600x1200.jpg)

## Summary

Image-Clipped Text Masking

## Description

## Feature Highlights

**Text Clipped Image Masking** — Your text becomes an SVG clipping mask. The image is able to be shown through the text at any position in the frame, creating a bold typographic reveal that works at any size.

**Clip Mode: Empty or Fill** — In _Empty_ mode, the text punches a transparent stroke into the background image. Switch to _Fill_ mode to fill the text shape with a solid color of your choice.

**Flexible Font Control** — Choose any font family, weight, and style from Framer's font picker. Scale the text fluidly as a percentage of the component's width so it always fills the frame.

**Precise Text Positioning** — Nudge your text horizontally and vertically using X and Y offset controls, so the clip mask sits exactly where you need it.

**Stroke Settings** — Add an outer or inner stroke with full control over color, weight, and paint order — great for adding contrast or an outlined effect over your media.

**Image Clip & Offset** — Use the clip size and invert clip controls to reveal only a portion of the background (top half, bottom half, or anywhere in between), and shift it vertically for precise art direction.

**Color Adjustments** — Fine-tune the image's hue, saturation, brightness, contrast, and blur directly in the property panel — no extra layers needed.

**Fully Responsive** — Font size, offsets, and media positioning all scale dynamically with the component's frame using a live ResizeObserver, so the effect stays sharp at any size.

**Experimental: Video Support** — Via the toggle button, optionally replace the image with an MP4, WebM, or MOV file. Looping, muted autoplay is supported. This feature is experimental and behavior may vary across browsers and canvas environments. (fyi, it works best if you use a tiny file size)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7652

## Details

- **Author**: Jerel Le Blanc
- **Price**: $12.00
- **Published**: 2026-05-11
- **Updated**: 2026-05-11
- **Added**: 2026-04-28
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing