Infinite Tendrils

Infinite Tendrils is an interactive background in the UI HUB interactive backgrounds collection. A swarm of motes tracing infinite tendrils through a Canvas 2D field of angles. Each heading is steered by two scrolling value-noise octaves (broad swell + fine fray) while motes move at per-mote pace and leave a fading trail via destination-out compositing.

The component is driven by 10 documented props (colorA, colorB, count, scale, size, trail and 4 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: Canvas 2D; requestAnimationFrame loop; ResizeObserver.

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 Infinite Tendrils?

Canvas flow-field of glowing particle tendrils that curl toward your pointer.

Infinite Tendrils at a glance

Category
Interactive Backgrounds
Pricing
Free to use
Libraries
React
Styling
Tailwind CSS
Configurable props
10
AI prompts
Ready for Advance, Antigravity, Claude Code, Cursor, Lovable

How Infinite Tendrils works

A swarm of motes tracing infinite tendrils through a Canvas 2D field of angles. Each heading is steered by two scrolling value-noise octaves (broad swell + fine fray) while motes move at per-mote pace and leave a fading trail via destination-out compositing. Per-mote colors mix colorA/colorB as an rgba gradient faded at trail ends; with followPointer the pointer grips nearby motes with quadratic-falloff pull so tendrils curl around the cursor.

Technical information for Infinite Tendrils

Category Interactive Backgrounds
Libraries React
Styling Tailwind CSS
Rendering HTML canvas, CSS gradients
State change tendrils drifting on noise currents to tendrils curling around the pointer with eased grip
Props 10 configurable
Usage example Included on this page

What Infinite Tendrils requires

  • Canvas 2D
  • requestAnimationFrame loop
  • ResizeObserver
  • value noise (2 octaves)
  • destination-out trail
  • pointer grip easing
  • devicePixelRatio cap

How to use Infinite Tendrils

  1. Install React if your project does not already use it.
  2. Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
  3. Render <InfiniteTendrils /> in your page using that import path.
  4. Pass any of the 10 documented props to change colours, density, speed or behaviour.

Infinite Tendrils questions

What is Infinite Tendrils?

Canvas flow-field of glowing particle tendrils that curl toward your pointer.

How does Infinite Tendrils work?

A swarm of motes tracing infinite tendrils through a Canvas 2D field of angles. Each heading is steered by two scrolling value-noise octaves (broad swell + fine fray) while motes move at per-mote pace and leave a fading trail via destination-out compositing. Per-mote colors mix colorA/colorB as an rgba gradient faded at trail ends; with followPointer the pointer grips nearby motes with quadratic-falloff pull so tendrils curl around the cursor.

Which category does Infinite Tendrils belong to?

Infinite Tendrils 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 colorA prop do in Infinite Tendrils?

First colour used in the per-mote gradient (defaults to gray). It defaults to "".

What does the colorB prop do in Infinite Tendrils?

Second colour used in the per-mote gradient (defaults to gray). It defaults to "".

Is Infinite Tendrils free to use?

Infinite Tendrils is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.

Which libraries does Infinite Tendrils use?

Infinite Tendrils uses React and is styled with Tailwind CSS.

What does Infinite Tendrils need to run?

Infinite Tendrils needs Canvas 2D, requestAnimationFrame loop, ResizeObserver and value noise (2 octaves).