Bloom art

Bloom Art is not the same surface as a bloom backdrop. A bloom backdrop is a flat gradient (see Blooms). Bloom Art is a composed painterly orb — five canonical variants — used as the visual top of .value-card on marketing and as the bloom backdrop behind chat-result mocks in app.

Three bloom surfaces — at a glance

The third column above is Bloom Art. The first two are gradient backdrops (no-veil / with-veil). Different primitives, different legibility contracts.

Anatomy of a Bloom Art variant

Each variant carries:

1. Sky background
2. Multi-wash radial ellipses (motion-blurred)
3. Refractive core (soft halo)
4. Subject silhouette
5. Motion-blurred streaks (vertical for 1, 2, 4, 5; diagonal for 3)
6. Specular highlight
7. Grain (fractal noise)
8. Vignette
9. Glass rim

All five canonical variants

Variants are referenced by number in the BLOOM_VARIANTS config. Reach for a numbered variant via the BloomArt component:

import { BloomArt } from "@matter/components";

<BloomArt variant={1} />  // pink/peach sunset — ValueCard top
<BloomArt variant={2} />  // teal tulip
<BloomArt variant={3} />  // lime diagonal sweep
<BloomArt variant={4} />  // blue/violet vertical
<BloomArt variant={5} />  // lavender/peach corner

Family pairing — every family × every surface

Each row pairs a .bloom-* family (no veil → with veil) with a hue-adjacent Bloom Art variant.

Where they ship

• Marketing .value-card — variant 1 is the canonical hero.
• Chat-result mocks (app) — randomized variant per result, seeded by request ID.
• OG images — variant 3 for technical content, variant 5 for brand surfaces.

Motion

The composition itself is static SVG — no per-frame keyframes. The "motion" in the name refers to the visual language: motion-blurred streaks, motion-blurred washes (feGaussianBlur with a horizontal-strong stdDeviation).

Compose this with the m-bloom-rise keyframe from @matter/tokens/css/motion-recipes for the stream-in animation when a card appears. The keyframe stays under prefers-reduced-motion: reduce.

.bloom-art {
  animation: m-bloom-rise var(--motion-deliberate) var(--ease-standard) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .bloom-art { animation: none; }
}

Source

The canonical variant config lives at packages/components/src/BloomArt/ (BLOOM_VARIANTS). Single source — the storybook, this design site, and production all read from the same object.