React Silk Background

Powered by

React

React Three Fiber

Three.js

Remember those hypnotic fabric simulations that made you stop and stare? The ones where silky patterns flow like liquid, creating mesmerizing waves that seem to breathe with life? Most backgrounds settle for static textures or simple gradients that feel flat and lifeless. This React component brings that fluid, organic motion to your interface with procedurally generated silk patterns that ripple and flow in real-time, creating depth and movement that feels genuinely luxurious and alive.

Flowing silk with wave distortion

Watch silky patterns flow and ripple with customizable wave physics and rotation:

import { SilkBackground } from "@/components/ui/shadcn-io/silk-background"export default function SilkBackgroundDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <SilkBackground         speed={3}        scale={1.5}        color="#7B7481"        noiseIntensity={1.2}        rotation={0.2}      />      <div className="absolute inset-0 flex items-center justify-center">        <h2 className="text-2xl font-bold text-white z-10 mix-blend-difference">Silk Background</h2>      </div>    </div>  )}

'use client';/* eslint-disable react/no-unknown-property */import React, { forwardRef, useMemo, useRef, useLayoutEffect } from "react";import { Canvas, useFrame, useThree, RootState } from "@react-three/fiber";// @ts-ignoreimport { Color, Mesh, ShaderMaterial } from "three";// @ts-ignoreimport { IUniform } from "three";import { cn } from '@/lib/utils';type NormalizedRGB = [number, number, number];const hexToNormalizedRGB = (hex: string): NormalizedRGB => {  const clean = hex.replace("#", "");  const r = parseInt(clean.slice(0, 2), 16) / 255;  const g = parseInt(clean.slice(2, 4), 16) / 255;  const b = parseInt(clean.slice(4, 6), 16) / 255;  return [r, g, b];};interface UniformValue<T = number | Color> {  value: T;}interface SilkUniforms {  uSpeed: UniformValue<number>;  uScale: UniformValue<number>;  uNoiseIntensity: UniformValue<number>;  uColor: UniformValue<Color>;  uRotation: UniformValue<number>;  uTime: UniformValue<number>;  [uniform: string]: IUniform;}const vertexShader = `varying vec2 vUv;varying vec3 vPosition;void main() {  vPosition = position;  vUv = uv;  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`;const fragmentShader = `varying vec2 vUv;varying vec3 vPosition;uniform float uTime;uniform vec3  uColor;uniform float uSpeed;uniform float uScale;uniform float uRotation;uniform float uNoiseIntensity;const float e = 2.71828182845904523536;float noise(vec2 texCoord) {  float G = e;  vec2  r = (G * sin(G * texCoord));  return fract(r.x * r.y * (1.0 + texCoord.x));}vec2 rotateUvs(vec2 uv, float angle) {  float c = cos(angle);  float s = sin(angle);  mat2  rot = mat2(c, -s, s, c);  return rot * uv;}void main() {  float rnd        = noise(gl_FragCoord.xy);  vec2  uv         = rotateUvs(vUv * uScale, uRotation);  vec2  tex        = uv * uScale;  float tOffset    = uSpeed * uTime;  tex.y += 0.03 * sin(8.0 * tex.x - tOffset);  float pattern = 0.6 +                  0.4 * sin(5.0 * (tex.x + tex.y +                                   cos(3.0 * tex.x + 5.0 * tex.y) +                                   0.02 * tOffset) +                           sin(20.0 * (tex.x + tex.y - 0.1 * tOffset)));  vec4 col = vec4(uColor, 1.0) * vec4(pattern) - rnd / 15.0 * uNoiseIntensity;  col.a = 1.0;  gl_FragColor = col;}`;interface SilkPlaneProps {  uniforms: SilkUniforms;}const SilkPlane = forwardRef<Mesh, SilkPlaneProps>(function SilkPlane(  { uniforms },  ref) {  const { viewport } = useThree();  useLayoutEffect(() => {    const mesh = ref as React.MutableRefObject<Mesh | null>;    if (mesh.current) {      mesh.current.scale.set(viewport.width, viewport.height, 1);    }  }, [ref, viewport]);  useFrame((_state: RootState, delta: number) => {    const mesh = ref as React.MutableRefObject<Mesh | null>;    if (mesh.current) {      const material = mesh.current.material as ShaderMaterial & {        uniforms: SilkUniforms;      };      material.uniforms.uTime.value += 0.1 * delta;    }  });  return (    <mesh ref={ref}>      <planeGeometry args={[1, 1, 1, 1]} />      <shaderMaterial        uniforms={uniforms}        vertexShader={vertexShader}        fragmentShader={fragmentShader}      />    </mesh>  );});SilkPlane.displayName = "SilkPlane";export interface SilkBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  color?: string;  noiseIntensity?: number;  rotation?: number;}export const SilkBackground = forwardRef<HTMLDivElement, SilkBackgroundProps>(({  className,  speed = 5,  scale = 1,  color = "#7B7481",  noiseIntensity = 1.5,  rotation = 0,  ...props}, ref) => {  // props already contains only DOM props after destructuring above  const domProps = props;  const meshRef = useRef<Mesh>(null);  const uniforms = useMemo<SilkUniforms>(    () => ({      uSpeed: { value: speed },      uScale: { value: scale },      uNoiseIntensity: { value: noiseIntensity },      uColor: { value: new Color(...hexToNormalizedRGB(color)) },      uRotation: { value: rotation },      uTime: { value: 0 },    }),    [speed, scale, noiseIntensity, color, rotation]  );  return (    <div ref={ref} className={cn("w-full h-full relative", className)} {...domProps}>      <Canvas dpr={[1, 2]} frameloop="always" className="w-full h-full">        <SilkPlane ref={meshRef} uniforms={uniforms} />      </Canvas>    </div>  );});SilkBackground.displayName = 'SilkBackground';

