DNAHelix

An animated 3D double helix with two colored strands and connecting rungs. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading DNA helix...

Strand 1 Color

Strand 2 Color

Speed: 1.0

import { DNAHelix } from "@mantleui/react/three";

<DNAHelix
  color1="#3b82f6"
  color2="#ef4444"
  speed={1}
  height={400}
/>

Prop	Type	Default	Description
`color1`	`string`	`"#3b82f6"`	First strand color.
`color2`	`string`	`"#ef4444"`	Second strand color.
`rungColor`	`string`	`"rgba(255,255,255,0.3)"`	Connecting rung color.
`speed`	`number`	`1`	Rotation speed multiplier.
`radius`	`number`	`0.5`	Helix radius.
`turns`	`number`	`3`	Number of helix turns.
`height`	`string \| number`	`400`	Container height.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

color1"#3b82f6"

string

First strand color.

color2"#ef4444"

string

Second strand color.

rungColor"rgba(255,255,255,0.3)"

string

Connecting rung color.

speed1

number

Rotation speed multiplier.

radius0.5

number

Helix radius.

turns3

number

Number of helix turns.

height400

string | number

Container height.

backgroundColor"transparent"

string

Background color of the container.