---
title: "Interactive DNA — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Aidan Looker · Interactive. What is Interactive DNA?"
canonical: "https://framer.elliotli.dev/component/interactive-dna"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Interactive DNA

# Interactive DNA

Clickable 3D helix visualization

[View on Framer](https://framer.com/marketplace/components/interactive-dna/?via=elliot-li)

![Interactive DNA preview image 1](https://framer.elliotli.dev/og/component/interactive-dna/7acce191b41e3630/1600x1200.jpg)

## Summary

What is Interactive DNA?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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.

## Questions or custom requests?

-   We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au).
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10199

## Details

- **Author**: Aidan Looker
- **Price**: $7.00
- **Published**: 2026-01-12
- **Updated**: 2026-06-13
- **Added**: 2025-12-27
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step