Galaxy
galaxyBuilds a multilayer parallax star field with twinkle, rotation, and pointer repulsion.
Usage
Basic usage
Put it into the relative container and it will be filled. The component comes with absolute inset-0 z-0; the content is placed in z-10.
<div className="relative h-64 overflow-hidden rounded-xl bg-neutral-950">
<Galaxy />
<div className="relative z-10 flex h-full items-center justify-center text-white/80">
Content layer
</div>
</div>Color correction: Hue + Saturation
hueShift rotates the main color, and saturation increases it to make the star points appear colorful.
<Galaxy hueShift={300} saturation={0.4} density={1.4} glowIntensity={0.4} />Central star ring
autoCenterRepulsion > 0 When the star point is repelled outward from the center, it forms the appearance of a star ring in the center of the hollow.
<Galaxy autoCenterRepulsion={2} density={1.2} hueShift={200} mouseInteraction={false} />Pure decorative wallpaper (turn off interaction)
mouseInteraction={false} allows click penetration, suitable for static background.
<Galaxy
rotationSpeed={0.05}
glowIntensity={0.5}
twinkleIntensity={0.6}
starSpeed={0.3}
mouseInteraction={false}
/>When to Use
Use it for a deep-space backdrop behind a hero, launch screen, or large dashboard. Use Ferrofluid for liquid metal, DotPattern for a static dot matrix, or Spotlight for a single pointer focus. Galaxy emphasizes layered parallax, twinkling stars, and pointer repulsion.
Import
import { Galaxy } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| focal | [number, number] | [0.5, 0.5] | Normalized convergence point and center of the galaxy's spread |
| rotation | [number, number] | [1, 0] | View rotation as a cosine/sine vector; [0.707, 0.707] is approximately 45 degrees |
| starSpeed | number | 0.5 | Star-drift speed multiplier |
| density | number | 1 | Star density; 0.5 is sparse and 2 is dense |
| hueShift | number | 140 | Hue offset from 0 to 360; the default produces cyan highlights |
| speed | number | 1 | Overall drift and twinkle speed multiplier |
| mouseInteraction | boolean | true | Enables galaxy offset or repulsion on pointer movement |
| glowIntensity | number | 0.3 | Star-glow intensity |
| saturation | number | 0 | Color saturation; 0 keeps stars nearly white, while higher values reveal hueShift |
| mouseRepulsion | boolean | true | Pushes stars away when true or translates the whole field when false; requires mouseInteraction |
| repulsionStrength | number | 2 | Pointer repulsion strength, only effective when mouseRepulsion=true |
| twinkleIntensity | number | 0.3 | Star point flashing intensity, 0=no flashing |
| rotationSpeed | number | 0.1 | Galaxy automatic rotation speed, 0 = no rotation |
| autoCenterRepulsion | number | 0 | Automatic repulsion from the center; values above 0 open a central cavity surrounded by stars |
| transparent | boolean | true | Preserve alpha so the container background shows through; false renders a solid black deep-space background |
| className | string | — | Root container (or div) |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Static non-WebGL content for SSR, reduced motion, or unavailable WebGL; defaults to a radial gradient |
Usage Guidelines
- OGL/WebGL renders on the client with lazy loading and StrictMode-safe cleanup. SSR and unavailable WebGL show the radial-gradient fallback.
- Place the root in a
relative overflow-hiddencontainer with an explicit height such ash-64. - With
transparent={true}, add a dark container background for a deep-space look. Usetransparent={false}for a built-in solid black background. mouseRepulsionandrepulsionStrengthtake effect only whenmouseInteraction=true.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.12 0.02 265)" }}>
<Galaxy
density={1}
hueShift={140}
glowIntensity={0.3}
twinkleIntensity={0.3}
mouseInteraction={true}
/>
</div>