Built for React applications with TypeScript and Next.js. Uses React Three Fiber and WebGL shaders for hardware-accelerated 3D rendering that maintains 60fps with complex wave calculations and noise functions. The procedural pattern generation creates infinite, seamless silk textures that never repeat. Perfect for luxury brands, fashion applications, or any interface that needs to feel premium and sophisticated. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/silk-background.json

npx shadcn@latest add https://www.shadcn.io/registry/silk-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/silk-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/silk-background.json

Why static textures feel cheap

Developers add a background image or simple gradient and call it elegant. Maybe they add a subtle CSS animation that moves a few pixels. The problem? Static textures don't convey the fluid, premium quality that silk represents. They don't create emotional connection or communicate luxury.

Flowing silk patterns change everything. They tap into our fascination with natural motion—the way fabric moves in wind, how liquid flows, the organic patterns that emerge from wave interference. The mathematical precision of sine waves and noise functions creates movement that feels both natural and sophisticated.

This component handles the complex 3D setup automatically. Shader uniforms, Three.js mesh scaling, animation loops, and viewport adaptation all work together seamlessly. The result feels like premium digital fabric, not a flat texture overlay.

Features

• Procedural silk patterns generated in real-time using mathematical wave functions
• 3D wave distortion with customizable amplitude and frequency for realistic fabric motion
• Dynamic rotation allowing pattern orientation changes during animation
• Color customization with hex color support and normalized RGB conversion
• Noise integration for organic texture variation and film grain effects
• Performance optimization with React Three Fiber's efficient rendering pipeline
• Responsive scaling that adapts to viewport dimensions automatically
• Hardware acceleration using WebGL shaders for smooth 60fps animation
• TypeScript support with complete prop forwarding and type safety

API Reference

SilkBackground

Wave Mathematics

The silk patterns use layered sine wave calculations:

Style Examples

// Luxury gold silk
<SilkBackground 
  color="#D4AF37"
  speed={2}
  scale={1.2}
  noiseIntensity={0.8}
/>

// Ocean wave effect
<SilkBackground 
  color="#1E40AF" 
  speed={4}
  scale={2.0}
  rotation={0.3}
/>

// Subtle texture overlay
<SilkBackground 
  color="#F3F4F6"
  speed={1}
  scale={0.8}
  noiseIntensity={0.5}
/>

// Fast-flowing animation
<SilkBackground 
  speed={10}
  rotation={1.57}
  scale={3.0}
  noiseIntensity={2.0}
/>

Shader implementation details

Vertex Shader: Handles 3D positioning and UV coordinate mapping. The vertex shader scales the mesh to match viewport dimensions and passes texture coordinates to the fragment shader for pattern calculation.

Fragment Shader: Contains the core silk pattern logic using multiple wave functions, rotation matrices, and noise calculations. The shader processes each pixel independently, creating smooth gradients and wave interference patterns.

Uniforms System: Real-time parameter updates flow from React props through Three.js uniforms to GPU shaders. This allows dynamic color changes, speed adjustments, and pattern modifications without recreating the entire shader program.

Color Space: Uses normalized RGB values (0-1) for shader compatibility, with automatic conversion from hex color codes to the appropriate format.

Performance considerations

3D Rendering: React Three Fiber manages WebGL context creation and animation loops efficiently. The component uses requestAnimationFrame for smooth 60fps rendering while automatically pausing when not visible.

Shader Complexity: The fragment shader performs multiple trigonometric calculations per pixel. On lower-end devices, consider reducing the scale parameter to decrease texture detail and improve performance.

Memory Management: Three.js geometry and materials are automatically disposed when the component unmounts, preventing memory leaks in single-page applications.

Device Pixel Ratio: The canvas automatically adapts to high-DPI displays with dpr={[1, 2]}, providing crisp visuals on retina screens while maintaining performance.

Common gotchas

Container Dimensions: The Three.js canvas fills its parent container completely. Ensure the parent has explicit dimensions or the silk pattern may not render at the expected size.

Color Format: Only hex colors are supported (#RRGGBB format). RGB, HSL, or named colors need to be converted to hex before passing to the component.

Animation Continuity: The wave patterns are time-based and deterministic. Changing props during animation maintains smooth transitions, but large parameter jumps may cause visual discontinuities.

Z-Index Layering: The canvas renders as a standard HTML element. Use CSS z-index for proper layering with other interface elements, and consider mix-blend-mode for text overlays.

Three.js Context: Each component instance creates its own WebGL context. Multiple instances on the same page work fine, but be mindful of GPU resource usage on devices with limited graphics capabilities.

You might also like

Questions developers actually ask