Neon Bend

Installation

pnpm dlx shadcn@latest add @cleverui/text-neon-bend

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

Usage

tsx

import { TextNeonBend } from '@/components/ui/text-neon-bend'

Exampletsx

import { TextNeonBend } from '@/components/ui/text-neon-bend'

export default function TextNeonBendDemo() {
  return (
    <div className="relative mx-auto flex min-h-[440px] max-w-3xl flex-col items-center justify-center gap-6 overflow-hidden px-4 py-16 sm:px-6">
      <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · bend, pump, ignite
      </p>
      <TextNeonBend as="h1" text="OPEN LATE" caption="NE · 12 TORR · 6 KV · CH. 3" className="w-full" />
      <p className="max-w-md text-center text-sm leading-relaxed text-muted-foreground">
        Unlit glass bends on first. Two slow swells warm the gas, then the sign
        holds steady. No flicker loop. Ink core for AA.
      </p>
    </div>
  )
}

API reference

TextNeonBend accepts the following props.

Prop	Type	Default	Description
`text`*	`string`	–	budget ≤ 14 chars, one tube run per word
`caption`	`string`	`'NE · 12 TORR · 6 KV'`	mono transformer-plate caption beneath the sign
`delay`	`number`	`0.15`	seconds before fabrication begins
`as`	`'h1' \| 'h2' \| 'h3' \| 'p'`	`'h2'`	heading level of the sr-only text

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

Related components

Orbit Caption

A mono micro-caption orbits the headline on an elliptical SVG path, slow as a survey satellite, hover or focus eases the orbit to a halt so the caption can be read.

Stencil Cut

The headline is die-cut, never painted, a cutter traces glyph outlines, waste plates lift away, and React text reads as ink through stencil holes. Tailwind-token subtractive typography.

Compositor's Case

Type set from a visible case, sorts fly from their compartments, land mirrored in the composing stick, and one proof pull flips the React headline readable. Tailwind-token letterpress craft.

Dot Matrix Print

The headline prints as a dot-matrix raster, a carriage sweeps once and canvas dots sized by ink density pop in column by column. React and Tailwind tokens via probes; one accent word in primary.

Frottage Rubbing

A graphite rubbing over hidden relief, crayon passes sweep the sheet and the React headline surfaces where pigment catches. Canvas text effect themed by Tailwind token probes.

Ink Bleed

Letters develop like ink on wet paper, each glyph starts as a soft bleed and contracts to crisp edges, neighbouring bleeds wicking together mid-pass. One development, then stillness.

Frequently asked questions

How do I install the Neon Bend component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/text-neon-bend`. 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 Neon Bend require?

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

Can I theme Neon Bend 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