Juice Effect
0
Used by 0Controls
Juice Effect
Fill an image silhouette with gooey, rising-and-falling liquid particles that fuse into organic blobs and scatter from the cursor.
KEY FEATURES
- — Particles clipped to the uploaded image's alpha silhouette
- — Fill or fit image modes with px, percentage, and scale sizing
- — Original image colors or a custom particle color
- — Density slider scaling from 0 up to 6000 particles
- — Adjustable particle size and animation speed
- — Gooey SVG blur filter fuses particles into organic blobs
- — Cursor hover repulsion with configurable hover radius
- — Soft alpha-edge tapering driven by a precomputed distance field
- — Two-layer rising and falling particle flow
- — Random break impulses that scatter blobs apart
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
imageConfig
object
{"..."}
Silhouette image the liquid fills, plus its fit mode, size unit, dimensions, and scale.
particleColor
color
#ffffff
Fill color of the particles when color mode is set to Custom.
density
number
30
How densely particles pack the shape; higher spawns more, up to 6000.
particleSize
number
14
Radius of each liquid blob in pixels; larger makes chunkier goo.
hoverEnabled
boolean
false
Turns on cursor repulsion so particles scatter away from the pointer.
hoverRadius
number
90
Radius in pixels of the cursor's push zone when hover is on.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
4
How fast the particles rise and fall; higher is faster.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
colorMode
enum
original
Particle color source: Original samples the image, or Custom uses a fixed color.
