Threads — Bounce Kit

Install

npx bouncekit@latest add threads

Import

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

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

<div className="relative h-96 w-full">
  <Threads
    color={[0.83, 0.66, 0.33]}
    amplitude={1}
    speed={0.5}
  />
</div>

// WebGL flowing threads animation.
// Renders on a full-size canvas.

API Reference

Prop	Type	Required	Description
`color`	`[number, number, number]`	—	RGB color tuple for threads.
`amplitude`	`number`	—	Wave amplitude. Default: 1.
`speed`	`number`	—	Animation speed. Default: 0.5.

Source

src/components/ui/threads.tsx