Effect

Updated: August 30, 2026

BlobFx, MatrixFx, WeatherFx, Particle and CelebrationFx all do the same structural job: paint a full-bleed decorative layer behind their content. In practice they are alternatives to each other, but swapping one for another meant changing an import and rewriting the positioning at every call site. Effect picks between them by value. A template can expose its aesthetic as one setting, and type="none" renders the content with no layer at all.

Effect

<Effect type={theme.effect} height={12} radius="l" />

Content sits above the layer

Children render on top of the effect, and the wrapper is identical for every type — including "none". That is what makes the swap safe: changing the effect changes the look and nothing else about the layout.

Layered content

One setting

Swap the aesthetic without touching the page

<Effect type="matrix" height={20} radius="l" colors={["brand-solid-medium"]}>
  <Column fillWidth center gap="8">
    <Heading variant="display-strong-l">One setting</Heading>
    <Text variant="body-default-m">
      Swap the aesthetic without touching the page
    </Text>
  </Column>
</Effect>

Shared and per-effect settings

colors and speed apply across the set: Particle takes a single colour, so it uses the first entry, and blob is seeded rather than timed and ignores both. Anything an individual effect needs goes in its own block, which is only read when that effect is the one showing — so all of them can be configured up front and still switched with one prop.

Per-effect settings

<Effect
type="weather"
colors={["accent-solid-medium"]}
weather={{ type: "snow", intensity: 0.6 }}
matrix={{ flicker: true }}
/>

API reference

Prop	Type	Default
type Which ambient layer to render. "none" renders the children alone.	noneblobmatrixweatherparticlecelebration	none
colors Palette for the layer, when it takes one.	string[]	—
speed Multiplier on the layer's own motion. Not a duration.	number	—
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	—
blob Props passed through when type is "blob".	Omit<React.ComponentProps<typeof BlobFx>, "children">	—
matrix Props passed through when type is "matrix".	Omit<React.ComponentProps<typeof MatrixFx>, "children">	—
weather Props passed through when type is "weather".	Omit<React.ComponentProps<typeof WeatherFx>, "children">	—
particle Props passed through when type is "particle".	Omit<React.ComponentProps<typeof Particle>, "children">	—
celebration Props passed through when type is "celebration".	Omit<React.ComponentProps<typeof CelebrationFx>, "children">	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—

EffectsCountFx

EffectsFlipFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club