Nebula Text Halo React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install three @react-three/fiber @react-three/drei

CSS Modules

Usage

Matches your current playground settings.

import NebulaTextHalo from "./NebulaTextHalo";

export default function Example() {
  return (
    <NebulaTextHalo
      text={"Out of the ordinary."}
      accentText={""}
      colors={[
        "#09080f",
        "#5931b7",
        "#ca6eb0"
      ]}
      intensity={0.55}
      tilt={0.35}
      parallax={0.65}
      textColor={"#f3efff"}
      fontSize={"clamp(2rem, 5vw, 4.5rem)"}
    />
  );
}

Using Nebula Text Halo

Supply the main heading through text and optional supporting copy through accentText. minHeight reserves space for the halo.

Adjust textColor independently of the background palette. Reduce intensity when the heading needs stronger contrast.

Props

Name	Type	Required	Default	Description
text	string	No	""	Main text rendered over the animated colour field.
accentText	string	No	""	Optional smaller line rendered beneath the main title, useful for taglines or callouts.
className	string	No	undefined	Additional CSS class names, merged with base component styles.
colors	string[]	No	["#020617", "#22d3ee", "#e879f9"]	Array of up to three hex colors used to paint the nebula backdrop from base to accent.
intensity	number	No	0.8	Overall brightness and strength of the nebula glow. Lower values feel softer and more subtle.
tilt	number	No	1	How dramatically the headline tilts in 3D as you move the pointer.
parallax	number	No	1	How far the glow and nebula respond to pointer movement for a parallax feel.
minHeight	number	No	260	Min Height.
textColor	string	No	"#f3efff"	Foreground text colour.
fontSize	string	No	clamp(2rem, 5vw, 4.5rem)	CSS font size for the headline.