--- /** * NoiseBackground — a padded, rounded surface with three softly-blended * radial-gradient layers that drift around a slowly wandering point (random * velocity, bouncing off the padded edges, exponentially smoothed so the * motion settles like a spring), a thin gradient strip along the top edge, * and a static procedural-noise overlay blended with `mix-blend-mode: * overlay`. Content is placed on top through the default slot. */ interface Props { /** Colors for the three drifting gradient layers, as CSS color strings. */ gradientColors?: string[]; /** Opacity of the static noise overlay (0–1). */ noiseIntensity?: number; /** Drift speed of the wandering gradient point (pixels per millisecond). */ speed?: number; /** Add an extra `backdrop-filter: blur()` layer behind the content. */ backdropBlur?: boolean; /** Animate the gradient point; set false to freeze it at the center. */ animating?: boolean; /** Additional classes for the content wrapper (the slotted layer). */ class?: string; /** Additional classes for the outer container. */ containerClass?: string; } const { gradientColors = [ 'rgb(255, 100, 150)', 'rgb(100, 150, 255)', 'rgb(255, 200, 100)', ], noiseIntensity = 0.2, speed = 0.1, backdropBlur = false, animating = true, class: className, containerClass, } = Astro.props; const colors = [ gradientColors[0], gradientColors[1], gradientColors[2] ?? gradientColors[0], ]; /** Inline SVG turbulence noise — replaces the original noise.webp asset. */ const NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; const containerVars = [ `--nb-color-1: ${colors[0]}`, `--nb-color-2: ${colors[1]}`, `--nb-color-3: ${colors[2]}`, `--nb-noise-opacity: ${noiseIntensity}`, ].join('; '); ---

Installation

Install dependencies

Add these files

Configuration

Use it