React Bits

Floating Lines

Ribbons of fine glowing lines that drift in waves, part around the cursor and curl when clicked.

Floating Lines, a React Bits component

Use Floating Lines in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/FloatingLines-TS-TW
How to install React Bits components

Related components

  • Threads

    Flowing threads that fray apart and part around the cursor, from fine silk to contour lines.

  • Ghost Fibers

    Layered ribbons of fine glowing fibers that twist, fold and drift through soft depth of field.

  • Waves

    Dense flowing lines that sway like silk, bend around the cursor and spring back into place.