ParticleDNA

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.