5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2ul6havqzfm41.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/102lphbyhyqtr.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1zpmt8l695i6d.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3sj_xp-v1_jxx.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/0ph1ht6wvel_v.js","/creators-assets/_next/static/immutable/chunks/2zfre20tirh12.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0-hg6m03a-yoq.js"],"PostDetailCard"] 5f:T7ce,

ParticleVideoSlider transforms your video content into a living cloud of particles. Each clip is rendered as thousands of depth-mapped points that react to brightness, creating a tactile 3D texture from any footage.

Transitions between clips Choose from four particle transition styles — Scatter (radial burst), Explode (from center), Vortex (spiral), or Rain (fall). The outgoing and incoming clips overlap with a smooth cross-dissolve timed to your liking.

Wave ripple effect A luminance wave sweeps periodically across the particle surface. Control direction (Horizontal, Vertical, Radial, or Cursor), speed, glow intensity, band width, and the interval between passes. Enable Z Lift to push particles toward the viewer as the wave rolls over them.

Organic cursor ripple In Cursor mode the wave expands as an isoline from the pointer — warped by layered noise so it looks like a living, irregular ring rather than a perfect circle. Adjust Distortion to dial in how organic it feels.

Color modes

Video — original colors from the footage
Tint — luminance-mapped single accent color
Duotone — two-color gradient driven by brightness

Controls at a glance

Up to 4 video clips with automatic slideshow
Slide interval and transition duration
Particle density, size, depth scale, turbulence
Wave: direction, speed, interval, glow, width, Z lift, distortion
Color mode, brightness, additive / normal blending
Max pixel ratio cap for GPU performance tuning

Technical Built on Three.js (WebGL) with a custom GLSL shader pipeline. Fully responsive — fills any container. Renders a static poster image in the Framer canvas preview

5b:[["$","$L5e",null,{"post":{"id":"019ed447-b403-779c-9cc1-f18eaa2ef751","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b93a306d-0af6-45ce-9cf6-09f5a4245791","name":"Oleksandr Demydov","slug":"oleksandr-demydov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1308085/avatar-n6R4b9ZkHcwsSQM6JuZ6CB7UjvRw2l.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"6S3KPWPRoP110Ha3OKh9","resolved":true,"title":"ParticleVideoSlider","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"ParticleVideoSlider ","marks":[{"type":"bold"}]},{"type":"text","text":"transforms your video content into a living cloud of particles. Each clip is rendered as thousands of depth-mapped points that react to brightness, creating a tactile 3D texture from any footage."}]},{"type":"paragraph","content":[{"type":"text","text":"Transitions between clips","marks":[{"type":"bold"}]},{"type":"text","text":" Choose from four particle transition styles — Scatter (radial burst), Explode (from center), Vortex (spiral), or Rain (fall). The outgoing and incoming clips overlap with a smooth cross-dissolve timed to your liking."}]},{"type":"paragraph","content":[{"type":"text","text":"Wave ripple effect","marks":[{"type":"bold"}]},{"type":"text","text":" A luminance wave sweeps periodically across the particle surface. Control direction (Horizontal, Vertical, Radial, or Cursor), speed, glow intensity, band width, and the interval between passes. Enable Z Lift to push particles toward the viewer as the wave rolls over them."}]},{"type":"paragraph","content":[{"type":"text","text":"Organic cursor ripple","marks":[{"type":"bold"}]},{"type":"text","text":" In Cursor mode the wave expands as an isoline from the pointer — warped by layered noise so it looks like a living, irregular ring rather than a perfect circle. Adjust Distortion to dial in how organic it feels."}]},{"type":"paragraph","content":[{"type":"text","text":"Color modes","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video","marks":[{"type":"bold"}]},{"type":"text","text":" — original colors from the footage"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tint","marks":[{"type":"bold"}]},{"type":"text","text":" — luminance-mapped single accent color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Duotone","marks":[{"type":"bold"}]},{"type":"text","text":" — two-color gradient driven by brightness"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Controls at a glance","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 4 video clips with automatic slideshow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide interval and transition duration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Particle density, size, depth scale, turbulence"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave: direction, speed, interval, glow, width, Z lift, distortion"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color mode, brightness, additive / normal blending"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Max pixel ratio cap for GPU performance tuning"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Technical","marks":[{"type":"bold"}]},{"type":"text","text":" Built on Three.js (WebGL) with a custom GLSL shader pipeline. Fully responsive — fills any container. Renders a static poster image in the Framer canvas preview"}]}]},"introduction":"Cycle up to 4 video clips","slug":"particlevideoslider","author":{"framerUserId":"b93a306d-0af6-45ce-9cf6-09f5a4245791","name":"Oleksandr Demydov","slug":"oleksandr-demydov","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1308085/avatar-n6R4b9ZkHcwsSQM6JuZ6CB7UjvRw2l.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/b93a306d-0af6-45ce-9cf6-09f5a4245791/6vuka5a0"}],"post":null,"createdAt":"2026-06-17T06:32:09.441Z","updatedAt":"2026-06-21T17:32:26.685Z","publishedAt":"2026-06-17T06:32:09.434Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://empowered-line-891365.framer.app/","price":"10","paymentUrl":"https://yyann.gumroad.com/l/ddbkpy","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"uhqWU5V6tYexSP9ZsSau"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":20,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-17T06:32:09.475Z","updatedAt":"2026-06-17T06:32:09.475Z","reported":false}}],"$L60"]

Suggested for you

Suggested for you

Suggested for you