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:T9de,

Turn flat SVG logos and vector graphics into dynamic, interactive 3D liquid meshes with real-time fluid ripples, chromatic aberration, and organic pointer physics.

Features

Real-time GPU fluid wave and deformation physics
Instant client-side SVG parsing and automated 3D mesh extrusion
Integrated volumetric particle field with synchronized motion
Realistic chromatic aberration (RGB split) and cinematic soft glow
Dual-mode interaction with smooth pointer tilt and 360° drag physics
Built-in chamfer distance field for ultra-crisp outlines
Static renderer compliant with zero unwanted canvas loop overhead
Native Framer reduced-motion and viewport intersection optimization
100% self-contained WebGL canvas with no external dependencies
Responsive automatic resizing and custom canvas pixel ratio clamping

Customization Options

SVG vector file upload
Mesh scale, inflation depth, and resting tilt angle
Base tint, opacity, surface grain, and rainbow iridescence shimmer
Outer glow spread and chromatic aberration intensity
Outline toggle and outline accent color
Fluid deformation flow intensity, animation speed, and continuous spin rate
Pointer hover tilt tracking and interactive drag rotation toggles
Physics smoothing damping and hover sensitivity
Performance rendering tiers (Light, Balanced, High) and pixel ratio scaling

How to Use

Drop the component onto your Framer canvas
Upload any standard SVG logo, badge, or icon via the property panel
Dial in depth and scale to inflate the 2D path into 3D
Adjust iridescence, glow, and tint to match your brand palette
Fine-tune pointer hover tilt and drag physics for tactile feedback
Publish your site for high-performance WebGL visual impact

Use Cases

Hero section brand mark centerpieces
Premium SaaS and tech landing pages
Interactive agency and portfolio logo showcases
Web3, crypto, and futuristic UI headers
AI product visual features and badges
Interactive developer tool emblems
Dark-mode landing page accents

5a:[["$","$L5d",null,{"post":{"id":"01a10d8c-3b8e-7525-bd08-3d9c50d73ff4","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":"jbjXAIXW340KVOvOvMWr","resolved":true,"title":"Interactive 3D SVG","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn flat SVG logos and vector graphics into dynamic, interactive 3D liquid meshes with real-time fluid ripples, chromatic aberration, and organic pointer physics."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time GPU fluid wave and deformation physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Instant client-side SVG parsing and automated 3D mesh extrusion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Integrated volumetric particle field with synchronized motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic chromatic aberration (RGB split) and cinematic soft glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dual-mode interaction with smooth pointer tilt and 360° drag physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in chamfer distance field for ultra-crisp outlines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer compliant with zero unwanted canvas loop overhead"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native Framer reduced-motion and viewport intersection optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"100% self-contained WebGL canvas with no external dependencies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive automatic resizing and custom canvas pixel ratio clamping"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SVG vector file upload"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mesh scale, inflation depth, and resting tilt angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Base tint, opacity, surface grain, and rainbow iridescence shimmer"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Outer glow spread and chromatic aberration intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Outline toggle and outline accent color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid deformation flow intensity, animation speed, and continuous spin rate"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pointer hover tilt tracking and interactive drag rotation toggles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Physics smoothing damping and hover sensitivity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance rendering tiers (Light, Balanced, High) and pixel ratio scaling"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload any standard SVG logo, badge, or icon via the property panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dial in depth and scale to inflate the 2D path into 3D"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust iridescence, glow, and tint to match your brand palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune pointer hover tilt and drag physics for tactile feedback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for high-performance WebGL visual impact"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero section brand mark centerpieces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium SaaS and tech landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive agency and portfolio logo showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3, crypto, and futuristic UI headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI product visual features and badges"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive developer tool emblems"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark-mode landing page accents"}]}]}]}]},"introduction":"Convert 2D vector SVG to 3D meshes","slug":"interactive-3d-svg","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/01a10d8c-160f-778d-b14f-252937021a6d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-05T19:30:55.831Z","updatedAt":"2026-10-05T19:30:55.831Z","publishedAt":"2026-10-05T19:30:55.824Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://exquisite-pear-973831.framer.app/","price":"5","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/4dff14e1-4a22-4920-bcb8-d15cc3b830b7","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"29VduVVYHa4zopGP9n5i","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-05T19:30:56.526Z","updatedAt":"2026-10-05T19:30:56.526Z","reported":false}}],"$L5f"]

Suggested for you