The RNA Lines component creates glowing flowing double-helix curves with organic twisting, phase sways, and interactive pointer sways.
Preview
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/rna-lines.json
Basic Example
import { RnaLines } from "@/registry/klarden-ui/rna-lines";
export default function App() {
return (
<RnaLines
speed={1}
opacity={0.8}
className="h-screen w-full"
/>
);
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
speed | number | 1 | Animation speed multiplier. Higher values = faster animation. |
opacity | number | 0.8 | Canvas opacity (0-1). Use to blend with background layers. |
className | string | — | Additional CSS classes for the container. |
children | ReactNode | — | Overlay content to display on top of the RNA lines background. |