Skip to main content
Clever Ops

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.

Preview & code

Loading Ink Dynamics preview

Installation

pnpm dlx shadcn@latest add @cleverui/ink-dynamics

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

Usage

tsx
import { InkDynamics } from '@/components/ui/ink-dynamics'
Exampletsx
import { InkDynamics } from '@/components/ui/ink-dynamics'

export default function InkDynamicsDemo() {
  return (
    <InkDynamics
      eyebrow="Pigment Engine · Lab 07"
      headline="Colour that moves like it was poured, not rendered."
      accentWord={6}
      description="A stable-fluids solver runs behind every hero you ship. The pointer folds pigment through the field, vorticity keeps each swirl alive, and the surface settles like ink in water when you stop."
      primaryCta={{ label: 'Pour the demo', href: '#' }}
      secondaryCta={{ label: 'Solver notes', href: '#' }}
    />
  )
}

API reference

InkDynamics accepts the following props.

PropTypeDefaultDescription
eyebrowstringmono micro-label above the headline
headline*stringdisplay line set over the field, required so the hero always speaks
descriptionstringsupporting paragraph under the headline
accentWordnumber-10-based headline word tinted in the primary ink, -1 keeps the line monochrome
primaryCta{ label: string; href: string }primary action rendered as a filled button link
secondaryCta{ label: string; href: string }secondary action rendered as a quiet text link
readoutstring'SEMI-LAGRANGIAN · VORTICITY CONFINED'mono instrument readout under the description, decorative only
intensitynumber1stir strength multiplier, clamped 0..2, 0 mutes all autonomous motion

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

Frequently asked questions

How do I install the Ink Dynamics component?

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

Ink Dynamics 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 Ink Dynamics 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.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services