Skip to content

Verlet Cloth Banner

A banner hanging from its fixings as real Verlet cloth — previous-position integration, relaxation passes and a fixed timestep behind an accumulator.

Probrutalisteditorialplayful
Category
Animations
Added
2026-09-21
Deps
none
Updated
2026-09-21

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview
verlet · fixed step
sweep the cloth · 4 relaxation passes

Props

16
10
4
0.32
No runtime dependencies
"use client";

import { useEffect, useRef } from "react";

/**
 * A hanging banner simulated as real Verlet cloth.
 *
 * VERLET STORES THE PREVIOUS POSITION, NOT A VELOCITY. Motion is implied by
 * (pos - prev), which is what makes the integrator so stable — and is also the
 * trap. Snapping a particle to the pointer without moving prev with it
 * implies a velocity of the whole jump distance in one step, and the cloth
 * detonates. Every direct move here moves prev by the same amount.
 *
 * CONSTRAINTS NEED RELAXATION PASSES. Satisfying each link once leaves the
 * sheet rubbery, because fixing one link breaks its neighbour. Three to five
 * passes per step converge it; far more just makes it rigid and jittery.
 *
 * THE TIMESTEP MUST BE FIXED. Implied velocity is measured PER STEP, so

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this animation

Verlet integration is the reason cloth simulations are short enough to read: there is no velocity stored anywhere, only the previous position, and the motion is whatever gap sits between that and the current one. Position updates therefore stay stable under constraints that would make a velocity-based integrator oscillate. The same property is the trap everyone falls into. Because velocity is implied rather than stored, assigning a new position to a particle without moving its previous position by the same amount tells the system that the particle covered that entire distance in one step — so dragging the cloth with a pointer, or clamping a point to a floor, injects an enormous impulse and the sheet detonates. Two more details separate a working cloth from a rubbery one. The distance constraints have to be relaxed several times per step, because satisfying one link breaks the link beside it; three to five passes converge, and far more only makes the sheet rigid and jittery. And the timestep must be fixed, since implied velocity is measured per step rather than per second: feeding a variable frame delta into Verlet silently rescales every velocity in the system, so a single long frame throws the cloth off screen. An accumulator runs whole steps at a constant delta and carries the remainder, with the incoming delta clamped so a backgrounded tab cannot return and run hundreds of steps at once. One diagonal brace per cell stops the mesh folding flat like a parallelogram, and pinning two or three fixings rather than the whole top edge is what makes it read as a hanging object instead of a stretched texture.

Curator’s note

Verlet has no velocity field — it is the gap between this position and the last one. Move a particle without moving its history and you have handed it the whole jump as speed.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.

canvashalftoneprint
Featured
NewPro

A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.

canvasgenerativesimulation
Featured
NewPro

Pendulum Menu

animations

Menu items that hang from a rail and swing on real pendulum physics, nudging their neighbours.

menuphysicspendulum