Radiant Lines
A hyperspace starfield background where scroll speed drives the warp.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/radiant-linesOr from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/radiant-linesUsage
Pass the scroll container if the page scrolls inside an element, not 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 |
displacement | number | 1, star jump on warp |
containerRef | RefObject<HTMLElement | null> | React: window scroll |
container | HTMLElement | Svelte: window scroll |
className | string | React only |
class | string | Svelte only |