BlobFx

Updated: May 4, 2026

The BlobFx component creates animated blob gradients with smooth horizontal movement. It uses a seed-based pseudo-random system to generate consistent variations, making it perfect for hero sections, backgrounds, or decorative elements.

BlobFx

<BlobFx height={24} />

Seed Variation

Use the seed prop to generate different pseudo-random variations. Each seed produces a unique combination of animation durations and movement patterns.

Seed Variation

<BlobFx height={16} seed={0} />
<BlobFx height={16} seed={42} />
<BlobFx height={16} seed={123} />

Usage

Combine with other components to create layered backgrounds. The effect uses pointerEvents="none" so it won't interfere with interactive elements.

Background Layer

Layered Content

Interactive elements work normally

<Row fillWidth height={24} overflow="hidden">
  <BlobFx position="absolute" fill seed={7} translateY="50%" />
  <Column fillWidth center gap="8">
    <Heading variant="display-strong-xl">
      Layered Content
    </Heading>
    <Text variant="body-default-m">
      Interactive elements work normally
    </Text>
  </Column>
</Row>

How It Works

The component uses three animated gradient blobs with:

Pseudo-random durations: Each seed generates animation durations ranging from 6.4s to 14.4s
Varied movement: Horizontal translation offsets are randomized by ±30%
Blend modes: Uses screen and plus-lighter for smooth color mixing
Blur filter: 2rem blur creates the soft blob effect

The seed-based randomization ensures consistent results across renders while providing variety between different instances.

API reference

Prop	Type	Default
seed Changes the shape. Same seed, same blob.	number	0
…and every FlexProps prop	inherited	—

EffectsFadingLettersFx

EffectsCountFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club