The MatrixFx component creates an animated dot matrix reveal effect using the native Canvas 2D API. It supports instant reveal, progressive reveal on mount, or hover-triggered animations with smooth transitions. Perfect for hero sections, backgrounds, or interactive hover cards.

MatrixFx

<MatrixFx
  height={24}
  colors={["brand-solid-strong", "accent-solid-strong"]}
  trigger="mount"
  flicker
/>

Speed

Control the reveal animation speed with the speed prop. Higher values make the reveal faster.

Speed

<MatrixFx
  height={24}
  trigger="mount"
  speed={2}
  colors={["accent-solid-medium"]}
/>

Colors

Use multiple colors for variety. Supports CSS variables and any valid color format.

Colors

<MatrixFx
  height={24}
  colors={[
    "brand-solid-medium",
    "accent-solid-medium",
    "danger-solid-medium"
  ]}
/>

Size & Spacing

Customize the size of dots and spacing between them.

Size & Spacing

<MatrixFx
  fill
  height={24}
  size={6}
  spacing={8}
  colors={["brand-solid-strong"]}
/>

Direction

Control where the reveal animation starts from.

Direction

<MatrixFx
  height={24}
  revealFrom="top"
  colors={["brand-solid-strong"]}
/>

Content

Place content inside the reveal effect.

Content

Canvas Reveal

Animated dot matrix effect with native Canvas 2D

<MatrixFx
  height={24}
  colors={["neutral-solid-medium"]}
>
  <Column gap="16" fill center>
    <Heading variant="display-strong-xl">
      Canvas Reveal
    </Heading>
    <Text variant="body-default-l">
      Animated dot matrix effect
    </Text>
  </Column>
</MatrixFx>

Flicker

Add a subtle animated flicker to create a dynamic, alive feeling.

Flicker

<MatrixFx
  height={24}
  colors={["danger-solid-strong"]}
  flicker
/>

Bulge

Add dynamic wave effects to create fluid, organic motion. Choose between ripple (circular waves from center) or wave (S-curve flowing diagonally). Tiles are displaced, scale up at the wave front, and fade at the edges.

Ripple

<MatrixFx
  height={24}
  colors={["accent-solid-strong"]}
  bulge={{
    type: "ripple",   // Circular wave from center
    duration: 4,      // Wave duration in seconds
    intensity: 15,    // Displacement strength
    repeat: true      // Continuous cycles
  }}
/>

The wave type creates an organic, flowing S-curve that travels diagonally from bottom-left to top-right. The curve rotates and morphs as it moves, straightening at the edges for a natural liquid motion.

Wave

<MatrixFx
  height={24}
  colors={["success-solid-strong"]}
  bulge={{
    type: "wave",     // S-curve diagonal flow
    duration: 3,
    intensity: 20,
    repeat: true
  }}
/>

Use repeat: false for a single wave that plays once. Add delay for a pause before starting or between cycles (useful for sequencing multiple effects).

Single Wave

<MatrixFx
  height={24}
  colors={["danger-solid-strong"]}
  bulge={{
    duration: 3,
    intensity: 12,
    repeat: false   // Single wave only
  }}
/>

Trigger

Use trigger="hover" for native hover support. Dots progressively appear on hover and smoothly reverse when you move away.

Hover


<Row
  fill
  center
  padding="24"
  border="neutral-alpha-weak"
  radius="l"
  overflow="hidden"
>
  <MatrixFx
    position="absolute"
    top="0"
    left="0"
    trigger="hover"
    size={2}
    spacing={2}
    flicker
    bulge={{
      duration: 3,
      intensity: 12,
      repeat: false
    }}
  />
  <Background
    fill
    position="absolute"
    left="0"
    top="0"
    x="0"
    y="0"
    gradient={{
      display: true,
      colorStart: "neutral-background-weak",
    }}
    pointerEvents="none"/>
  <Column align="center" horizontal="center" pointerEvents="none">
    <Logo dark icon="/trademarks/icon-dark.svg" />
    <Logo light icon="/trademarks/icon-light.svg" />
  </Column>
</Row>
<Row
  fill
  center
  padding="24"
  border="neutral-alpha-weak"
  radius="l"
  overflow="hidden"
>
  <MatrixFx
    position="absolute"
    top="0"
    left="0"
    trigger="hover"
    size={2}
    spacing={2}
    flicker
    revealFrom="bottom"
  />
  <Background
    fill
    position="absolute"
    left="0"
    top="0"
    x="0"
    y="0"
    gradient={{
      display: true,
      colorStart: "neutral-background-weak",
    }}
    pointerEvents="none"/>
  <Column align="center" horizontal="center" pointerEvents="none">
    <Logo dark icon="/trademarks/icon-dark.svg" />
    <Logo light icon="/trademarks/icon-light.svg" />
  </Column>
</Row>

Use trigger="click" to toggle the effect on click.

Click Trigger

Click to toggle

<MatrixFx
  height={16}
  trigger="click"
  colors={["brand-solid-medium"]}
/>

Use trigger="manual" with the active prop to control the effect from parent state.

Manual Trigger

"use client";

import React from "react";
import { MatrixFx, Row, ToggleButton } from "@once-ui-system/core";

export function Demo() {
  const [on, setOn] = React.useState(false);
  return (
    <Row gap="8" fillWidth>
      <ToggleButton onClick={() => setOn((v) => !v)}>
        {on ? "Stop" : "Start"}
      </ToggleButton>
      <MatrixFx height={16} trigger="manual" active={on} colors={["brand-solid-medium"]} />
    </Row>
  );
}

Performance

MatrixFx automatically detects low-end devices and the prefers-reduced-motion system setting. When either is detected, the animation renders a single static frame (no flicker, no bulge animation). You can override this with the reducedMotion prop. See useReducedMotion for details.

API reference

Prop	Type	Default
speed Animation multiplier. Not a duration.	number	1
colors Palette for the dots.	string[]	["brand-solid-medium"]
size Dot size, in pixels.	number	3
spacing Gap between dots, in pixels.	number	3
revealFrom Where the reveal starts before spreading out.	centertopbottomleftright	center
trigger What starts it. "manual" hands control to active.	hoverinstantmountclickmanual	instant
active Run it, when trigger is "manual".	boolean	false
flicker Randomise dot brightness, for a noisier look.	boolean	false
bulge A ripple or wave distortion: its type, duration, intensity, delay and whether it repeats.	BulgeConfig	—
fps Frame cap. Lower it on a large surface.	number	60
reducedMotion "auto" follows the reader's system setting, which is the right default for anything ambient.	booleanauto	auto
children	React.ReactNode	—
…and every FlexProps prop	inherited	—