Lumen Cast

Installation

pnpm dlx shadcn@latest add @cleverui/lumen-cast

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

Usage

tsx

import { LumenCast } from '@/components/ui/lumen-cast'

Exampletsx

import { AlertTriangle, History, Layers, Route, ShieldCheck, Sun } from 'lucide-react'
import { LumenCast } from '@/components/ui/lumen-cast'

export default function LumenCastDemo() {
  return (
    <LumenCast
      eyebrow="Datum · drafting platform"
      heading="Every revision, still standing."
      description="Six systems that watch a live structural model instead of a folder of drawings. Move the lamp, or tab through the desk."
      items={[
        {
          label: 'Loads',
          title: 'Load paths, live',
          description: 'Edit one span and watch the consequence travel to its footing before you have scrolled away.',
          icon: Route,
        },
        {
          label: 'Daylight',
          title: 'True daylight',
          description: 'Site and season accurate sun angles, so a glare problem shows up in the model, not the finished wall.',
          icon: Sun,
        },
        {
          label: 'Clashes',
          title: 'Cross-model clash',
          description: 'Structural, mechanical and architectural layers check each other on every save, not just before issue.',
          icon: AlertTriangle,
        },
        {
          label: 'Costing',
          title: 'Takeoffs that move',
          description: "Quantities track the drawing and price against this week's supplier list, not last quarter's.",
          icon: Layers,
        },
        {
          label: 'History',
          title: 'A timeline, not a folder',
          description: 'Every markup and structural change sits on a scrubbable history the whole team can rewind.',
          icon: History,
        },
        {
          label: 'Compliance',
          title: 'Compliance while you draft',
          description: 'Local codes checked against your jurisdiction as you work, not discovered at submission.',
          icon: ShieldCheck,
        },
      ]}
    />
  )
}

API reference

LumenCast accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	`'Lab · light study'`	mono eyebrow label above the heading
`heading`	`string`	`'Light finds the work.'`	section heading
`description`	`string`	`'Move the cursor, or tab through the grid. A single lamp reads the desk, casting real shadows and lifting whatever it lands on.'`	supporting copy under the heading
`items`	`LumenCastItem[]`	`DEFAULT_ITEMS`	feature tiles lit by the cursor lamp, 4–8 recommended

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

Referenced types

Typestsx

export interface LumenCastItem {
  /** mono micro-label eyebrow above the title, e.g. a discipline or module name */
  label: string
  /** tile heading */
  title: string
  /** one or two sentence description in an editorial-technical voice */
  description: string
  /** lucide icon rendered inside the tile */
  icon: LucideIcon
}

Related components

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.

Context Morph Cursor

A page-level cursor companion for React, spring-morphs between caret, halo, grip, and crosshair postures from the element under the pointer. Never hides the native cursor. Tailwind tokens.

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.

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.

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.

Kinetic Variable Hero

A hero headline set on a live variable-font weight field, the pointer blooms wght through the glyphs while scroll scrubs a crest across the line. React + Tailwind, zero dependencies.

Frequently asked questions

How do I install the Lumen Cast component?

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

Lumen Cast uses lucide-react and motion 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 Lumen Cast 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