5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0lmmu21lg5-zj.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T911,

About This Component

Shader Text is a WebGL-powered typography component that transforms static text into dynamic, animated visuals. By combining GPU-accelerated fragment shaders with SVG masking, it renders rich, flowing effects visible only through the shape of your text.

Designed for Framer, it integrates seamlessly with layout and property controls, allowing you to customize typography, animation speed, scale, and visual style with ease. From subtle gradients to bold, cinematic effects, Shader Text adds depth and motion without compromising performance or responsiveness.

Features

12 handcrafted shader presets (Noise, Plasma, Aurora, Cyber, and more)
Smooth GPU-accelerated animations (WebGL)
Fully customizable typography (font, size, spacing, alignment)
Adjustable speed, scale, resolution, and softness
SVG-based masking for crisp text edges
Responsive and auto-resizing layout behavior
Viewport-based performance optimization
Static preview in Framer Canvas for smooth editing
Accessible with fallback rendering support

Use Cases

Hero headlines that instantly capture attention
Portfolio titles with a unique visual identity
Campaign and event landing pages
SaaS product headers and feature highlights
Creative agency websites and showcases
Gaming, entertainment, or streaming overlays

Technical Highlight

WebGL fragment shaders for real-time GPU rendering
SVG mask pipeline for precise text clipping
RequestAnimationFrame loop for smooth animation updates
Resolution scaling for performance control
Viewport detection to pause off-screen rendering
ResizeObserver for responsive recalculation
SSR-safe implementation for Framer compatibility
Graceful fallback when WebGL is unavailable

There should be a clear Refund Policy on the checkout page.

Refund Policy: Due to the digital nature of this product, all sales are final. Refunds are not offered after purchase.

5a:[["$","$L5d",null,{"post":{"id":"019dd38c-b21c-7e9d-8d97-c04a3f0630d9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f93275c5-a6ac-46b8-8ac4-2c00fe587a2f","name":"Pieart Studio","slug":"pieartstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1367725/ApyTBzVaQ-dgSLXiLW31WkTT6zAh8mkFB3Q6pGTa","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"i1j9314It9kEoN5YrU6J","resolved":true,"title":"ShaderText","body":"$5e","bodyJson":null,"introduction":"Animated shader text, GPU-powered","slug":"shadertext","author":{"framerUserId":"f93275c5-a6ac-46b8-8ac4-2c00fe587a2f","name":"Pieart Studio","slug":"pieartstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1367725/ApyTBzVaQ-dgSLXiLW31WkTT6zAh8mkFB3Q6pGTa","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/i1j9314It9kEoN5YrU6J/shadertext-VII23okYoZB1gQ32Hk9DG4wxhCqCEe","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-25T03:06:23.037Z","updatedAt":"2026-04-27T20:52:12.652Z","publishedAt":"2026-04-28T10:05:06.460Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ShaderText-2hK8Uo.js@87t0Gktx5H2LwN464rrK","previewUrl":"https://shader-text.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"87t0Gktx5H2LwN464rrK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-28T10:05:06.460Z","updatedAt":"2026-04-28T10:05:06.460Z","reported":false}}],"$L5f"]

Suggested for you