Scramble Text

Gắn stylesheet và script một lần, rồi đánh dấu phần tử nào chứa chữ thuần:

<link rel="stylesheet" href="scramble-text.css" />
<script src="scramble-text.js" defer></script>

<h1 data-scramble>Dòng chữ tự giải mã</h1>
<a href="/docs" data-scramble="hover" data-scramble-charset="binary">Tài liệu</a>
<span data-scramble-rotate data-scramble-phrases="Làm nhanh hơn | Gọn gàng hơn | Không tốn đồng nào">Làm nhanh hơn</span>

data-scramble chọn cách kích hoạt: để trống hoặc reveal thì giải mã lần đầu phần tử được cuộn tới (trước đó nó chờ dưới dạng ký hiệu đứng yên), hover thì xáo lại mỗi lần rê chuột hay focus — vào link hoặc nút bao quanh nó, nếu có — còn manual thì chờ bạn gọi. data-scramble-rotate biến hình từ cụm này sang cụm khác (ngăn cách bằng |) sau mỗi data-scramble-interval ms (mặc định 2200), giữ bề rộng của cụm dài nhất; nó tạm dừng khi được rê chuột hoặc focus.

Tuỳ chọn qua data attribute, dùng được cho cả hai:

Attribute	Mặc định	Làm gì
data-scramble-charset	glyphs	glyphs, binary, hex, katakana, blocks — hoặc chính các ký tự, ví dụ ✦✧★
data-scramble-order	ltr	ltr, rtl, random hoặc center (từ giữa ra)
data-scramble-duration	1000	Số ms từ lúc ký tự đầu tiên khớp đến ký tự cuối cùng
data-scramble-speed	45	Số ms giữa hai lần đổi ký hiệu (càng nhỏ nhảy càng nhanh)
data-scramble-stagger	0.85	0–1: 1 khớp lần lượt từng chữ, 0 khớp cùng lúc ở cuối
data-scramble-delay	0	Số ms chỉ toàn nhiễu trước khi ký tự đầu tiên khớp
data-scramble-seed	—	Số hoặc từ bất kỳ: cùng seed thì cùng một màn giải mã, khớp từng khung hình
data-scramble-preserve	space	space, punctuation (kèm khoảng trắng) hoặc none: thứ gì đứng yên
data-scramble-mono	—	Mọi ký tự rộng bằng nhau, dùng font --scramble-mono-font
data-scramble-label	—	Nội dung trình đọc màn hình đọc thay (xoay vòng: mặc định đọc mọi cụm)

Từ code của bạn:

await ScrambleText.scramble(element, { text: "Đã cấp quyền", charset: "hex", order: "center" });
ScrambleText.rotator(element).pause(); // hoặc .play(), .next()

scramble giải mã bất kỳ phần tử nào sang chữ mới (hoặc xáo lại chữ đang có), mọi tuỳ chọn ở trên chỉ áp cho lần gọi đó; changedOnly: true chỉ xáo những ký tự khác nhau. Hàm trả về khi ký tự cuối cùng khớp, và phần tử phát sự kiện scrambleend (có nổi bọt). Phần tử thêm vào sau khi trang đã tải: ScrambleText.init(container) — hàm này trả về một hàm để gỡ ra. ScrambleText.create(element, options) và ScrambleText.createRotate(element, { phrases }) trả về controller trực tiếp.

Chép ScrambleText.tsx, scramble-text.css và thư mục core vào dự án:

import { ScrambleRotate, ScrambleText, useScramble } from "./ScrambleText";

<ScrambleText as="h1" text="Dòng chữ tự giải mã" />
<ScrambleText as="a" href="/docs" text="Tài liệu" trigger="hover" charset="binary" />
<ScrambleText text={status} trigger="manual" order="center" />   {/* giải mã mỗi khi status đổi */}
<ScrambleRotate phrases={["Làm nhanh hơn", "Gọn gàng hơn"]} interval={2400} paused={paused} mono />

function DeployButton() {
  const { ref, scramble } = useScramble({ trigger: "manual", charset: "hex" });
  return <button ref={ref} onClick={() => scramble({ text: "Đã deploy" })}>Deploy</button>;
}

Mọi tuỳ chọn ở trên đều là prop (charset, order, duration, speed, stagger, delay, seed, preserve, label, mono); as chọn thẻ (mặc định span) và mọi prop khác được chuyển cho thẻ đó. Chữ được render cả ở server, nên trang đọc được ngay trước khi script chạy. Với useScramble, hãy giữ chữ của phần tử cố định và đổi nó qua scramble({ text }). React 18 hoặc 19.

File bắt đầu bằng "use client", nên dùng được trong mọi page hay server component. Với App Router không cần làm gì thêm. Với Pages Router, chuyển dòng import CSS vào pages/_app.

Chữ giữ nguyên font, cỡ và màu của bạn (chữ gradient cũng được). Đặt các biến sau trên chính dòng chữ, hoặc trên bất kỳ phần tử nào bao quanh — một nút, một thẻ, :root:

Biến	Đổi gì
--scramble-glyph, --scramble-glyph-glow, --scramble-glyph-opacity	Các ký hiệu đang nhảy: màu, quầng sáng, độ đậm
--scramble-flash, --scramble-flash-duration	Chớp sáng khi một ký tự khớp
--scramble-mono-font	Font của data-scramble-mono / mono
--scramble-align	Vị trí cụm từ xoay vòng trong khoảng của cụm dài nhất (start, center, end)

Màu dùng light-dark(): tự theo color-scheme của trang. Khi bật prefers-reduced-motion, mọi lần giải mã diễn ra ngay lập tức — chữ chỉ đơn giản hiện ra — và cụm từ xoay vòng đổi mà không xáo.