57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T816,

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)

54:[["$","$L57",null,{"post":{"id":"019e17e6-6a7d-7f3d-a8ea-91751b7e690f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"364f1245-b463-4b16-bf22-e084d614b2dd","name":"Jerel Le Blanc","slug":"jerel-le-blanc","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33604/k9So5KKIQ-Jvi1kEDYXqwoH61YwNFqLEZR5kNpa3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KuBRzpzsBAmGf7WOE0Ld","resolved":true,"title":"Text Image Mask","body":"$58","bodyJson":null,"introduction":"Image-Clipped Text Masking","slug":"textimagemask","author":{"framerUserId":"364f1245-b463-4b16-bf22-e084d614b2dd","name":"Jerel Le Blanc","slug":"jerel-le-blanc","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33604/k9So5KKIQ-Jvi1kEDYXqwoH61YwNFqLEZR5kNpa3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KuBRzpzsBAmGf7WOE0Ld/textimagemask-XlIxrHNFpQNvAZDqzcWxaImdARNoBh","metadata":{"tint":{"h":180,"s":8,"l":31},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-28T03:37:47.701Z","updatedAt":"2026-05-11T17:02:32.788Z","publishedAt":"2026-05-11T16:37:17.053Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://text-image-mask.framer.website","price":"12","paymentUrl":"https://contra.com/payment-link/8A42tmlu-text-image-mask-component-for-framer","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"KJuV7Lp3BqJF3NkTmdT5","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-11T16:37:17.053Z","updatedAt":"2026-05-11T16:37:17.053Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you