Liquid Silk

A WebGL sheet of ink-coloured fabric that folds and flows in slow motion, threads of light riding the creases — a quiet full-bleed backdrop for landing pages.

npx shadcn@latest add https://mellowui.com/r/liquid-silk.json

Playground

Woven in a fragment shader

Silk, poured slowly

Domain-warped noise folds like fabric behind your landing page — threads of light ride the creases, stirring faintly where the cursor rests.

Installation

▸ Run the following command

npx shadcn@latest add https://www.mellowui.com/r/liquid-silk.json

▸ Or install manually

Copy the source from the Code tab above.
Place it at components/mellow/liquid-silk.tsx
Import and use.

API Reference

Prop	Type	Default	Description
color	string	—	Cloth colour as an "R, G, B" triplet — defaults to the theme ink.
highlight	string	—	Colour of the light riding the creases, as an "R, G, B" triplet. Defaults to `color`, keeping the sheet monochrome.
speed	number	1	Flow speed multiplier.
intensity	number	1	Overall opacity of the silk, 0–2.
scale	number	1	Pattern zoom — higher is tighter folds.
interactive	boolean	true	Let the pointer gather the cloth and catch the light under it.
children	React.ReactNode	—	Content rendered above the silk.
className	string	—	Additional CSS classes.