Cosmic Heading React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import CosmicHeading from "./CosmicHeading";

export default function Example() {
  return (
    <CosmicHeading
      text={"React components from the cosmic frontier"}
    />
  );
}

Using Cosmic Heading

Use a short headline to make the changing letter weight easy to read. Supply the copy through text and style the wrapper through className.

Keep this effect for a prominent heading rather than long body copy. Check that the heading remains legible at the smallest intended font size.

Props

Name	Type	Required	Default	Description
text	string	No	""	Main heading text to render with the gradient + variable-font proximity effect.
className	string	No	undefined	Additional CSS class names, merged with base component styles.