DNA Helix Cursor

Component 1

About

A custom canvas cursor trail that draws two sine-wave strands spiraling behind the mouse like a double helix, with hover and click reactive animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DNA Helix Cursor to your project and fits it to your theme.

Code

How DNA Helix Cursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import DNAHelixCursor from "@/components/ui/dna-helix-cursor";
import { useRef } from "react";

export default function DNAHelixCursorDemo() {
  const containerRef = useRef(null);

  return (
    <div
      ref={containerRef}
      className="relative w-full h-screen overflow-hidden bg-[#0a0a12] flex flex-col items-center justify-center gap-8"
      style={{ cursor: "none" }}
    >
      <DNAHelixCursor
        containerRef={containerRef}
        config={{
          color1: "#7c5cfc",
          color2: "#5cf4fc",
          amplitude: 16,
          speed: 0.09,
          pointerAnim: true,
          pointerScale: 3.2,
          clickAnim: true,
          clickAmpBoost: 45,
        }}
      />

      <p className="max-w-md text-center text-sm text-white/60">
        Move your mouse inside this area to see the double-helix trail spiral
        behind the cursor.
      </p>

      <div className="flex gap-4">
        <button className="btn px-5 py-2 rounded-full bg-white text-black text-sm font-medium">
          Primary
        </button>
        <a
          href="#"
          className="px-5 py-2 rounded-full border border-white/30 text-white text-sm font-medium"
        >
          Hover Link
        </a>
      </div>
    </div>
  );
}