GlitchFx

Updated: May 4, 2025

GlitchFx applies a glitch animation to any nested content. You can control the speed, triggering behavior, and repetition style for flexible presentation effects.

GlitchFx

Welcome to EarthHome to over 8 billion apes

<GlitchFx fillWidth speed="medium">
  <Column center fillWidth gap="8">
    <Media
      src="/images/docs/once-ui/earth.png"
      alt="Earth"
      aspectRatio="1 / 1"
      maxWidth={24}
      sizes="640px"
    />
    <Heading as="h2" align="center" variant="display-default-xs">
      Welcome to Earth
    </Heading>
    <Text align="center" variant="body-default-s" onBackground="neutral-weak">
      Home to over 8 billion apes
    </Text>
  </Column>
</GlitchFx>

API reference

Prop	Type	Default
children	React.ReactNode	—
speed Pace of a single burst.	slowmediumfast	medium
interval Time between bursts, in milliseconds.	number	2500
trigger What starts the effect.	instanthovercustom	instant
continuous Keep glitching rather than running once.	boolean	true
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—

EffectsFlipFx

EffectsHoloFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club