-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSnfDecryptText.jsx
More file actions
60 lines (55 loc) · 1.65 KB
/
Copy pathSnfDecryptText.jsx
File metadata and controls
60 lines (55 loc) · 1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import React, { useEffect, useRef, useState } from 'react';
import { useSnf } from '../../context/SnfContext';
const GLYPHS = '█▓▒░#@%&/\\<>=+*△○□01ABCDEFXYZ';
/**
* Reveals a short string with a "decrypting" scramble.
* Falls back to plain text when the `decrypt` setting is off or the user
* prefers reduced motion. Intended for titles / labels, not long body copy.
*/
const SnfDecryptText = ({
text = '',
as: Tag = 'span',
className = '',
speedMs = 22,
start = true,
cursor = false,
onDone,
}) => {
const { settings, prefersReducedMotion } = useSnf();
const enabled = settings.decrypt && !prefersReducedMotion && start;
const [display, setDisplay] = useState(enabled ? '' : text);
const onDoneRef = useRef(onDone);
onDoneRef.current = onDone;
useEffect(() => {
if (!enabled) {
setDisplay(text);
return undefined;
}
let revealed = 0;
setDisplay('');
const id = setInterval(() => {
revealed += 1;
if (revealed >= text.length) {
setDisplay(text);
clearInterval(id);
onDoneRef.current?.();
return;
}
const shown = text.slice(0, revealed);
const scrambled = text
.slice(revealed)
.split('')
.map((c) =>
c === ' ' ? ' ' : GLYPHS[Math.floor(Math.random() * GLYPHS.length)],
)
.join('');
setDisplay(shown + scrambled);
}, speedMs);
return () => clearInterval(id);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [text, enabled, speedMs]);
return (
<Tag className={`${className} ${cursor ? 'snf-cursor' : ''}`}>{display}</Tag>
);
};
export default SnfDecryptText;