Liquid Metal
A reflective liquid-metal treatment for logos, transparent marks, and standalone metallic forms.
Customize
Repetition
2
Softness
0.1
Shift Red
0.3
Shift Blue
0.3
Distortion
0.07
Contour
0.4
Angle
70
Speed
1
Scale
0.6
Rotation
0
Offset X
0
Offset Y
0
API reference
The wrapper adds playback and runtime safeguards while preserving the
complete Paper LiquidMetal API. See the
Paper Liquid Metal reference for
the full prop table and accepted ranges.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | HTMLImageElement | undefined | Optionally supplies the source shape. Without one, Paper renders the selected generated shape. |
playback | "auto" | "always" | "paused" | "auto" | Controls motion policy. Auto pauses for reduced motion and while the shader is outside the viewport. |
width / height | number | string | "100%" | Sets the canvas CSS dimensions. Size the parent element to establish the visible area. |
maxPixelCount | number | 2073600 | Caps the rendered pixel budget. Override only after measuring the target devices. |
Credits
The rendering engine is Paper Shaders, distributed under the Apache License 2.0. The example uses vivid-layer's own mark. vivid-layer supplies the adapter, playback and loading policies, documentation, and Registry packaging.