Three.js Satin Ribbon Scroll Animation with Silk Shader
Overview
A long satin ribbon for React and Next.js that draws itself down the page as you scroll, on a sticky full-screen Three.js canvas. A custom silk shader slides the sheen along its folds while three short text blocks take turns beside it.
The ribbon is one mesh generated along a CatmullRomCurve3, with a hand-drawn route, a few half twists and banking into every turn, because a real ribbon can't bend sideways in its own plane. Scrolling reveals it from one end with a clean diagonal cut, and the camera follows the working end down with some weight behind it.
Details
- Category
- Scroll
- Interaction
- On Scroll + Mouse Move
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 052 / Gallery
Three.js 3D Gallery Corridor with Scroll Walkthrough
On Scroll · Mouse Move
No. 090 / Scroll
Three.js Exploded Watch Scroll Animation with Real Time Hands
On Scroll · Mouse Move
No. 024 / Scroll
GSAP Scroll Dial Services Index with WebGL Glass Arch
On Scroll · On Hover · Mouse Move · On Click
(02)FAQ
Three.js Satin Ribbon Scroll Animation with Silk Shader — FAQ
01What does it need from my page?
npm install three (and @types/three for TypeScript), and Tailwind CSS v4. There are no textures or model files. Set --satin-font on a parent to choose the display typeface, which falls back to Didot and Georgia.
02Can I change the colour or the text?
Yes. Pass blocks for the copy, background and ink for the page, and satin for the cloth, as three linear RGB values for its shadow, body and highlight. Three blocks fit the route best, since it leaves room on alternating sides for them.
03Can I change the ribbon's path?
The route is a short list of points at the top of ribbon-stage.ts: x as a share of half the screen's width, then y and z. Change them and the mesh, twists and camera follow.
04How heavy is it?
Two draw calls, the ribbon and its shadow, with up to 72,000 triangles each on desktop and 29,000 on phones. It only draws while on screen, draws every other frame while the ribbon is at rest, and lowers its pixel ratio if the first frames run slow.
05What happens with reduced motion or no WebGL?
With reduced motion you get one still frame of the ribbon, and the three blocks become ordinary sections that scroll over it. With no WebGL, or on a software renderer, the server-rendered drawing of the ribbon takes its place.