BloomBackdrop

Reach for BloomBackdrop when a section needs a painterly bloom behind content — typical mounts include the marketing-site hero, the dashboard's onboarding card, and any feature-introduction surface. The pattern is "BloomBackdrop in position: absolute behind a content container in position: relative; z-index: 1." The optional veiled flag adds a frosted .bloom-veil overlay that softens the bloom so text on top stays legible without a Glass card.

Don't reach for BloomBackdrop for dense data surfaces (tables, lists). The painterly texture fights with reading. Don't use it for repeated rows either — the bloom is hero-tier; one per page is usually right.

Do — render BloomBackdrop inside a <Section style={{ overflow: 'hidden' }}> with a <Container style={{ position: 'relative', zIndex: 1 }}> for the content.

Don't — render BloomBackdrop without overflow: hidden on the parent. The bloom paints outside the section bounds.

Anatomy

Two structural pieces:

BloomArt instance. Positioned absolute with inset: 0. The variant prop forwards to BloomArt.
Veil overlay (optional). A .bloom-veil div positioned absolute over the bloom, with a frosted-glass treatment. Activated by veiled flag. Pure CSS — backdrop-filter blur and saturation.

The whole component is wrapped in a <div aria-hidden="true"> so the backdrop is skipped by assistive tech.

Props

Prop	Type	Default	Description
veiled	boolean	false	—

Also accepts BloomArtProps.

variant mirrors BloomArt's variants (1–5). veiled toggles the frosted overlay.

States

Stateless. The bloom variant and veil are configuration, not state.

Density

Density-agnostic. BloomBackdrop is hero-tier.

Themes

…

In dark, the bloom variants render at adjusted lightness. The veil's backdrop blur and saturation also adapt — slightly more saturation in dark to maintain perceived depth.

Tokens consumed

No tokens match.

The veil reads --surface-veil (light) or --surface-veil-dark (dark). The bloom embeds its own gradients via BloomArt and consumes no runtime tokens.

Accessibility

Keyboard interactions. None.
ARIA roles and properties. Outer wrapper carries aria-hidden="true". Children (BloomArt + veil) inherit.
Focus order. N/A.
Screen-reader expectations. Not announced.
Reduced motion. Static. Any motion is consumer responsibility.
Forced colors. Bloom flattens to Canvas. Veil disappears (backdrop-filter unsupported).
WIG rules. aria-hidden on the decorative wrapper (decorative-image rule). The backdrop must not interfere with foreground contrast — consumers verify text on top reads at AA against the bloom.

Do / Don't

Do — use veiled for surfaces with prose on top. The frost softens the bloom so text stays readable.

Don't — render veiled={false} over body copy. The painterly bloom and prose will fight.

Do — set overflow: hidden on the parent Section. The bloom paints to the edges.

Don't — render BloomBackdrop in a parent with overflow: visible. The bloom escapes the section.

Do — use one BloomBackdrop per page. The painterly identity is the centre; multiple blooms compete.

Don't — stack BloomBackdrops. The compositing breaks; you get muddy color.

Recipes

This component appears in:

Marketing-site hero blocks.
Docs corpus recipe — onboarding cards.

Code example

import { BloomBackdrop, Container, Section } from "@matter/components";

export function OnboardingHero({ children }: { children: React.ReactNode }) {
  return (
    <Section style={{ overflow: "hidden", position: "relative", paddingBlock: 96 }}>
      <BloomBackdrop variant={1} veiled />
      <Container style={{ position: "relative", zIndex: 1 }}>
        {children}
      </Container>
    </Section>
  );
}

Source

packages/components/src/BloomArt