Stars Travel

A motion-driven SVG background with an animated 'infinite travel' effect.

Space travel looks better in code

import { StarsTravel } from "@/components/stars-travel";
 
export default function StarsTravelDemo() {
  return (
    <div className="relative flex min-h-72 w-full flex-col items-center justify-center overflow-hidden">
      <StarsTravel className="pointer-events-none absolute inset-0" />
      <h1 className="relative z-10 max-w-70 text-center text-3xl text-foreground max-sm:max-w-60 max-sm:text-2xl">
        Space travel looks better in code
      </h1>
    </div>
  );
}

Installation

bunx --bun shadcn@latest add "https://www.kushaj.in/r/stars-travel.json"

Usage

import { StarsTravel } from "@/components/stars-travel";

<StarsTravel>
  <div className="relative z-10 flex h-full items-center justify-center text-white">
    Your content goes here
  </div>
</StarsTravel>

Examples

Custom Animation Speed

Adjust the duration to make the travel effect faster or slower.

Space travel looks better in code

import { StarsTravel } from "@/components/stars-travel";
 
export default function StarsTravelDurationDemo() {
  return (
    <div className="relative flex min-h-72 w-full flex-col items-center justify-center overflow-hidden">
      <StarsTravel
        className="pointer-events-none absolute inset-0"
        svgOptions={{ duration: 1 }}
      />
      <h1 className="relative z-10 max-w-70 text-center text-3xl text-foreground max-sm:max-w-60 max-sm:text-2xl">
        Space travel looks better in code
      </h1>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`children`	`ReactNode`	-	Content layered over the animated stars-travel.
`className`	`string`	-	Classes for the stars-travel container.
`svgOptions`	`object`	`{}`	Animated stars-travel settings.
`svgOptions.duration`	`number`	`2`	Loop duration in seconds.