Composables
useScrambleText
Documentation for useScrambleText composable.
Instant playView on GitHub
The useScrambleText composable wraps the scrambleText utility from AnimeJS, providing a reactive way to animate text with a scramble/reveal effect.
Arguments
target
AnimeTargets required
The element whose text content will be scrambled. Can be a CSS selector, DOM element, Vue template ref, or component.
animationOptions
MaybeRefOrGetter<AnimationParams>
Standard AnimeJS animation parameters (e.g.,
autoplay, loop, alternate). These control the animation playback, not the scramble behavior.scrambleOptions
MaybeRefOrGetter<ScrambleTextParams>
Options specific to the scramble effect. See the AnimeJS Scramble Text documentation for all available options.
Example
Hello from nanime!
import type { ScrambleTextParams } from '#nanime/types'
import { useIntervalFn } from '@vueuse/core'
const el = useTemplateRef('text')
const index = ref(0)
const texts = [
'Hello from nanime!',
'Scramble text with animejs!',
'Reactive composables rock',
'Care to star us on github? :)',
]
const scrambleConfig = computed(
(): ScrambleTextParams => ({
text: texts[index.value],
chars: 'symbols',
perturbation: 0.3,
settleRate: 25,
settleDuration: 350,
revealRate: 20,
}),
)
useScrambleText(el, { ease: 'inCirc', duration: 2500 }, scrambleConfig)
useIntervalFn(() => {
index.value = (index.value + 1) % texts.length
}, 5000)
<template>
<p ref="text" class="font-mono text-lg">Hello from nanime!</p>
</template>
Return Value
Returns a shallowReactive object wrapping the AnimeJS animation instance.
API
Types
function useScrambleText(
target: AnimeTargets,
animationOptions?: MaybeRefOrGetter<AnimationParams>,
scrambleOptions?: MaybeRefOrGetter<ScrambleTextParams>,
): JSAnimation
type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[]
See AnimeJS Scramble Text documentation for the full ScrambleTextParams type.
Notes
Do not destructure the return value. The instance is wrapped in
shallowReactive to maintain reactivity.// ❌ Avoid destructuring
const { restart } = useScrambleText(el, {}, { text: 'Hello' })
// ✅ Access methods directly
const animation = useScrambleText(el, {}, { text: 'Hello' })
animation.restart()