Tubelight

The heading serif is bent into outline glass tubing on a 2D canvas, drawn in layered passes — spill, bloom, a hot core and a specular streak — inside a rounded framing tube fed by two electrodes. The gas takes its colour from --primary: in dark mode the tubes glow, in light mode they read as unlit daylight glass on paper with a cast shadow. The sign breathes gently and one letter drops out and re-strikes on a seeded flicker schedule.

Installation

CLI

npx @modus-ui/cli add tubelight

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/tubelight.tsx.
3. Paste the code.

Usage

import { Tubelight } from "@/components/ui/tubelight";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full">
      <Tubelight text={"Open\nlate"} />
    </div>
  );
}

Any text the heading font can set is supported; use \n for a new line.

Props