The remote MCP server is temporarily paused due to usage limits. Learn more

Silk Background

Fluid, organic procedural silk wave background powered by WebGPU and WGSL shaders.

Made by Axyl

Interactive procedural silk shader waving smoothly across a canvas.

Installation

npx shadcn@latest add @soralabs/silk-background

File Structure

silk-background.tsx

Usage

import { SilkBackground } from "@/components/sora-ui/shaders/silk-background";

export default function HeroSection() {
  return (
    <div className="relative min-h-screen w-full overflow-hidden">
      <SilkBackground className="absolute inset-0" />
    </div>
  );
}

Props

Prop	Type	Default
`highlightColor?`	`string`	`"#3a1220"`
`shadowColor?`	`string`	`"#131316"`
`scale?`	`number`	`1.1`
`noise?`	`number`	`1`
`speed?`	`number`	`0.5`
`className?`	`string`	-
`ref?`	`Ref<HTMLCanvasElement>`	-

Skeleton Shimmer

GPU-accelerated shimmer placeholder primitives with zero-layout-shift sizing and optional View Transitions API wipe reveals.

Flow Lines Background

Animated flowing gradient lines background driven by Perlin noise, powered by WebGPU and WGSL shaders.

Built by Axyl. A motion-first component registry for React.

Last updated: 11/13/2026

Silk Background

Installation

File Structure

Usage

Props

On this page