Three.js Pearl Necklace with Verlet Rope Physics
Overview
A 3D section for React and Next.js with a strand of pearls hanging across it. A small hand-written verlet rope drives an InstancedMesh, so the cursor or a finger pushes the pearls aside, they collide softly, and the strand swings and settles.
The physics is about 220 lines in its own file with no dependencies: pearls on a string with a fixed spacing, pins off the top corners, soft collisions between pearls that aren't neighbours, and the pointer treated as a ray from the camera. The strand is sized to the section, so it hangs in the same curve on a wide monitor and a phone, with the heading inside the curve as real DOM text.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 033 / Hero
Three.js Armillary Sphere Hero with Scroll Animation
On Scroll · Mouse Move · On Load
No. 094 / Hero
Bead Curtain Reveal Hero Animation with Canvas Physics
On Load · Mouse Move · Drag · On Click
No. 110 / Hero
Pull Cord Light Switch Hero Animation with Canvas
On Load · Drag · On Click
(02)FAQ
Three.js Pearl Necklace with Verlet Rope Physics — FAQ
01What does it need from my page?
npm install three, and Tailwind CSS v4. Three.js loads through a dynamic import, in the browser only. There are no images, textures or model files. Pass your display font as the CSS variable --pearl-display.
02Does it work on a phone?
Yes. A finger pushes the strand when it moves sideways, and a vertical swipe scrolls the page as normal. Phones use lighter geometry for each pearl. A slow air current moves the strand now and then, so it isn't static when nothing is touching it.
03Can I use it from the keyboard?
The push itself needs a pointer, but a real button under the strand sets it swinging, and you can rename it with swingLabel.
04Can I change the colours or the number of pearls?
velvet sets the backdrop, gold the clasp and ink the type. pearls takes 40 to 60, and their sizes adjust so the strand always fits the section.
05What happens with reduced motion, or without WebGL?
With reduced motion the rope runs ahead of time, with nothing drawn, until it comes to rest. That settled pose is drawn once, with no loop running. Without WebGL, or on a software renderer, a drawn strand on a CSS velvet stays.