Liquid Silk
Iridescent folds of light ripple across a dark surface like oil on water. Smooth, reflective, and endlessly shifting.
Preview
Usage
import { createLiquidSilk } from 'syaivo';
const effect = createLiquidSilk({
colors: ['#00e5ff', '#d500f9', '#0a1a5c', '#00d4aa', '#f050ff'],
scale: 1.2,
specular: 0.65,
speed: 1,
});
effect.mount(document.getElementById('hero')!);Options
| Option | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | "#020208" | Background color |
colors | string[] | neon cyan, magenta, deep blue | Iridescent color stops |
scale | number | 1.2 | Noise scale — higher = more folds |
normalStrength | number | 1.4 | Normal strength — higher = sharper ridges |
specular | number | 0.65 | Specular intensity |
shininess | number | 16 | Specular exponent |
ambient | number | 0.1 | Ambient light (0–1) |
diffuse | number | 0.55 | Diffuse light (0–1) |
blur | number | 0 | Blur radius in px (0 = no blur) |
grain | number | 0 | Film grain intensity (0–1) |
speed | number | 1 | Speed multiplier |
opacity | number | 1 | Global opacity |
animated | boolean | true | Enable animation |
respectReducedMotion | boolean | true | Honor prefers-reduced-motion |
Dynamic Updates
effect.update({ scale: 2, specular: 0.9 });Example
Introducing your product
Build something
people remember
A polished experience starts with the details. Ship interfaces that feel considered from the first pixel.
Get startedDocumentation