FlipFx

Updated: May 11, 2025

FlipFx simulates a flipping card on click.

FlipFx

<FlipFx
  minHeight={24}
  aspectRatio={3 / 4}
  front={
    <Media
      fill
      sizes="640px"
      src="/images/docs/once-ui/proxima-b.jpg"
      radius="l"
      border="brand-alpha-weak"
    />
  }
  back={
    <Flex fill background="surface" center
      radius="l"
      border="brand-alpha-weak">
      <Text
        align="center"
        variant="display-default-xs"
      >
        Proxima B
      </Text>
    </Flex>
  }
/>

Direction

Use the flipDirection prop to control the flip direction.

Direction

<FlipFx
  minHeight={24}
  aspectRatio={3 / 4}
  flipDirection="vertical"
  front={
    <Media
      fill
      sizes="640px"
      src="/images/docs/once-ui/proxima-b.jpg"
      radius="l"
      border="brand-alpha-weak"
    />
  }
  back={
    <Flex fill background="surface" center
      radius="l"
      border="brand-alpha-weak">
      <Text
        align="center"
        variant="display-default-xs"
      >
        Proxima B
      </Text>
    </Flex>
  }
/>

API reference

Prop	Type	Default
flipDirection Axis the card turns on.	horizontalvertical	—
timing Duration of the flip, in milliseconds.	number	—
flipped Controlled face. Omit it to let the component manage its own state.	boolean	—
onFlip Called whenever the face changes.	(flipped: boolean) => void	—
disableClickFlip Stop clicks from flipping the card.	boolean	—
autoFlipInterval Flip on a timer, in milliseconds. Omit for manual flipping only.	number	—
frontrequired	React.ReactNode	—
backrequired	React.ReactNode	—
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—

EffectsEffect

EffectsGlitchFx

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club