Three.js Scroll Fabric Ripple — GSAP Cloth Wind Effect

The Three.js Scroll Fabric Ripple snippet turns a plain PlaneGeometry into a suspended banner that catches the wind as the visitor scrolls — nearly taut at the top of the section, increasingly billowing and wave-like the further down they go. There is no cloth physics library involved; the entire effect is layered sine-wave displacement of vertex positions, scaled by a single value scrubbed with GSAP's ScrollTrigger, following the same one-number-drives-everything pattern as the scroll tunnel snippet.

Why a high segment count matters more here than almost anywhere else

The plane is built with PlaneGeometry(WIDTH, HEIGHT, 60, 40) — sixty segments across, forty down. A coarse plane (say 8x6) would turn the same sine math into a blocky, faceted ripple where each wave crest is visibly made of a handful of flat triangles. Cloth reads as fabric specifically because the curvature between crest and trough is smooth, which only happens when there are enough vertices for the displacement to sample the sine function at a fine enough interval. This is the same reasoning behind the dense grid in the scroll wave terrain snippet, just applied to a vertical banner instead of a ground plane.

Displacing from a cached rest pose, not the live geometry

Every frame the snippet writes new Z values into geometry.attributes.position.array, but the X and Y inputs to the sine functions are read from basePositions — a plain Float32Array copy of the geometry's original flat positions taken once, before any animation starts. Computing displacement from the live (already-displaced) array instead of a fixed rest pose is a common mistake: each frame's wave would compound on top of the previous frame's wave, and the fabric would drift and grow more extreme over time instead of oscillating around a stable rest shape.

Recomputing normals is not optional

After the Z values change, the snippet calls geometry.computeVertexNormals() immediately after flagging posAttr.needsUpdate = true. Skipping this step is the single most common bug when displacing geometry by hand: the vertex *positions* move, but MeshStandardMaterial lights the surface using vertex *normals*, and those normals were computed once for the flat rest pose. Without recomputing them, the ripples visibly move but stay lit as if the surface were still perfectly flat — the folds have no shading, so they read as geometrically inert regardless of how much the mesh actually deforms. Recomputing normals every frame is the line that makes the lighting respond to the ripples at all.

Layering three sine terms instead of one

A single Math.sin(x * frequency + time) sweep produces a wave that looks uniform and mechanical — real fabric never oscillates at one clean frequency. The snippet sums three terms: a primary wave along X, a secondary wave along Y with its own frequency and a small X-dependent phase shift, and a slow diagonal "travel" term that moves along both axes at once. None of the three ever fully cancels or reinforces the others, so the combined surface has the irregular, layered motion of a real hung cloth catching gusts from slightly different directions, without needing a full cloth-physics simulation.

Wind strength as the only thing scroll actually controls

Rather than scrubbing a position or rotation, the ScrollTrigger tween drives one abstract value — wind.t, 0 to 1 — and every wave parameter (amplitude, both frequencies) is derived from it each frame: amp = 0.05 + t * 0.55. At t = 0 the banner is nearly flat, like fabric held taut; as t climbs toward 1 both the amplitude and frequency increase together, so the cloth doesn't just move more, it visibly gets *more turbulent*. Because the underlying clock variable keeps advancing regardless of scroll direction, scrolling back up smoothly relaxes the same fabric back toward taut rather than snapping.

Vertex colors for a gradient with zero texture loading

Instead of a fabric texture (which would need loading and UV setup for no strong visual gain at this scale), the snippet bakes a vertical color gradient directly into a color BufferAttribute, interpolating from a deep blue hem to a light sky tone at the top, and enables it with vertexColors: true on the material. This is a cheap technique worth reusing anywhere a smooth tonal gradient is wanted on geometry that already needs a custom attribute pass — no image request, no UV mapping, and it composites correctly with the standard material's lighting response, similar to how the liquid metal sphere snippet also leans on material properties over textures for its look.