About Interactive DNA

What is Interactive DNA?

Interactive DNA is a 3D WebGL component for Framer that renders an interactive double helix with animated particles and clickable information markers. It combines Three.js rendering with a glassmorphism label system to create an engaging, educational visualization. Use it to explain genetics, highlight research, or add a premium animated element to landing pages, educational sites, or scientific portfolios.

Core Features

Interactive 3D visualization

Renders a double helix with two intertwining strands, connecting base pairs, and animated particles.
The helix rotates automatically, and all elements use emissive materials for a glow effect.

Clickable information markers

Click glowing markers on the helix to reveal glassmorphism cards with titles, subtitles, and details.
Labels stay open until closed.

Customizable appearance

Control helix colors, particle colors, glow intensity, geometry (radius, height, pitch), and particle count (0–200).
Adjust rotation and particle speeds independently for fine‑tuned motion.

Controls inside Framer

All settings are exposed as property controls for visual configuration:

Animation – Auto‑rotate toggle; rotation speed (0.5–10); helix pitch (2–25); particle movement toggle; particle speed (0.1–3).
Colors – Primary helix color; secondary helix color; particle glow color.
Geometry – Helix radius (1–5); helix height (10–40); tube radius (0.1–0.8).
Particles – Particle count (0–200); particle size (0.02–0.3); particle opacity (0.3–1).
Effects – Glow intensity (0.5–3).
Interactive labels – Array of labels with position (0–1 along helix), title, optional subtitle, details array, and custom marker color.

Best use cases

Educational websites – Explain DNA structure, genetics, or molecular biology with interactive labels.
Scientific portfolios – Showcase research, publications, or expertise with a strong visual element.
Healthcare & biotech – Highlight services, treatments, or innovations in genetics and medicine.
Landing pages – Add a premium animated element that draws attention and supports storytelling.
Product launches – Ideal for biotech, health‑tech, or science‑related product announcements.

Drop Interactive DNA onto your canvas, customize colors and labels, and you have a production‑ready 3D visualization in minutes.