Silk
A smooth, flowing background built with React Three Fiber.
Customize
Tweak animation parameters and instantly preview the result.
5
1
1.50
0.00
Installation
npx love-ui@latest add silkUsage
import Silk from "@/components/silk"<Silk
speed={5}
scale={1}
color="#7B61FF"
noiseIntensity={1.5}
/>Props
speed
The animation speed multiplier.
- Type:
number - Default:
5
<Silk speed={8} />scale
The scale of the silk pattern.
- Type:
number - Default:
1
<Silk scale={1.5} />color
The hex color of the silk pattern.
- Type:
string - Default:
"#7B7481"
<Silk color="#22D3EE" />noiseIntensity
The intensity of the noise/grain effect.
- Type:
number - Default:
1.5
<Silk noiseIntensity={2} />rotation
The rotation angle of the pattern in radians.
- Type:
number - Default:
0
<Silk rotation={Math.PI / 4} />