Skip to Content
🎉 Coral x Panda has been released 🎉 Read the Migration Guide

Constantine

Variants

BobLarge

<ConstantineBobLarge />

BobLargeStare

<ConstantineBobLargeStare />

Calculating

<ConstantineCalculating />

Circle

<ConstantineCircle />

CircleSettle

<ConstantineCircleSettle />

Coin

<ConstantineCoin />

Confetti

<ConstantineConfetti />

Cycling

<ConstantineCycling />

FigureEight

<ConstantineFigureEight />

HideJump

<ConstantineHideJump />

HideJumpLong

<ConstantineHideJumpLong />

HideJumpOut

<ConstantineHideJumpOut />

HideJumpStop

<ConstantineHideJumpStop />
<ConstantineLogo />

Mobile

<ConstantineMobile />

Porthole

<ConstantinePorthole />

RunRectangle

<ConstantineRunRectangle />

RunSquare

<ConstantineRunSquare />

SneakInRunAwayRectangle

<ConstantineSneakInRunAwayRectangle />

SneakInRunAwaySquare

<ConstantineSneakInRunAwaySquare />

SneakRectangle

<ConstantineSneakRectangle />

SneakSquare

<ConstantineSneakSquare />

Spin

<ConstantineSpin />

SwimUp

<ConstantineSwimUp />

TextRevealRectangle

<ConstantineTextRevealRectangle />

TextRevealWaveRectangle

<ConstantineTextRevealWaveRectangle />

TextRevealWaveSquare

<ConstantineTextRevealWaveSquare />

Properties

loop

<ConstantineCalculating loop={false} />

size

<ConstantineSpin size={200} />

shrink

<ConstantineSpin size={200} shrink={true} />

style

<ConstantineSpin style={{ padding: "20px", backgroundColor: "lightblue", borderRadius: "100%", }} />

Full API

NameTypeDefault
loopboolean

Should the animation be played as a loop or only once.

true
sizenumber

The size of the animation in pixels.

110
styleCSSProperties

Additional styles passed to the animations containing div element.

shrinkboolean

Should the animation be reduced in size when the container is smaller than the animation.

descriptionstring

Describe the animation for screen reader users, eg: “Constantine sitting at a desk using a calculator and writing notes”

removePlayPauseControlsboolean

Remove the play/pause controls from the animation.

false
attributesAttributes

This prop can be used to pass HTML attributes directly to the component. We currently allow passing data-* and aria-* attributes and the id. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content.

Example usage:

AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };
Last updated on