Chandelier

Chandelier is an interactive background in the UI HUB interactive backgrounds collection. A cloth simulation with text rendered on a deformable grid. The cloth hangs from pin points at the top and responds to gravity, wind, and mouse interaction. Characters from a configurable phrase are drawn on each quad cell, scaling and rotating with the cloth's deformation.

The component is driven by 7 documented props (background, baseColor, phrase, density, speed, hover and 1 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: Canvas 2D; Verlet integration; Constraint solver.

Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.