Constantine

Variants


<ConstantineBobLarge />


<ConstantineBobLargeStare />


<ConstantineCalculating />


<ConstantineCircle />


<ConstantineCircleSettle />


<ConstantineCoin />


<ConstantineConfetti />


<ConstantineCycling />


<ConstantineFigureEight />


<ConstantineHideJump />


<ConstantineHideJumpLong />


<ConstantineHideJumpOut />


<ConstantineHideJumpStop />


<ConstantineLogo />


<ConstantineMobile />


<ConstantinePorthole />


<ConstantineRunRectangle />


<ConstantineRunSquare />


<ConstantineSneakInRunAwayRectangle />


<ConstantineSneakInRunAwaySquare />


<ConstantineSneakRectangle />


<ConstantineSneakSquare />


<ConstantineSpin />


<ConstantineSwimUp />


<ConstantineTextRevealRectangle />


<ConstantineTextRevealWaveRectangle />


<ConstantineTextRevealWaveSquare />


<ConstantineCalculating loop={false} />


<ConstantineSpin size={200} />


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


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

Name	Type	Default
`loop`	`boolean` Should the animation be played as a loop or only once.	`true`
`size`	`number` The size of the animation in pixels.	`110`
`style`	`CSSProperties` Additional styles passed to the animations containing `div` element.
`shrink`	`boolean` Should the animation be reduced in size when the container is smaller than the animation.
`description`	`string` Describe the animation for screen reader users, eg: “Constantine sitting at a desk using a calculator and writing notes”
`removePlayPauseControls`	`boolean` Remove the play/pause controls from the animation.	`false`
`attributes`	`Attributes` 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' };`