Astra

Floating Lines

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

Floating Lines, a Astra 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 Astra 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.