silk-background

Shaders 11

About

Here is animated silk background

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds silk-background to your project and fits it to your theme.

Code

How silk-background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import Component from '@/components/ui/silk-background';

function ComponentDemo() {
  return (
    <main className="relative flex min-h-screen flex-col items-center justify-center bg-white p-8 dark:bg-black">
      <Component
        speed={5}
        scale={1.2}
        color="#1E293B"
        noiseIntensity={1.5}
        rotation={0.1}
      />
      <div className="z-10 text-center">
        <h1 className="text-5xl font-bold text-slate-800 dark:text-slate-200">
          Animated Silk Background
        </h1>
        <p className="mt-4 text-slate-600 dark:text-slate-400">
          This is a demonstration of the reusable silk shader component.
        </p>
      </div>
    </main>
  );
}

export default ComponentDemo;