Signature / Moleculestable

Light Leak

Simulated lens flare and light leak overlay with drifting animation.

@glinui/uiComponent: light-leak

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add light-leak

Usage$

Place LightLeak inside a relative container. The warm gradient overlays drift across the surface.

Basic$

Light Leak

TSX

1import { LightLeak } from "@glinui/ui"
2
3export function LightLeakDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
6    <LightLeak />
7    <span className="relative z-10 text-3xl font-bold text-white">Light Leak</span>
8  </div>
9)
10}

Examples$

Cool Tones$

Cool Leak

TSX

1import { LightLeak } from "@glinui/ui"
2
3export function LightLeakCoolDemo() {
4return (
5  <div className="relative flex h-64 w-full items-center justify-center overflow-hidden rounded-xl bg-neutral-950">
6    <LightLeak colors={["#06b6d4", "#3b82f6", "#8b5cf6"]} intensity={0.4} />
7    <span className="relative z-10 text-2xl font-bold text-white">Cool Leak</span>
8  </div>
9)
10}

Accessibility$

Renders with aria-hidden — invisible to assistive technologies.
Purely decorative.

Reduced Motion$

Animations are paused via motion-reduce:[animation:none].

API Reference$

Prop	Type	Required	Default	Description
`blur`	`number`	No	`60`	Blur amount in px
`colors`	`string[]`	No	`["#f97316", "#eab308", "#f43f5e"]`	Colors for the light leaks
`count`	`number`	No	`3`	Number of light leak layers
`duration`	`number`	No	`6`	Animation duration in seconds
`intensity`	`number`	No	`0.3`	Intensity/opacity (0-1)

Source$

TSX

1import { LightLeak } from "@glinui/ui"

packages/ui/src/components/light-leak.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/light-leak.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

LightLeakProps

`LightLeakProps`

Prop	Type	Required	Default	Description
`blur`	`number`	No	`60`	Blur amount in px
`colors`	`string[]`	No	`["#f97316", "#eab308", "#f43f5e"]`	Colors for the light leaks
`count`	`number`	No	`3`	Number of light leak layers
`duration`	`number`	No	`6`	Animation duration in seconds
`intensity`	`number`	No	`0.3`	Intensity/opacity (0-1)