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.
What is Chandelier?
Premium cloth simulation with text glyphs rendered on deformable grid cells, gravity, wind, and grab interaction.
Chandelier at a glance
- Category
- Interactive Backgrounds
- Pricing
- Pro component
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Chandelier works
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.
Technical information for Chandelier
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | HTML canvas |
| State change | static hanging cloth to interactive grabbed cloth |
| Props | 7 configurable |
| Usage example | Included on this page |
What Chandelier requires
- Canvas 2D
- Verlet integration
- Constraint solver
- Pointer events
- requestAnimationFrame
How to use Chandelier
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <Chandelier /> in your page using that import path.
- Pass any of the 7 documented props to change colours, density, speed or behaviour.
Chandelier questions
What is Chandelier?
Premium cloth simulation with text glyphs rendered on deformable grid cells, gravity, wind, and grab interaction.
How does Chandelier work?
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.
Which category does Chandelier belong to?
Chandelier is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the background prop do in Chandelier?
CSS background color behind the canvas. It defaults to "#0B0C0E".
What does the baseColor prop do in Chandelier?
Text and peg color (hex or rgb). It defaults to "#00F9AC".
Is Chandelier free to use?
Chandelier is a Pro component on UI HUB. Pro components are labelled in the catalog and come with a documented props table on the component page.
Which libraries does Chandelier use?
Chandelier uses React and is styled with Tailwind CSS.
What does Chandelier need to run?
Chandelier needs Canvas 2D, Verlet integration, Constraint solver and Pointer events.