← All components
Motion / component
Liquid Gooey
Liquid shapes merge, stretch and melt while native text and controls stay beautifully crisp.
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Five portable contexts cover Morph, Move, Bend and real Image Melt. Native menu/toggles/slider/card actions stay crisp above the liquid; original artwork is included with the image example.
- Primitive usage includes two real Liquid.Item children. For custom composition, import Liquid from index.ts and give every Item one direct DOM child. Morph follows x/y/scale; Move and Bend observe your child layout, retaining the original springs and silhouette deformation.
- Controlled source demonstrates a caller-owned numeric value and onValueChange. Advanced source includes the four behaviors, a fixed developer-authored filter and typed morph/move/bend/melt settings. All root and Item options are documented below: shadow/filter, observe, transition/delay, radius, dissolve, typed advanced spring/evolve values and image-melt options remain available in the canonical exported types.
- Melt has its own filter/image pipeline: its controls cover actual blur, contrast, waviness, warp, mixing, reach, fade and gravity. Fill, root padding and noise frequency are deliberately absent from that scene. The original SVG has no external references; no photos or paid recipes are bundled.
- Pause and reduced motion make manual changes immediate while native actions remain usable. Hidden/offscreen work suspends. The upstream observation safety poll runs only while visible/active and rests after settling; mirrored mode has no idle frame loop. Replay preserves child work; Reset reapplies the selected scene preset.
- Trusted developer-authored raw SVG filter markup replaces the standard chain; never pass untrusted markup. Large SVG filters can be expensive on high-DPR WebKit. Public root controls are finite and bounded to the accepted engine limits; physical FPS and cross-browser certification are not claimed.
- Legacy Demo.tsx and its existing five-key effect/fill/blur/contrast/spread interface are retained. All engine, scoped style and MIT notice files are included in manual, ZIP and registry output.
React 19.2Modern browsers
Libraries.dev — Jakub Antalik · MIT. See bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
paused | boolean | undefined | Typed primitive option. See the included canonical types and Advanced example for composition. |
replayToken | number | undefined | Typed primitive option. See the included canonical types and Advanced example for composition. |
blur | number | undefined | Goo blur sigma in px — how far apart pieces start bridging. Default 6. |
contrast | number | undefined | Alpha-contrast slope — how sharp the liquid edge is. Default 18. |
fill | string | undefined | Fill of the liquid surface. Any CSS color, `var()` welcome. Default '#fff'. |
shadow | string | undefined | `box-shadow` syntax; rendered on the MERGED silhouette. `inset` layers paint inside the liquid edge (inner rings / top highlights). |
filterPadding | number | undefined | Extra filter-region slack in px for blobs travelling outside the group box. Default 24. |
waviness | number | undefined | Max px the liquid boundary undulates — the silhouette (and its shadows) run through a gentle noise displacement, so edges read as fluid instead of geometric. 0 (default) keeps the calm edge. |
wavinessFreq | number | undefined | Noise frequency of the undulation; lower = longer, lazier waves. |
filter | string | undefined | Escape hatch: raw SVG filter primitives that REPLACE the goo chain (`blur`, `contrast`, `waviness` and the SVG half of `shadow` are then yours to reproduce). The input is `SourceGraphic`; the last primitive's output is what paints. Inset and spread shadows normally read a binarised `shape` result — keep that name if you keep them. |
effect | LiquidEffect | undefined | Liquid.Item: 'morph' (default) or 'move'. |
morph | MorphTuning | undefined | Liquid.Item: Tuning for effect="morph". |
move | MoveTuning | undefined | Liquid.Item: Tuning for effect="move". |
bend | BendTuning | undefined | Liquid.Item: Tuning for effect="bend". |
melt | ImageMeltOptions & { src?: string } | undefined | Liquid.Item: Tuning for effect="melt": the image source (auto-detected from a child <img> when omitted) plus the melt's physics. |
dissolve | boolean | number | DissolveOptions | undefined | Liquid.Item: Melt this item's imagery into a touching neighbour at the contact point — a liquid warp, not a blur. Orthogonal to `effect`: it describes what your CONTENT does where two surfaces meet, not how the surface moves. `true` for the tuned look, `0..1` to scale it, or the raw `DissolveOptions` for full control (wire `active` to your drag). |
x | number | undefined | Liquid.Item: Component-driven position: the library animates both the element and its liquid in perfect sync. Omit x/y and animate the child yourself (CSS, Framer Motion, …) — the liquid follows automatically when the effect needs it, or with `observe` for plain merge. |
y | number | undefined | Liquid.Item: Typed primitive option. See the included canonical types and Advanced example for composition. |
scale | number | undefined | Liquid.Item: Typed primitive option. See the included canonical types and Advanced example for composition. |
transition | Transition | undefined | Liquid.Item: Spring preset/config or `{ duration, ease }` for x/y. Default 'smooth'. |
delay | number | undefined | Liquid.Item: Transition delay in ms (stagger). |
observe | boolean | undefined | Liquid.Item: Plain-merge items animated by YOUR code: makes the liquid follow the child's rendered rect. Implied by `morph.shape`, `dissolve` and effect="move". |
radius | number | CornerRadii | undefined | Liquid.Item: Override the measured border-radius for the liquid (px). |
className | string | undefined | Liquid.Item: Typed primitive option. See the included canonical types and Advanced example for composition. |
style | CSSProperties | undefined | Liquid.Item: Typed primitive option. See the included canonical types and Advanced example for composition. |
children | ReactNode | undefined | Liquid.Item: Typed primitive option. See the included canonical types and Advanced example for composition. |