NK

Search

Search pages, posts, and components

All components

Constellation

Background Effects

Canvas nodes that drift and link with lines when near.

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/constellation.json
Or install manually
  1. 1. Install dependencies

    pnpm add clsx tailwind-merge
  2. 2. Copy the component source into components/library/constellation.tsx

Props

PropTypeDefaultDescription
countnumber48Number of nodes.

Accessibility

  • Decorative canvas with no semantic content to miss.
  • Link opacity falls off with distance, avoiding a solid mesh.
  • Cleans up its raf loop and ResizeObserver on unmount.

Dependencies

clsxtailwind-merge