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.
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
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
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.
Evixel Studio
