A double helix of dots twists in sine motion, with depth shading and rungs that stretch between the strands.
Sample HG-0097
Whole genome, 30x coverage
Reads
1.2M
Quality
Q38
Time left
06:12
npx shadcn@latest add https://hyperblur.dev/r/loader-dna-helix.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/loader-dna-helix.tsx.
import { LoaderDnaHelix } from "@/components/hyperblur/loader-dna-helix"
<LoaderDnaHelix size={48} rungs={9} label="Sequencing sample" />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 48 | Height of the helix in pixels. Dot size and width follow from it. |
| color | string | "#2f7bff" | Color of the first strand and the top of each rung. |
| accent | string | "#ff6b9a" | Color of the second strand and the bottom of each rung. |
| speed | number | 2.4 | Seconds for the helix to complete one full twist. |
| rungs | number | 10 | Number of dot pairs along the helix, from 4 to 20. |
| label | string | Visible caption under the loader. Without it, Loading is announced to screen readers only. |