5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T9cd,

Elevate your landing pages with interactive WebGL fluid typography and reactive particle dynamics that respond seamlessly to cursor physics, ambient motion, and cinematic lighting.

Features

Real-time GPU fluid velocity and pressure projection
Dynamic text displacement linked with particle field physics
Interactive cursor wake and fluid splat interaction
Automatic idle motion with customizable drift speed
Cinematic chromatic aberration and rainbow spectral rim lighting
Multi-line typographic canvas atlas with custom typography support
Integrated prefers-reduced-motion accessibility support
Zero external dependencies, CDNs, or heavy 3D asset loaders
Frame-rate throttling and automatic off-screen render pausing
Full static renderer fallback support for instant SEO indexing

Customization Options

Live preview toggle for instant canvas feedback
Multi-line text contents with individual line support
Custom font family, weight, style, and letter spacing
Font size, line height, and text box width controls
Fluid pointer force, brush radius, and damping speed
Fluid swirl turbulence, memory recovery, and distortion intensity
Field bulge radius, count, curvature, and idle speed
Particle dot spacing, radius, brightness, and glow intensity
Fluid hue shifting and custom text color/opacity
Simulation grid resolution, solver iterations, and pixel ratio

How to Use

Drop the component directly onto your Framer canvas
Type your custom text or toggle it off to use the fluid canvas alone
Select your desired brand font, color, and particle glow
Tune fluid force and swirl for subtle ripples or high-energy distortion
Publish to deliver a silky-smooth, interactive WebGL experience

Use Cases

High-converting SaaS hero sections
Creative developer and designer portfolios
Futuristic AI and Web3 landing pages
Interactive brand statements and digital manifestos
Dark mode UI feature showcases
Immersive section dividers and interactive backgrounds

5a:[["$","$L5d",null,{"post":{"id":"01a0f260-83e1-7121-a164-55e2cc2a75eb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[],"resources":[{"id":"iyJc3hdOq1SzMUcIaiQM","resolved":true,"title":"Interactive Fluid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elevate your landing pages with interactive WebGL fluid typography and reactive particle dynamics that respond seamlessly to cursor physics, ambient motion, and cinematic lighting."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time GPU fluid velocity and pressure projection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic text displacement linked with particle field physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive cursor wake and fluid splat interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic idle motion with customizable drift speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic chromatic aberration and rainbow spectral rim lighting"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-line typographic canvas atlas with custom typography support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Integrated prefers-reduced-motion accessibility support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero external dependencies, CDNs, or heavy 3D asset loaders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame-rate throttling and automatic off-screen render pausing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full static renderer fallback support for instant SEO indexing"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customization Options"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live preview toggle for instant canvas feedback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multi-line text contents with individual line support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom font family, weight, style, and letter spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font size, line height, and text box width controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid pointer force, brush radius, and damping speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid swirl turbulence, memory recovery, and distortion intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Field bulge radius, count, curvature, and idle speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Particle dot spacing, radius, brightness, and glow intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid hue shifting and custom text color/opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Simulation grid resolution, solver iterations, and pixel ratio"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component directly onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Type your custom text or toggle it off to use the fluid canvas alone"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select your desired brand font, color, and particle glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune fluid force and swirl for subtle ripples or high-energy distortion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish to deliver a silky-smooth, interactive WebGL experience"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-converting SaaS hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative developer and designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Futuristic AI and Web3 landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive brand statements and digital manifestos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark mode UI feature showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive section dividers and interactive backgrounds"}]}]}]}]},"introduction":"Interactive Fluid Text & Canvas","slug":"interactive-fluid","author":{"framerUserId":"b98a0c6d-195f-46fb-9abf-090b475fe09e","name":"Ameva","slug":"ameva","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/q91oiwbx","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b98a0c6d-195f-46fb-9abf-090b475fe09e/01a10666-e437-7548-8194-b4bab5c55524.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-30T12:53:25.878Z","updatedAt":"2026-10-05T09:36:12.597Z","publishedAt":"2026-09-30T12:53:25.867Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://courageous-partners-745223.framer.app/","price":"8","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/602e2e48-d5ab-46f9-bdc6-6538ddf9f7ee","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"RSm3UsrdNsV0wuqrovh8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-30T12:53:26.625Z","updatedAt":"2026-09-30T12:53:26.625Z","reported":false}}],"$L5f"]

Suggested for you