ASCII Liquid Field

Installation

pnpm dlx shadcn@latest add @cleverui/ascii-liquid-field

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

Usage

tsx

import { AsciiLiquidField } from '@/components/ui/ascii-liquid-field'

Exampletsx

import { AsciiLiquidField } from '@/components/ui/ascii-liquid-field'

export default function AsciiLiquidFieldDemo() {
  return (
    <div className="relative min-h-[620px] overflow-hidden bg-background">
      <AsciiLiquidField />
      <div className="relative z-10 mx-auto flex min-h-[620px] max-w-4xl flex-col items-center justify-center px-6 py-24 text-center">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Lab · drag to stir the surface
        </p>
        <h2 className="mt-4 text-4xl font-semibold tracking-tight text-balance text-foreground sm:text-6xl">
          Type, poured like water.
        </h2>
        <p className="mt-5 max-w-md text-sm leading-relaxed text-muted-foreground sm:text-base">
          A monospace grid advected by a seeded flow, the crests ink themselves in the accent,
          and the whole surface stills itself when you stop stirring.
        </p>
      </div>
    </div>
  )
}

API reference

AsciiLiquidField accepts the following props.

Prop	Type	Default	Description
`speed`	`number`	`1`	advection speed multiplier
`glyphs`	`string`	–	density ramp, sparse → dense (index 0 must be the empty glyph); the densest values ink themselves in the accent

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

Related components

Voronoi Membrane

A living cell membrane for React, Lloyd-relaxed voronoi walls drawn as canvas hairlines breathe imperceptibly while pointer pressure tenses them; one seeded cell carries the Tailwind primary tint.

Contour Drift

A living topographic survey sheet: seeded simplex terrain drifts like weather under marching-squares contour hairlines, one surveyed band lit in primary, the cursor gently swelling the land.

Ink Dynamics

A real-time stable-fluids ink field for hero sections: the pointer stirs pigment that curls, swirls and slowly settles, token-inked over paper, with a designed still for reduced motion.

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.

Lumen Cast

A cursor-driven lamp over a feature grid. Canvas 2D casts soft real-time shadows from every tile, near tiles lift toward the light, and keyboard focus steers the lamp for equal access.

Magnetic Field

A multi-body magnetic link field for React, the pointer pulls chips, displaced bodies shoulder neighbours aside, springs carry the system home. Keyboard drives the same physics. Tailwind-themed.

Frequently asked questions

How do I install the ASCII Liquid Field component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/ascii-liquid-field`. 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 ASCII Liquid Field require?

ASCII Liquid Field has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme ASCII Liquid Field 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