Mirror Wave Text

Installation

import { MirrorWaveText } from "@/components/sillybitsui/mirror-wave-text";

<MirrorWaveText
  text="LOADING..."
  maxLength={12}
  color="#ffffff"
  fontSize="5vw"
  amplitude={15}
  duration={2}
  delayStep={0.1}
/>

Prop	Type	Default	Description
`text`	`string`	`"LOADING..."`	Text to animate (max length enforced by `maxLength`)
`maxLength`	`number`	`12`	Maximum number of characters allowed
`color`	`string`	`"#ffffff"`	Color of the text
`fontSize`	`string`	`"5vw"`	Font size of each character
`amplitude`	`number`	`15`	Vertical wave height of each character
`duration`	`number`	`2`	Total animation duration per cycle
`delayStep`	`number`	`0.1`	Delay between each character’s animation start
`className`	`string`	`""`	Additional class names for customization
`reflect`	`boolean`	`true`	Whether to show reflection below the text