ShuffleText
Parse a CSS color string to [r, g, b] via a temporary canvas.
Import
import { ShuffleText } from 'markgraphy';Basic usage
<ShuffleText
text="example"
style={''}
shuffleDirection={'right'}
/>example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | — |
class? | string | '' | — |
style? | string | '' | — |
shuffleDirection? | ShuffleDirection | 'right' | — |
duration? | number | 0.35 | — |
maxDelay? | number | 0 | — |
ease? | `string | EasingFunction` | 'power3.out' |
threshold? | number | 0.1 | — |
rootMargin? | string | '-100px' | — |
tag? | TagName | 'p' | — |
textAlign? | string | 'center' | — |
onShuffleComplete? | () => void | — | — |
shuffleTimes? | number | 1 | — |
animationMode? | AnimationMode | 'evenodd' | — |
loop? | boolean | false | — |
loopDelay? | number | 0 | — |
stagger? | number | 0.03 | — |
scrambleCharset? | string | '' | — |
colorFrom? | string | — | — |
colorTo? | string | — | — |
triggerOnce? | boolean | true | — |
respectReducedMotion? | boolean | true | — |
triggerOnHover? | boolean | true | — |
Exported types
ShuffleDirectionAnimationModeTagNameShuffleTextProps
Reduced motion
Animation is disabled under prefers-reduced-motion.