LightPillar

light-pillar

Raymarches a vertical volumetric light column with noise and two-color shading.

Usage

Basic usage

The default top/bottom color is chart token, and the component comes with absolute inset-0 z-0.

LightPillar

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar />
  <div className="relative z-10 flex h-full items-center justify-center text-sm font-medium text-white/80">
    LightPillar
  </div>
</div>

Customized two-color (original purple→pink)

topColor / bottomColor Gradient blending along the y axis creates color depth.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar topColor="#5227FF" bottomColor="#FF9FFC" intensity={1.1} />
</div>

Fine laser (narrow column·no particles)

pillarWidth fine tune + glowAmount brighten, noiseIntensity=0 remove grain.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar pillarWidth={1.4} glowAmount={0.009} noiseIntensity={0} intensity={1.2} />
</div>

Tilt light beam (slow rotation)

pillarRotation makes the light beam slant, and rotationSpeed slows down the rotation.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar pillarRotation={30} rotationSpeed={0.15} pillarWidth={2.4} />
</div>

When to Use

Use LightPillar when a centered hero needs one continuous volumetric beam rather than a field of independent rays. Its narrow control range supports anything from a soft column to a laser-like line. Choose Lightning for branching arcs, LightRays for rays from an origin, or Lightfall for multiple falling streaks.

Import

import { LightPillar } from "@hulianui/ui"

Props

Name	Type	Default	Description
topColor	`string`	`var(--color-chart-2)`	Beam color at the top; accepts any CSS color and defaults to a theme-aware chart token
bottomColor	`string`	`var(--color-chart-1)`	Beam color at the bottom, blended with `topColor` along the Y axis
intensity	`number`	`1`	Overall brightness multiplier
rotationSpeed	`number`	`0.3`	Rotation and internal-wave speed multiplier; 0 freezes both at their initial state
glowAmount	`number`	`0.005`	Gain applied to accumulated raymarch energy before compression; 0.001–0.02 is recommended
pillarWidth	`number`	`3`	Beam radius in world units; lower values create a thinner, laser-like column
pillarHeight	`number`	`0.4`	Vertical texture scale; higher values pack the internal bands more closely
noiseIntensity	`number`	`0.5`	Screen-space grain strength; 0 renders a clean beam
pillarRotation	`number`	`0`	Beam tilt in degrees, applied by rotating the sampling plane
className	`string`	—	Class name forwarded to the canvas container or fallback root

Slots

Slot	Type	Description
fallback	`ReactNode`	Decorative content rendered inside the static two-color token gradient when reduced motion is enabled; the fallback root is `aria-hidden`

Usage Guidelines

LightPillar is a full-size decorative layer. Use a relative overflow-hidden parent with an explicit height and place foreground content above it with relative z-10.
During SSR, the live root has no canvas. After hydration, a canvas is appended before OGL import and scene setup; if either step fails, that uninitialized or blank canvas remains and LightPillar does not switch to the reduced-motion fallback. Reduced motion instead renders the static two-color beam plus decorative fallback content.
glowAmount is intentionally small (0.005 by default). Adjust it in small increments such as 0.009; large increases quickly clip the beam to white.
CSS variables for topColor and bottomColor require full token names such as var(--color-chart-1). See [[hulian-token-color-var-needs-color-prefix]].
If a full-size canvas is present but hidden, inspect parent backgrounds and stacking contexts; see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].

DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple

Playground

Brightness coefficientRotation speedLight beam thicknessParticle strength

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar
    intensity={1}
    rotationSpeed={0.3}
    pillarWidth={3}
    noiseIntensity={0.5}
  />
</div>

Usage

Basic usage

The default top/bottom color is chart token, and the component comes with absolute inset-0 z-0.

LightPillar

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar />
  <div className="relative z-10 flex h-full items-center justify-center text-sm font-medium text-white/80">
    LightPillar
  </div>
</div>

Customized two-color (original purple→pink)

topColor / bottomColor Gradient blending along the y axis creates color depth.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar topColor="#5227FF" bottomColor="#FF9FFC" intensity={1.1} />
</div>

Fine laser (narrow column·no particles)

pillarWidth fine tune + glowAmount brighten, noiseIntensity=0 remove grain.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar pillarWidth={1.4} glowAmount={0.009} noiseIntensity={0} intensity={1.2} />
</div>

Tilt light beam (slow rotation)

pillarRotation makes the light beam slant, and rotationSpeed slows down the rotation.

tsx

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar pillarRotation={30} rotationSpeed={0.15} pillarWidth={2.4} />
</div>

When to Use

Props

Name	Type	Default	Description
topColor	`string`	`var(--color-chart-2)`	Beam color at the top; accepts any CSS color and defaults to a theme-aware chart token
bottomColor	`string`	`var(--color-chart-1)`	Beam color at the bottom, blended with `topColor` along the Y axis
intensity	`number`	`1`	Overall brightness multiplier
rotationSpeed	`number`	`0.3`	Rotation and internal-wave speed multiplier; 0 freezes both at their initial state
glowAmount	`number`	`0.005`	Gain applied to accumulated raymarch energy before compression; 0.001–0.02 is recommended
pillarWidth	`number`	`3`	Beam radius in world units; lower values create a thinner, laser-like column
pillarHeight	`number`	`0.4`	Vertical texture scale; higher values pack the internal bands more closely
noiseIntensity	`number`	`0.5`	Screen-space grain strength; 0 renders a clean beam
pillarRotation	`number`	`0`	Beam tilt in degrees, applied by rotating the sampling plane
className	`string`	—	Class name forwarded to the canvas container or fallback root

Slot

Type

Description

fallback

ReactNode

Decorative content rendered inside the static two-color token gradient when reduced motion is enabled; the fallback root is aria-hidden

Usage Guidelines

LightPillar is a full-size decorative layer. Use a relative overflow-hidden parent with an explicit height and place foreground content above it with relative z-10.

During SSR, the live root has no canvas. After hydration, a canvas is appended before OGL import and scene setup; if either step fails, that uninitialized or blank canvas remains and LightPillar does not switch to the reduced-motion fallback. Reduced motion instead renders the static two-color beam plus decorative fallback content.

glowAmount is intentionally small (0.005 by default). Adjust it in small increments such as 0.009; large increases quickly clip the beam to white.

CSS variables for topColor and bottomColor require full token names such as var(--color-chart-1). See [[hulian-token-color-var-needs-color-prefix]].

If a full-size canvas is present but hidden, inspect parent backgrounds and stacking contexts; see [[webgl-canvas-rendered-but-invisible-negative-zindex-covered]].

Playground

Brightness coefficientRotation speedLight beam thicknessParticle strength

<div className="relative h-64 overflow-hidden rounded-xl"
     style={{ background: "oklch(0.12 0.02 270)" }}>
  <LightPillar
    intensity={1}
    rotationSpeed={0.3}
    pillarWidth={3}
    noiseIntensity={0.5}
  />
</div>

LightPillar

Usage

Basic usage

Customized two-color (original purple→pink)

Fine laser (narrow column·no particles)

Tilt light beam (slow rotation)

When to Use

Import

Props

Slots

Usage Guidelines

Related

Playground

LightPillar

Usage

Basic usage

Customized two-color (original purple→pink)

Fine laser (narrow column·no particles)

Tilt light beam (slow rotation)

When to Use

Import

Props

Slots

Usage Guidelines

Related

Playground