Type Constellation

Installation

pnpm dlx shadcn@latest add @cleverui/type-constellation

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TypeConstellation } from '@/components/ui/type-constellation'

Exampletsx

import { TypeConstellation } from '@/components/ui/type-constellation'

// 17 characters across two lines, well inside the point budget
const HEADLINE = 'Headlines\nin orbit'

export default function TypeConstellationDemo() {
  return (
    <TypeConstellation
      eyebrow="Kinetic type · Particle field"
      text={HEADLINE}
      seed={7}
    />
  )
}

API reference

TypeConstellation accepts the following props.

Prop	Type	Default	Description
`text`	`string`	`'Type Constellation'`	headline text traced by the points; keep to 24 characters or fewer across at most two lines (split with "\n") so the point budget can hold every glyph
`eyebrow`	`string`	`'Lab · Kinetic type'`	mono micro-label above the heading; pass an empty string to remove it
`as`	`'h1' \| 'h2' \| 'h3'`	`'h2'`	level of the real DOM heading (screen readers, SSR, and the no-WebGL or reduced-motion fallback)
`seed`	`number`	`1`	deterministic seed for dispersal, depth and link sampling; re-roll for a different sky

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Liquid Metal

A contained WebGL specimen cell (ogl) of raymarched liquid chrome: metaballs breathe and orbit, the pointer dents the surface, and the studio environment is derived live from theme tokens.

$Refraction Pane preview$

Refraction Pane

A floating glass pane (ogl) that refracts a token-inked drafting plate: lens distortion, chromatic split and a primary fresnel rim. Ambient drift, spring drag-return, keyboard operable.

Shader Image

A WebGL image surface (ogl) for React, ripple, pixelate, or sway displacement on hover, a token-drawn plate by default, and honest fallbacks to a plain image. Tailwind-themed, self-idling.

Specimen Orb

A contained WebGL specimen viewer: a gyroid TPMS lattice raymarched inside a glass orb, refracting the token bench with a primary glint. Slow ambient orbit, eased drag momentum, arrow keys rotate.

ASCII Liquid Field

A monospace glyph grid flowing like liquid, a seeded scalar field advects through a curl flow, crests ink in the accent, pointer drags stir it. Self-idling React + Tailwind canvas background.

Gooey Type

SVG metaball letterforms for React, a threshold filter fuses heavy glyphs into one liquid membrane; pointer proximity snaps them apart and they re-fuse on release. Tailwind-themed, zero deps.

Frequently asked questions

How do I install the Type Constellation component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/type-constellation`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Type Constellation require?

Type Constellation uses motion and ogl on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Type Constellation to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code