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.
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.
Click glowing markers on the helix to reveal glassmorphism cards with titles, subtitles, and details.
Labels stay open until closed.
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.
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.
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.
Aidan Looker
