GradientMotion

Create a flowing gradient sweep for backgrounds, avatar placeholders, or clipped media areas.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use GradientMotion as a decorative animated background. Prefer theme tokens for ordinary surfaces. Its art palette applies to this graphic only and is not a general UI color system.

Choose the graphic with variant, pause it with paused, and adjust the effect with speed, intensity, and related props.
Use a stable seed for a repeatable graphic identity. decorative is enabled by default. Animated colors do not replace theme colors.

Import

import { GradientMotion } from '@snowui-design-system/components';

Usage

Palettes

Directions

Playback

Avatar fallback

Custom colors

Sweep surface

API Reference

Property	Type	Default	Example	Description
`variant`	`GradientMotionVariant`	`"prism"`	`variant={value}`	Glimm palette. avatar is a slow variant without blank frames for default avatar imagery. Legacy cosmic, matrix, electric, inferno, mystic, cyber, neon, plasma, and neatBlob values map to the Glimm palette.
`seed`	`string \| number`	`—`	`seed="Example"`	Seed for preset selection. The same seed consistently selects the same palette.
`speed`	`number`	`1`	`speed={42}`	Multiplier for animation speed.
`duration`	`number`	`800`	`duration={42}`	Baseline Glimm sweep duration in milliseconds.
`size`	`number \| string`	`—`	`size="Example"`	Set width and height together.
`width`	`number \| string`	`—`	`width="Example"`	Graphic width.
`height`	`number \| string`	`—`	`height="Example"`	Graphic height.
`radius`	`number \| string`	`"inherit"`	`radius="Example"`	Corner radius. Inherits the outer container by default so Avatar can clip it.
`intensity`	`number`	`1`	`intensity={42}`	Glimm peakAlpha, clamped to the range 0–20.
`paused`	`boolean`	`false`	`paused`	Pause the animation.
`decorative`	`boolean`	`true`	`decorative`	Treat the graphic as decoration; true emits aria-hidden="true".
`direction`	`GradientMotionDirection`	`"ltr"`	`direction={value}`	Direction of the light sweep.
`bandTight`	`number`	`14`	`bandTight={42}`	Gaussian tightness of the Glimm band. Larger values make the sweep band narrower.
`waveAmount`	`number`	`1`	`waveAmount={42}`	Strength of the Glimm edge wave and overall avatar motion, in the range 0–20.
`rippleAmount`	`number`	`1`	`rippleAmount={42}`	Strength of fine ripples, in the range 0–20.
`brightness`	`number`	`1`	`brightness={42}`	Brightness multiplier for Glimm band RGB, in the range 0–20.
`colorSpeed`	`number`	`1`	`colorSpeed={42}`	Time-phase speed multiplier for custom colors, in the range 0–20. At 0, colors stop flowing.
`highlightIntensity`	`number`	`1`	`highlightIntensity={42}`	Multiplier for Fresnel and specular highlights, in the range 0–20. At 0, highlights are disabled.
`colors`	`GradientMotionColors`	`—`	`colors={value}`	Four HEX sample colors around a cycle. The component derives a mean, sine term, and cosine term for a continuous Glimm palette that flows with time phase.
`loopMotion`	`LoopMotionConfig`	`—`	`loopMotion={value}`	Override the Frame loop bridge configuration; paused=true always takes precedence. Shader timing still uses speed, duration, and paused. Defaults to a linear infinite loop based on duration.