Radiant Lines

A hyperspace starfield background — colored streaks from the center, warp speed driven by scroll.

Canvas starfield in the spirit of those GSAP hyperspace scroll demos: stars project from the center as streaks. Scroll velocity (Motion) boosts warp; release and it eases back to a drift.

Radiant Lines

Scroll to warp

Hyperspace starfield

Colored streaks shoot from the center. Scroll to the next page — warp eases with you.

Page two

Keep drifting

Each snap is a new beat. The field stays pinned while you move between pages.

Page three

End of the jump

Release and the stars settle back to a slow drift.

Props

Colors

Star count420

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 containerRef 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

Prop	Type	Default
`colors`	`string[]`	coral / teal / amber / blue / pink / lime / slate
`starCount`	`number`	`420`
`containerRef`	`RefObject<HTMLElement \| null>`	window scroll
`className`	`string`	—