Type Mask

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.