nova3
Demo · vanilla three.js

A scroll-scrubbed particle section, living inside an ordinary page.

Everything above and below this point is normal page content with normal scrolling. The section in the middle pins itself, plays through, and releases — no scroll hijacking, no locked body, no fight with your theme.

This page deliberately sets overflow-x: hidden on html and body, and wraps the section in a constrained column that also clips. Those are the two things that normally kill position: sticky. The runtime detects and repairs them.

↓ Keep scrolling

502

Entries to date

Every site we've curated, in one place.
318

Websites

Live, in production, open in a tab somewhere right now.
101

Experiments

Prototypes, demos, dares, the half-finished stuff that pushed the form.
284

Unique makers

Studios and solo builders shipping the work.

Unseen Studio

The studio leaving the deepest mark right now.

What just happened

The headline strings were drawn to an offscreen canvas, read back with getImageData, and every pixel with alpha > 80 became a particle. The glyph outlines are the artwork — which is why the display font is a functional dependency here, not decoration.

The whole choreography is a pure function of one scalar, camera.position.z. Scroll progress comes from the section's own getBoundingClientRect(), so it follows whatever drives scrollTop — including smooth-scroll libraries, which are usually an enemy of this kind of effect.

2.6 KBgzipped boot gate. three.js is a separate chunk that only loads when the section is a viewport away.
No position: fixedAnywhere in the section. That single rule makes a transformed builder ancestor harmless.
Native scrollNothing is intercepted. Keyboard, screen readers and momentum scrolling all work untouched.
Graceful failureNo WebGL, reduced motion or no JS all collapse to a readable one-screen fallback.

Try it

Open the console and run mesh3dDiagnose() — it names the ancestors on this page that would have broken the sticky pin, and which ones the runtime repaired.

Resize to a phone width, or turn on “reduce motion” in your OS, and the section collapses to a single screen instead of leaving you scrolling through several viewports of nothing.