Uilora Silk

A high-end layered flow simulation creating silk folds with a creamy satin shine and subtle grain texture.

Main Features of Uilora Silk

How to Use Uilora Silk in Next.js

Installation Guide for Uilora Silk

Props

Customize the component with these props

PropertyTypeDefaultDescription
primaryColor
string#2d1b69The main 'Silk' color
secondaryColor
string#050212The deep valley color
speed
number1.0Flow speed
interactive
number0.5Cursor influence (0 to 1)
intensity
number0.4Satin shine amount (0 to 1)

When to Use

Perfect for fashion, luxury branding, or premium agency sites where an elegant, high-viscosity flow adds a sense of quality and smoothness.

Best Practices

Use with dark, rich colors. The 'viscosity' and satin highlights create a weight that looks best with slow, deliberate animations.

Why This Component Matters in Modern UI Development

Silk simulations are notoriously difficult to get right without heavy compute. This GLSL implementation uses multiple layers of noise and specular peaks to create a convincing 'satin' feel at minimal performance cost.

Frequently Asked Questions

QIs the grain adjustable?

The grain is subtle and calibrated for a high-end feel, but you can change the intensity by modifying the shader's grain uniform if needed.

QDoes the mouse warp it?

Yes, it features a 'wake' system where the mouse creates a subtle ripple in the silk as you move across it.

QWhat colors work best?

Deep Indigos, Emerald Greens, and Rich Burgundies highlight the satin specular peaks the best.

Uilora Silk - Mesh Gradients & CSS Backgrounds | Uilora