Double-helix threads cross the frame at different depths, twisting continuously with base-pair rungs between the strands and depth shading on every segment.
Your genome, read in 48 hours
Clinical-grade sequencing from a single sampleOrder a kit · $299
npx shadcn@latest add https://hyperblur.dev/r/bg-helix-threads.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-helix-threads.tsx.
import { BgHelixThreads } from "@/components/hyperblur/bg-helix-threads"
<div className="relative h-96"><BgHelixThreads><h1>Genome in 48 hours</h1></BgHelixThreads></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7fb3ff" | Color of the first strand. Hex color. |
| accent | string | "#ff7ad9" | Color of the second strand. Hex color. |
| background | string | "#05060b" | Background color. Hex color. |
| threads | number | 3 | Number of helices, from 1 to 8. |
| angle | number | -14 | Angle of the helices in degrees. |
| twist | number | 1 | How tightly the strands wind. |
| speed | number | 1 | Twisting speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |