Radiant Lines

Canvas starfield in the spirit of those GSAP hyperspace scroll demos: stars project from the center as streaks. Scroll velocity boosts warp; displacement scales how far each star jumps. Release and it eases back to a drift.

Installation

pnpm dlx shadcn@latest add @23rd/radiant-lines

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/radiant-lines

Usage

Place it behind content in a relatively positioned container. Pass a scroll container when scroll happens inside an overflow element instead of the window.

"use client"

import { useRef } from "react"
import { RadiantLines } from "@/components/ui/radiant-lines"

export function Hero() {
  const ref = useRef<HTMLDivElement>(null)

  return (
    <div ref={ref} className="relative h-svh overflow-y-auto">
      <RadiantLines containerRef={ref} className="sticky top-0 h-svh" />
      <div className="relative z-10 p-10">Your content</div>
    </div>
  )
}

Props