--- /** * SpotlightNew — two symmetric stacks of rotated radial-gradient beams * (left and right) that fade in and sway horizontally forever. Pure CSS * keyframes; zero client JavaScript. * * Place inside a positioned container with `overflow: hidden`. */ interface Props { /** Gradient of the main beam. */ gradientFirst?: string; /** Gradient of the inner secondary beam. */ gradientSecond?: string; /** Gradient of the outer tertiary beam. */ gradientThird?: string; /** Vertical offset of the main beam in px. */ translateY?: number; /** Main beam width in px. */ width?: number; /** Beam height in px. */ height?: number; /** Secondary/tertiary beam width in px. */ smallWidth?: number; /** Seconds per sway half-cycle. */ duration?: number; /** Horizontal sway distance in px. */ xOffset?: number; } const { gradientFirst = 'radial-gradient(68.54% 68.72% at 55.02% 31.46%, hsla(210, 100%, 85%, .08) 0, hsla(210, 100%, 55%, .02) 50%, hsla(210, 100%, 45%, 0) 80%)', gradientSecond = 'radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .06) 0, hsla(210, 100%, 55%, .02) 80%, transparent 100%)', gradientThird = 'radial-gradient(50% 50% at 50% 50%, hsla(210, 100%, 85%, .04) 0, hsla(210, 100%, 45%, .02) 80%, transparent 100%)', translateY = -350, width = 560, height = 1380, smallWidth = 240, duration = 7, xOffset = 100, } = Astro.props; const style = [ `--sn-duration: ${duration}s`, `--sn-x-offset: ${xOffset}px`, `--sn-translate-y: ${translateY}px`, `--sn-width: ${width}px`, `--sn-height: ${height}px`, `--sn-small-width: ${smallWidth}px`, ].join('; '); ---

Installation

Install dependencies

Add these files

Configuration

Use it