Threads

Shaders 37

About

futuristic minimalistic thread wave background animation

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

Code

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

Usage.tsx

import { Threads } from "@/components/ui/threads";

const ThreadsDemo = () => {
  return (
    <div className="flex w-full min-h-screen justify-center items-center bg-neutral-900 p-4">
      <div 
        style={{ 
          width: '100%', 
          maxWidth: '800px',
          height: '600px', 
          position: 'relative', 
          overflow: 'hidden',
          borderRadius: '8px',
          boxShadow: '0 10px 25px -5px rgba(0,0,0,0.3), 0 8px 10px -6px rgba(0,0,0,0.2)'
        }}
      >
        <Threads
          className="w-full h-full" 
          amplitude={0.7}
          distance={0.05}
          enableMouseInteraction={true}
          color={[1.0, 1.0, 1.0]}
        />
      </div>
    </div>
  );
};

export { ThreadsDemo };