-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathSnfBootSequence.jsx
More file actions
87 lines (81 loc) · 2.69 KB
/
Copy pathSnfBootSequence.jsx
File metadata and controls
87 lines (81 loc) · 2.69 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React, { useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { useSnf } from '../../context/SnfContext';
const LINES = [
'BLACK_RAGNAROK // ARCHIVE TERMINAL v3.7',
'AUTH CLEARANCE … LEVEL 20 GRANTED',
'MOUNTING /snf … OK',
'DECRYPTING INDEX … ████████ 100%',
'WARNING: CONTENTS CLASSIFIED. TRUST NO SCRIBE.',
'ACCESS GRANTED',
];
/**
* One-shot boot/decrypt overlay shown on first entry to the terminal.
* Skippable; honours reduced-motion by collapsing to an instant grant.
*/
const SnfBootSequence = ({ onComplete }) => {
const { prefersReducedMotion, language } = useSnf();
const [visible, setVisible] = useState(0);
const doneRef = useRef(false);
const finish = () => {
if (doneRef.current) return;
doneRef.current = true;
onComplete?.();
};
useEffect(() => {
if (prefersReducedMotion) {
const t = setTimeout(finish, 350);
return () => clearTimeout(t);
}
const timers = [];
LINES.forEach((_, i) => {
timers.push(setTimeout(() => setVisible(i + 1), 260 * (i + 1)));
});
timers.push(setTimeout(finish, 260 * LINES.length + 700));
return () => timers.forEach(clearTimeout);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [prefersReducedMotion]);
return (
<motion.div
className="snf-boot"
exit={{ opacity: 0 }}
transition={{ duration: 0.4 }}
>
<div className="w-full max-w-xl px-6">
<div className="snf-vt snf-phos-text snf-glow text-2xl md:text-3xl mb-6 tracking-wide">
{language === 'tr' ? 'SİSTEM BAŞLATILIYOR' : 'INITIALISING SYSTEM'}
</div>
<div className="space-y-1.5 mb-6 min-h-[180px]">
{LINES.slice(0, prefersReducedMotion ? LINES.length : visible).map(
(line, i) => (
<div
key={i}
className={`snf-mono text-xs md:text-sm ${
line.startsWith('WARNING')
? 'text-[var(--snf-alert)]'
: line === 'ACCESS GRANTED'
? 'snf-phos-text snf-glow'
: 'snf-dim'
}`}
>
<span className="snf-phos-text mr-2">›</span>
{line}
</div>
),
)}
</div>
<div className="snf-boot-bar mb-5">
<span />
</div>
<button
type="button"
onClick={finish}
className="snf-mono text-[10px] uppercase tracking-[0.4em] snf-dim hover:text-[var(--snf-phos)] transition-colors"
>
[ skip ▸ ]
</button>
</div>
</motion.div>
);
};
export default SnfBootSequence;