Components•Liquid text
Components•Liquid text
Liquid text
Type as a viscous surface. Drag across a letter and a sprung trail of blobs pulls a bead of ink off it; let go and surface tension snaps it back into the stroke. Rendered from a signed distance field in a raw WebGL2 shader.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/liquid-textHow to use
import { LiquidText } from "@/components/bjork-ui/text/liquid-text";<LiquidText text="Liquid" viscosity={0.55} // 0 runny, 1 thick trailLength={8} // 2 to 10 sprung blobs blobRadius={32} // CSS px, defaults to 15% of the font size fontWeight={700} tone="dark"/>