---
title: "Type Mask — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Evixel Studio · Text. Type Mask lets you turn individual words in a block of text into interactive media portals."
canonical: "https://framer.elliotli.dev/component/type-mask"
---

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

# Type Mask

Reveal media inside text on hover

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

![Type Mask preview image 1](https://framer.elliotli.dev/og/component/type-mask/24dc432ac629ac03/1600x1200.jpg)

## Summary

Type Mask lets you turn individual words in a block of text into interactive media portals.

## Description

Type Mask lets you turn individual words in a block of text into interactive media portals. Wrap any word in \[brackets\] inside the text field, assign an image or GIF to that portal slot, and on hover the text becomes transparent — revealing the media clipped through the letterforms with a live parallax effect that follows the cursor.

### Features

-   Bracket syntax — \[word\] turns any word into a portal, no limit on count
    
-   Media clipped directly through the text using CSS background-clip
    
-   Mouse parallax panning behind the text as you move the cursor
    
-   Two reveal modes — on hover or always visible
    
-   Optional underline indicator with color and style controls (solid, dashed, dotted, wavy)
    
-   Surrounding text dims on portal activation, with adjustable opacity
    
-   Per-portal click links that open in a new tab
    
-   Spring physics for parallax and scale — fully tunable stiffness and damping
    

### Controls

-   _Content Text_ — full text with \[bracket\] syntax for portal words; supports line breaks
    
-   _Portals Setup_ — array of portal slots, each with an image/GIF asset and an optional click link
    
-   _Typography_ — font family, size, weight, line height, alignment
    
-   _Portal Styling_ — reveal mode, portal color, dim opacity, underline toggle, line color and style
    
-   _Motion & Effects_ — zoom scale, parallax range, hover pop scale, spring stiffness and damping
    

### Quick Start

_Import the component, then type your text in the Content Text field. Wrap the words you want as portals in \[square brackets\] — they'll map in order to the Portals Setup array. Add your images there, hit preview, and hover the words to see the effect. Increase Parallax Range for more dramatic panning, or drop Zoom Scale to 100% to keep the image static behind the text._

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

-   All · #8335

## Details

- **Author**: Evixel Studio
- **Price**: $5.00
- **Published**: 2026-06-05
- **Updated**: 2026-09-19
- **Added**: 2026-06-05
- **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