scrambleText

import { scrambleText } from "motion-plus"

scrambleText("#title", { duration: 1 })

import { scrambleText } from "motion-plus-dom"

// With selector
scrambleText("#title", { duration: 1 })

// With element reference
const element = document.querySelector(".text")
scrambleText(element, { duration: 1 })

import { scrambleText } from "motion-plus-dom"
import { motionValue } from "motion"

const text = motionValue("Hello world!")

// Subscribe to changes
text.on("change", (latest) => {
  document.querySelector("#title").textContent = latest
})

scrambleText(text, { duration: 1 })

import { scrambleText } from "motion-plus-dom"
import { stagger } from "motion"

// Start scrambling at the same time, reveal with stagger
scrambleText(element, {
  duration: stagger(0.05, { startDelay: 1 })
})

// Chars start scrambling one-by-one, all reveal after 1s
scrambleText(element, {
  delay: stagger(0.1),
  duration: 1
})

scrambleText(element, {
  delay: stagger(0.05, { from: "center" }),
  duration: 0.5
})

hover(element, () => {
  const controls = scrambleText(element, { duration: Infinity })

  return () => {
    controls.finish() // Reveal while preserving stagger
    // or controls.stop() for immediate reveal
  }
})

// Binary effect
scrambleText(element, { chars: "01", duration: 1 })

// Symbols
scrambleText(element, {
  chars: "!@#$%^&*()_+-=[]{}|;:,.<>?/~`░▒▓█▀▄■□▪▫●○◆◇◈◊※†‡"
})

// Emoji (use array for multi-byte characters)
scrambleText(element, {
  chars: ["😀", "😃", "😄", "😁", "😆", "😅"]
})

const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?/~`░▒▓█▀▄■□▪▫●○◆◇◈◊※†‡"
const blocks = "█▓▒░"
const binary = "01"
const hex = "0123456789ABCDEF"
const katakana = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン"
const dots = "⠁⠂⠃⠄⠅⠆⠇⠈⠉⠊⠋⠌⠍⠎⠏"