Light Sweep

A single, deliberate glint: on hover for a primary card, on arrival for a hero, on an interval for a live badge, or on demand when something finishes.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add light-sweep

Usage

Example

import { LightSweep } from "@/components/galactrex/light-sweep";

<div className="relative overflow-hidden rounded-xl border border-gxui-line p-6">
  <LightSweep />
  Creative
</div>

Source

Installs to components/galactrex/light-sweep.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`trigger`	`"hover" \| "inView" \| "interval" \| "manual"`	`"hover"`	When it sweeps.
`play`	`number`	—	Change it to sweep, for trigger="manual".
`every`	`number`	`4`	Seconds between sweeps for "interval".
`duration`	`number`	`0.9`	Seconds for one pass.
`angle`	`number`	`18`	Tilt of the band in degrees.
`intensity`	`number`	`0.22`	Brightest opacity, 0 to 1.
`color`	`string`	`var(--gxui-glow)`	Light colour.
`className`	`string`	—	Extra classes for the outer element.

Variants

Hover. Sweeps each time a mouse enters the parent.
Completion. `trigger="manual"` with a counter you bump when a task finishes.

Accessibility

Decorative only and aria-hidden; never takes pointer events.

Motion and reduced motion

Moves by transform inside a clipped layer.
Interval sweeps run only while visible.
Reduced motion: no sweep.