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

Aero Shards renders thousands of individually lit glass shards streaming along procedural flow paths, entirely on the GPU. Choose a Stream, Vortex or Ribbon formation and the same shards morph between them without ever restarting the animation. Three material finishes — Pearl, Chrome and Satin — carry their own lighting model, and the whole field reacts to the cursor: shards repel or attract with damped, flow-aligned motion, clicks send an accent-coloured ripple across the sculpture, and pressing and holding gathers a softly circulating cloud that unfurls on release.

Every parameter is a Property Control. Palette, placement, flow, material, detail, density, speed, spin, turbulence, spread, depth, glow, bloom, grain, chromatic aberration, edge softness and the full interaction model are all adjustable from the panel, with no code required. Lighting and bloom adapt automatically to light backgrounds, so the sculpture reads correctly on white as well as on near-black.

It is built for real projects. The component is completely static on the Canvas, in exports and in thumbnails, so it never slows the editor or tiles an export. It honours prefers-reduced-motion, pauses when scrolled offscreen or when the tab is hidden, scales its shard count to the device, and falls back to a styled static element on browsers without WebGPU. Placement keeps a content-safe region so headlines and buttons stay readable on top.

Features

Three flow formations that morph continuously — Stream, Vortex, Ribbon
Three physically distinct materials — Pearl, Chrome, Satin
Cursor repel / attract, click ripples, and press-and-hold gathering
Optional Dither and ASCII stylization rendered fully on the GPU
Adapts automatically to light and dark backgrounds
32 Property Controls, logically grouped, with descriptions on complex options
Static on Canvas, in exports and in thumbnails; respects reduced motion
Graceful static fallback when WebGPU is unavailable

5a:[["$","$L5d",null,{"post":{"id":"01a08c37-25c5-70ee-ac03-b4b35d2d7155","title":null,"body":"

Try this out!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Try this out!"}]}]},"author":{"framerUserId":"0719432c-b301-4978-a14f-5e7950d02aca","name":"Expert & UI/UX Designer | High-Performance Websites","slug":"sushovan-bhowmik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/197596/avatar-ybp6FaGJ1khDIGNDNuMMTiqCHpk3So.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"RJzDhvQG2PgD2Dpu4syR","resolved":true,"title":"Aero Shards","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aero Shards renders thousands of individually lit glass shards streaming along procedural flow paths, entirely on the GPU. Choose a Stream, Vortex or Ribbon formation and the same shards morph between them without ever restarting the animation. Three material finishes — Pearl, Chrome and Satin — carry their own lighting model, and the whole field reacts to the cursor: shards repel or attract with damped, flow-aligned motion, clicks send an accent-coloured ripple across the sculpture, and pressing and holding gathers a softly circulating cloud that unfurls on release."}]},{"type":"paragraph","content":[{"type":"text","text":"Every parameter is a Property Control. Palette, placement, flow, material, detail, density, speed, spin, turbulence, spread, depth, glow, bloom, grain, chromatic aberration, edge softness and the full interaction model are all adjustable from the panel, with no code required. Lighting and bloom adapt automatically to light backgrounds, so the sculpture reads correctly on white as well as on near-black."}]},{"type":"paragraph","content":[{"type":"text","text":"It is built for real projects. The component is completely static on the Canvas, in exports and in thumbnails, so it never slows the editor or tiles an export. It honours prefers-reduced-motion, pauses when scrolled offscreen or when the tab is hidden, scales its shard count to the device, and falls back to a styled static element on browsers without WebGPU. Placement keeps a content-safe region so headlines and buttons stay readable on top."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three flow formations that morph continuously — Stream, Vortex, Ribbon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three physically distinct materials — Pearl, Chrome, Satin"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor repel / attract, click ripples, and press-and-hold gathering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional Dither and ASCII stylization rendered fully on the GPU"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adapts automatically to light and dark backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"32 Property Controls, logically grouped, with descriptions on complex options"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Static on Canvas, in exports and in thumbnails; respects reduced motion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Graceful static fallback when WebGPU is unavailable"}]}]}]}]},"introduction":"Sculpture of drifting glass shards","slug":"aero-shards","author":{"framerUserId":"0719432c-b301-4978-a14f-5e7950d02aca","name":"Expert & UI/UX Designer | High-Performance Websites","slug":"sushovan-bhowmik","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/197596/avatar-ybp6FaGJ1khDIGNDNuMMTiqCHpk3So.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0719432c-b301-4978-a14f-5e7950d02aca/01a08c36-f866-76ba-bda4-d4507c80e499.jpg","metadata":{"tint":{"h":300,"s":50,"l":6},"width":1920,"height":1080}}],"post":null,"createdAt":"2026-09-10T16:46:59.009Z","updatedAt":"2026-09-10T19:08:00.962Z","publishedAt":"2026-09-10T16:46:59.007Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/AeroShards-9w5q8k.js@lrohPc6eZatyEoIPLiRT","previewUrl":"https://strong-one-027008.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"lrohPc6eZatyEoIPLiRT","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-09-10T16:46:59.525Z","updatedAt":"2026-09-10T16:46:59.525Z","reported":false}}],"$L5f"]

Suggested for you