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

Transform static logos and vector artwork into interactive 3D particle fields with dynamic physics, live cursor repulsion, and smooth hardware-accelerated rendering.

Features

Real-time cursor repulsion and magnetic recovery physics
Custom SVG rasterization supporting contour outlines and solid fills
GLSL-powered additive blending with customizable dot size and glow
Built-in rising entrance animation with settled rest states
Dynamic color extraction directly from uploaded SVG artwork
High-performance WebGL pipeline supporting up to 80,000 points
Full mobile touch support with gesture interaction
Live front-end SVG file uploader for interactive user sandboxes
Automatic viewport detection with zero background GPU drain
Static renderer compliance with zero SSR flicker or hydration errors

Customization Options

SVG upload input with contour and fill sampling modes
Particle density count from 500 to 80,000 points
Outline detail resolution and shape bounding scale
Particle base color and native SVG multi-color toggle
Dot radius, dispersion scatter, and opacity controls
Cursor repulsion force, influence radius, and return speed
Minimal cursor ring toggle
Touch drag interaction toggle for mobile screens
Front-end visitor upload button and interface labels
Device pixel ratio and prefers-reduced-motion accessibility controls

How to Use

Drag and drop SVG Particle Mesh onto your Framer canvas
Upload your SVG logo, icon, or vector graphic in Artwork controls
Switch between Contour outline or Filled particle modes
Adjust the particle count, dot size, and brand color palette
Fine-tune cursor push force and return recovery physics
Publish your site for high-impact interactive vector visuals

Use Cases

Premium SaaS hero sections
Interactive agency and studio portfolio headers
AI product showcases and futuristic tech branding
Dynamic interactive logo sandboxes
Creative developer portfolios
Modern dark-mode landing pages
Interactive product feature highlights
Engaging brand icon displays

5a:[["$","$L5d",null,{"post":{"id":"01a10d76-38a8-7792-99df-6c14236960d7","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":"zk4LO1dLben4SwQsJev7","resolved":true,"title":"SVG Particle Mesh","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Transform static logos and vector artwork into interactive 3D particle fields with dynamic physics, live cursor repulsion, and smooth hardware-accelerated rendering."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time cursor repulsion and magnetic recovery physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom SVG rasterization supporting contour outlines and solid fills"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GLSL-powered additive blending with customizable dot size and glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in rising entrance animation with settled rest states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic color extraction directly from uploaded SVG artwork"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-performance WebGL pipeline supporting up to 80,000 points"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full mobile touch support with gesture interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live front-end SVG file uploader for interactive user sandboxes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic viewport detection with zero background GPU drain"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static renderer compliance with zero SSR flicker or hydration errors"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SVG upload input with contour and fill sampling modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Particle density count from 500 to 80,000 points"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Outline detail resolution and shape bounding scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Particle base color and native SVG multi-color toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dot radius, dispersion scatter, and opacity controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor repulsion force, influence radius, and return speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Minimal cursor ring toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch drag interaction toggle for mobile screens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Front-end visitor upload button and interface labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Device pixel ratio and prefers-reduced-motion accessibility controls"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and drop SVG Particle Mesh onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your SVG logo, icon, or vector graphic in Artwork controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Switch between Contour outline or Filled particle modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the particle count, dot size, and brand color palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune cursor push force and return recovery physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for high-impact interactive vector visuals"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium SaaS hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive agency and studio portfolio headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI product showcases and futuristic tech branding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic interactive logo sandboxes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative developer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern dark-mode landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive product feature highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Engaging brand icon displays"}]}]}]}]},"introduction":"Interactive 3D SVG particle mesh","slug":"svg-particle-mesh","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/01a10d76-192b-71fa-9afa-a5052787d94c.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-05T19:06:53.292Z","updatedAt":"2026-10-05T20:00:47.218Z","publishedAt":"2026-10-05T19:06:53.289Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://knowledgeable-success-802697.framer.app/","price":"9","paymentUrl":"https://madebymariam.lemonsqueezy.com/checkout/buy/152355dd-73fa-43ee-bc1f-128859884e0a","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"MxNQR7S1uvIdNmTIxODT","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:06:53.992Z","updatedAt":"2026-10-05T19:06:53.992Z","reported":false}}],"$L5f"]

Suggested for you