DNA Background for React

Q: Can I use my brand colours?

Yes: colors takes two CSS colours, the strands and then the base pairs, theme variables included. You can also set --dna-color-1 and --dna-color-2 in your CSS. The defaults are blue and cyan, a step lighter on a dark page.

Q: How do I make it busier or calmer?

count is how many helices stand in the field, from 1 to 7, 6 by default; intensity sets how strongly they show, subtle, medium or strong. tilt sets how far they lean, 18° by default.

Q: How do I make it turn faster?

Pass speed, a multiplier: 1 is a turn every 8 seconds for the near helix (the far ones turn slower), 2 twice as fast, 0.5 half as fast.

A field of DNA double helices turning slowly at different depths, the near one large and sharp, the far ones small and out of focus. For React with Base UI, when a biotech, health or research page wants a scientific motif that moves.

A field of DNA double helices turning slowly behind your content, all leaning the same way: one large and near, partly off the edge, and the rest smaller, fainter and out of focus further back. Each strand widens and brightens as it comes round toward you and thins as it turns away, with the base pairs between them fading toward the far strand. A helix is a short drawing of half a turn, repeated down a tall strip that slides along its axis by exactly one repeat and starts over, because a helix turning on its axis looks exactly like one sliding along it; the strips also sway a little across. It's CSS only, and nothing runs in the browser.

Use it on biotech, health and research pages. For soft waves of colour without the helix use Wavy; for a single trace like a lab instrument, Oscilloscope; for a network of nodes that reads as molecules, Constellation.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { Dna } from "@/components/ui/dna";

<Dna className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Sequencing, in hours</h1>
</Dna>

DNA is a container: whatever you put inside sits on top, in normal flow. The helices span the full height at any shape, sized from the box, with the near one toward the end side (right, or left on a right-to-left page). There's no painted panel: your page's background shows through. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Colors

colors takes two CSS colours, the strands and the base pairs; theme variables give a version in your brand's colours. In a card, count={4} keeps the field lighter.

PreviewCode

Upright

tilt={0} stands the helices upright, here in teal and mint on a dark section, with speed={0.5} for half the pace.

PreviewCode

Accessibility

The helices are decorative: they're hidden from screen readers and never take the pointer, and your content stays on top in normal flow. With reduced motion the field holds its frame, mid-turn. Nothing flashes. At the default intensity the layer shows at 70% on a light page and 80% on a dark one, and the near helix stands at the edge, so a headline in your foreground colour reads over the field; for body text across the near helix, use intensity="subtle" or a soft panel (bg-background/70).

FAQ

How does it turn without JavaScript?

A helix turning on its axis looks the same as one sliding along it. Each helix is a drawing of half a turn (its two strands are one curve half a turn apart), repeated down a strip a turn longer than the box, and one CSS animation slides the strip by exactly one repeat, then starts over: no seam, and no repaint.

How does it look 3D?

Each strand is an outline that widens as it comes toward you, with a strength that follows it round: full at its nearest, a third at its farthest. Each base pair fades from the near strand to the far one. Further back, the helices are smaller, fainter, slower and drawn with a blur, like a lens focused on the near one.

Can I use my brand colours?

Yes: colors takes two CSS colours, the strands and then the base pairs, theme variables included. You can also set --dna-color-1 and --dna-color-2 in your CSS. The defaults are blue and cyan, a step lighter on a dark page.

How do I make it busier or calmer?

count is how many helices stand in the field, from 1 to 7, 6 by default; intensity sets how strongly they show, subtle, medium or strong. tilt sets how far they lean, 18° by default.