Gravity Stars

A particle background with animated stars and optional connecting lines. Renders as a visually engaging backdrop for UI elements. Behaves with smooth motion and responsive adjustments. Use for creating immersive hero sections or decorative interfaces.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/gravity-stars

npx layro-cli add @educlopez/gravity-stars

npx layro-cli add @educlopez/gravity-stars

bunx layro-cli add @educlopez/gravity-stars

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { useReducedMotion } from "motion/react";
import { type ReactNode, useEffect, useRef, useState } from "react";

export interface GravityStarsProps {
  /** Foreground content, always painted above the decorative starfield. */
  children?: ReactNode;
  /** Extra classes for the positioned wrapper element. */
  className?: string;
  /**
   * Base star colour. Accepts any CSS colour, a `var(--token)` expression, or a
   * bare custom property name such as `--color-foreground`.