Particle Image | React Bits Pro
pro.reactbits.dev · 141 words · saved by 1 readers
An image dissolved into GPU particles that swirl apart and reassemble
Image URL Background Show ImageCursor InteractionPaused Props 21 NameTypeDefaultDescription imageUrlstring"https://images.unsplash.com/..."Image sampled for particle color and drawn behind the field widthstring | number"100%"Container width heightstring | number"100%"Container height classNamestringundefinedAdditional CSS classes childrenReactNodeundefinedContent rendered above the effect particleCountnumber500000Number of live particles, rounded up to a square simulation grid particleSizenumber2Particle diameter in CSS pixels particleOpacitynumber0.85Peak particle opacity…
saved by
related reading
- Components | Canvas UIcanvasui.dev
- Introduction | Canvas UIcanvasui.dev
- Paper Shaders – Ultra-fast zero-dependency shadersshaders.paper.design
- Shadersshaders.com
- Grainradgrainrad.com
- Examplesp5js.org
- Liquid metal — Animated metal shader effectmetal.jakubantalik.com
- How fast is javascript? Simulating 20,000,000 particlesdgerrells.com
- Atlas Fields Studio | Arena Physicafields-studio.arenaphysica.com
- Image to Mesh Gradientphotogradient.com
- Unicorn Studio — No-code WebGL Toolunicorn.studio
- Going Critical — Melting Asphaltmeltingasphalt.com