BloomArt

Reach for BloomArt when you need the painterly liquid-glass orb that defines Matter's visual identity — typically behind a Glass-card overlay, in a marketing hero, or as a section divider in long-form pages. The five variants map to the four canonical bloom families (peach, lavender, sage, amber) plus one mix (peach × lavender for corner blooms). Choose the variant by lifecycle phase or emotional cue, not by available pixels — the variants have semantic weight.

Don't reach for BloomArt as a generic background image. It's a specific painterly identity — overuse cheapens it. Don't use it for surfaces that need to be themeable (BloomArt is a fixed visual asset, not a tokenised surface). Don't use it for marketing surfaces that need to read on a photographic background either — the painterly orb conflicts with photographic texture.

Do — place BloomArt inside a sized container (height: 280px) or pass height directly. The SVG scales via preserveAspectRatio="xMidYMid slice".

Don't — render BloomArt without sizing context. The SVG fills its parent; an unsized parent produces a 0-height bloom.

Anatomy

A single SVG that paints the bloom via radial gradients, masked specular highlights, and Gaussian blurs. All scene data lives in ./bloom-variants.ts; this file owns layout and filter wiring only.

The wrapping <div> accepts standard sizing — style.height is forwarded from the height prop. The SVG uses preserveAspectRatio="xMidYMid slice" so the bloom fills the box without distortion.

Variants:

Variant	Tone	Use case
`1`	peach (default)	Primary brand — warm sunrise. Use for "create" or "active" surfaces.
`2`	lavender	Cool dusk. Use for reflective / contemplative surfaces (settings, profile).
`3`	sage	Lime/green diagonal sweep. Use for "complete" or "verified" surfaces.
`4`	amber	Blue/violet vertical bloom. Use for "manage" or "in progress" surfaces.
`5`	peach × lavender	Rare corner bloom. Reserve for accent moments.

Props

Prop	Type	Default	Description
variant	BloomVariant	1	—
className	string	—	—
style	React.CSSProperties	—	—
height	number \| string	—	Optional explicit height. Accepted for ergonomic call-sites that want to size the bloom inline (e.g. `<BloomArt height={240}/>`). The SVG itself scales via `preserveAspectRatio="xMidYMid slice"`, so height is forwarded into `style.height` on the wrapping `<div>`. When omitted, the bloom fills its parent (the canonical pattern — wrap in a sized container — still works unchanged).

height is a convenience — the canonical pattern is to wrap BloomArt in a sized container. Both work.

States

BloomArt has no states. It's a static visual.

Density

Density-agnostic. BloomArt is a hero-tier decoration; the site density toggle has no effect.

Themes

…

In dark, the bloom variants render at adjusted lightness to maintain perceived intensity. In forced-colors, the gradients flatten to a single fill — the painterly identity is lost but the layout is preserved.

Tokens consumed

BloomArt embeds its own color stops in the SVG. It doesn't consume runtime tokens — the variants are fixed visual identities, not themeable surfaces.

Accessibility

Keyboard interactions. None.
ARIA roles and properties. SVG carries aria-hidden="true". Skipped by assistive tech.
Focus order. N/A.
Screen-reader expectations. Not announced.
Reduced motion. Static. The optional BloomBackdrop ambient animation respects prefers-reduced-motion.
Forced colors. Gradients flatten to a single Canvas fill.
WIG rules. Decorative SVG carries aria-hidden (decorative-image rule). No alt text — alt only applies to <img>.

Do / Don't

Do — match the variant to the lifecycle phase. Peach for Create, amber for Manage, lavender for reflective surfaces.

Don't — pick variants arbitrarily. The four canonical families have semantic weight.

Do — compose BloomArt with a Glass overlay. The refraction reads correctly only when there's something to refract.

Don't — render BloomArt under prose without a Glass overlay. The painterly texture fights with reading.

Do — wrap BloomArt in a fixed-height container or pass height directly. The SVG fills its parent.

Don't — render multiple BloomArt elements stacked on the same surface. The painterly identity is the centre; you get one.

Recipes

This component appears in:

The marketing site's hero blocks.
Docs corpus recipe — accent blooms behind hero sections.

Code example

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

export function HeroBackdrop({ children }: { children: React.ReactNode }) {
  return (
    <section style={{ position: "relative", height: 480, overflow: "hidden" }}>
      <BloomArt variant={1} height={480} />
      <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
        <Glass tone="light" padding={48}>{children}</Glass>
      </div>
    </section>
  );
}

Source

packages/components/src/BloomArt