Glass Gradient

Glass Gradient

A decorative, softly washed color field. Choose the diagonal wash or two broad bands moving in opposite directions. Every direction fills the container without an image, font or GPU shader.

React

import { GlassGradient } from './components/glass-gradient';

<div style={{ height: 560 }}>
  <GlassGradient variant="bands" tint={0.67} diffusion={30} />
</div>

The React entry imports its CSS. Every setting is a regular prop; className, style and paused are also supported. Keep meaningful headings and controls outside this decorative component. Its inner scene has aria-hidden="true" and accepts no keyboard or pointer input.

Use heightMode="fill" inside a container with a defined height. Use heightMode="fixed" fixedHeight={420} for a scene with its own height. Width always follows the host, including narrow cards. radius clips the scene at the outside edge.

Composition and motion

variant="wash" has a fixed, full-size surface with a diagonal color image at twice the host dimensions. The image moves from its starting position to the opposite end and back in a 20-second cycle at speed 1; the surface itself stays still. variant="bands" uses opposing linear travel across two broad curved bands. Changing direction rebuilds these decorative layers; palette and motion adjustments update their existing nodes.

The four palette colors set the field. tintColor and tint blend a translucent background color with the wash using overlay compositing; lowering tint reveals more saturated colors. The wash does not add a separate white veil. diffusion changes the color-image scale and backdrop blur. At its default 20 the image is 200% of the host size. Backdrop blur is visible when material exists behind the scene; the scale adjustment remains useful on a plain backdrop. In the band direction diffusion also softens its layers. axis controls travel; reverse starts the journey from its other end. At speed={1} the wash reaches its opposite position after 10 seconds and returns after 20 seconds, with ease-in-out timing on each half. The generated settings table lists all bounds and defaults.

HTML and vanilla

Copy the complete HTML bundle to your static host and use component.html with component.css and component.js. Relative URLs work under a subpath. The bundle initializes each host independently from its serialized settings.

For a custom integration, import render and mount from src/core, and load src/styles.css. Both use the same manifest defaults as React.

import { mount } from './components/glass-gradient/src/core';
import './components/glass-gradient/src/styles.css';

const host = document.querySelector<HTMLElement>('#scene');
if (!host) throw new Error('Missing scene host');
const scene = mount(host, { variant: 'bands', speed: 0.75 });
scene.update({ tint: 0.65 });
scene.pause();
scene.resume();
// Call before removing or reusing the host:
scene.destroy();

update merges a validated partial patch into current settings. Reset with scene.update(defaults) after importing defaults from the core. Invalid settings throw before changing the scene. Arbitrary CSS, unknown keys and out-of-range numbers are rejected. destroy() is idempotent, removes listeners and observers, and restores original host children without changing host attributes or styles. Destroy before mounting another controller on the same host.

Accessibility and fallback

Reduced motion and animate={false} show the complete still composition. paused or pause() freezes the current motion. Native document visibility and intersection observers pause moving layers when hidden or offscreen; manual pause remains in force when visibility returns. Without IntersectionObserver, document visibility and manual pause remain available. Without matchMedia, CSS still honors the reduced-motion preference.

Server rendering and no-JavaScript markup show the complete still composition. The HTML delivery also includes the rendered poster. CSS gradients remain visible if backdrop blur is unsupported. Modern browsers use color-mix for the adjustable wash tint. There are no network requests, timers or JavaScript animation loops.

Assets and rights

All color artwork is generated by original local CSS. No images, fonts, icons or npm runtime dependencies are required. NOTICE records the asset inventory; LICENSE contains the source license.