---
title: "ParticleDNA — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Oleksandr Demydov · Backgrounds. Scroll-driven 3D particle DNA"
canonical: "https://framer.elliotli.dev/component/particledna"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/ParticleDNA

# ParticleDNA

Scroll-driven 3D particle DNA

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

![ParticleDNA preview image 1](https://framer.elliotli.dev/og/component/particledna/4fc22ced27b4e192/1600x1200.jpg)

## Summary

Scroll-driven 3D particle DNA

## Description

**Scroll-driven 3D particle DNA for Framer. Anatomically correct. Zero code.**

**Particle DNA builds a double helix from thousands of particles and drives it entirely from scroll. The molecule assembles from a scattered cloud, twists as visitors read, then unzips at a travelling replication fork or disperses into nothing. Three.js and custom GLSL — every particle position is computed on the GPU.**

**Real geometry, not a decorative coil: right-handed, backbones 120° apart so the minor and major grooves actually appear, base pairs bridging the narrow side on a chord offset from the axis.**

**FEATURES**

-   **Rungs that read as lines: each chord's particles are evenly spaced, then pulled onto the centreline by a Line Focus curve**
    
-   **Lock Shape holds the pitch-to-diameter ratio (B-DNA is 1.70) at every viewport size, so the helix never over-winds on mobile**
    
-   **Replication fork unzip: intact duplex behind it, strands peeled into a Y ahead, bonds breaking where it passes**
    
-   **5 presets (Unwound, Coiled, Turbulent, Sweep, Rotor) or Custom for all 61 settings**
    
-   **4 particle roles - two backbones, base pairs, dust - each with its own colour and toggle**
    
-   **Pointer field: Attract, Repel or Glow**
    
-   **Transparent background, layer it over anything**
    

**CONTROLS**

**Preset, Structure, Base Pairs, Layout, Scroll, Life, Cursor, Look, Performance, Elements.**

**HOW TO USE Drop it in with fixed or sticky positioning, pick a preset, choose Page or Element as the scroll driver, set the ending (Hold, Unzip or Disperse), preview.**

**TECHNICAL**

**No scroll listener, no forced layout in hot paths. Render loop cancels fully off-screen. Honours prefers-reduced-motion. Static SVG helix on the Framer canvas. Full GPU cleanup with forceContextLoss(). Pixel ratio capped at 1.5 and frame rate at 60, both adjustable.**

**BEST FOR**

**Biotech, pharma and research heroes, science landing pages, scroll-driven storytelling, genomics product pages.**

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

-   All · #3160

## Details

- **Author**: Oleksandr Demydov
- **Price**: $15.00
- **Published**: 2026-08-30
- **Updated**: 2026-08-30
- **Added**: 2026-08-30
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background