@whykusanagi/corrupted-theme 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -7
- package/README.md +79 -15
- package/examples/advanced/nsfw-corruption.html +348 -0
- package/examples/basic/corrupted-text.html +254 -0
- package/examples/basic/typing-animation.html +344 -0
- package/examples/button.html +1 -1
- package/examples/card.html +1 -1
- package/examples/extensions-showcase.html +1 -1
- package/examples/form.html +1 -1
- package/examples/index.html +29 -3
- package/examples/layout.html +1 -1
- package/examples/nikke-team-builder.html +2 -2
- package/examples/showcase-complete.html +2 -2
- package/examples/showcase.html +2 -2
- package/package.json +1 -1
- package/src/core/corrupted-text.js +280 -0
- package/src/core/corruption-phrases.js +285 -0
- package/src/core/typing-animation.js +390 -0
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Character Corruption - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 1000px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.example-group {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
background: var(--glass);
|
|
19
|
+
border: 1px solid var(--border);
|
|
20
|
+
border-radius: var(--radius-lg);
|
|
21
|
+
padding: var(--spacing-lg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.example-group h3 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-lg);
|
|
27
|
+
font-size: 1.25rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-area {
|
|
31
|
+
background: var(--bg-secondary);
|
|
32
|
+
border: 1px solid var(--border);
|
|
33
|
+
border-radius: var(--radius-md);
|
|
34
|
+
padding: var(--spacing-xl);
|
|
35
|
+
margin-bottom: var(--spacing-md);
|
|
36
|
+
min-height: 100px;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.corrupted-text {
|
|
43
|
+
font-size: 2rem;
|
|
44
|
+
font-weight: bold;
|
|
45
|
+
letter-spacing: 2px;
|
|
46
|
+
text-align: center;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.controls {
|
|
50
|
+
display: flex;
|
|
51
|
+
gap: var(--spacing-md);
|
|
52
|
+
margin-top: var(--spacing-md);
|
|
53
|
+
flex-wrap: wrap;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.code-block {
|
|
57
|
+
background: var(--bg);
|
|
58
|
+
border: 1px solid var(--border);
|
|
59
|
+
border-radius: var(--radius-md);
|
|
60
|
+
padding: var(--spacing-md);
|
|
61
|
+
margin-top: var(--spacing-md);
|
|
62
|
+
font-family: 'Courier New', monospace;
|
|
63
|
+
font-size: 0.875rem;
|
|
64
|
+
color: var(--text-secondary);
|
|
65
|
+
overflow-x: auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.info-badge {
|
|
69
|
+
display: inline-flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: var(--spacing-sm);
|
|
72
|
+
background: var(--glass);
|
|
73
|
+
border: 1px solid var(--border);
|
|
74
|
+
border-radius: var(--radius-full);
|
|
75
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
76
|
+
font-size: 0.875rem;
|
|
77
|
+
color: var(--text-secondary);
|
|
78
|
+
margin-bottom: var(--spacing-md);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.sfw-badge {
|
|
82
|
+
background: rgba(217, 79, 144, 0.2);
|
|
83
|
+
border-color: var(--corrupted-magenta2);
|
|
84
|
+
color: var(--corrupted-magenta2);
|
|
85
|
+
}
|
|
86
|
+
</style>
|
|
87
|
+
</head>
|
|
88
|
+
<body>
|
|
89
|
+
<!-- Global Navigation -->
|
|
90
|
+
<nav class="navbar">
|
|
91
|
+
<div class="navbar-content">
|
|
92
|
+
<a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
93
|
+
<ul class="navbar-links">
|
|
94
|
+
<li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
|
|
95
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
|
|
96
|
+
<li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
|
|
97
|
+
<li class="has-submenu">
|
|
98
|
+
<a href="#" class="active">
|
|
99
|
+
<i class="fas fa-flask"></i> Examples
|
|
100
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
101
|
+
</a>
|
|
102
|
+
<div class="submenu">
|
|
103
|
+
<a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
104
|
+
<a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
105
|
+
<a href="../card.html"><i class="fas fa-square"></i> Cards</a>
|
|
106
|
+
<a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
107
|
+
<a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
108
|
+
<a href="corrupted-text.html" class="active"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
109
|
+
<a href="typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
110
|
+
<a href="../advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
111
|
+
</div>
|
|
112
|
+
</li>
|
|
113
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
114
|
+
</ul>
|
|
115
|
+
</div>
|
|
116
|
+
</nav>
|
|
117
|
+
|
|
118
|
+
<div class="container">
|
|
119
|
+
<h1><i class="fas fa-terminal"></i> Character Corruption</h1>
|
|
120
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
121
|
+
Pattern 1: Character-level visual corruption with multi-language cycling.
|
|
122
|
+
</p>
|
|
123
|
+
|
|
124
|
+
<div class="info-badge sfw-badge">
|
|
125
|
+
<i class="fas fa-check-circle"></i>
|
|
126
|
+
<span>SFW - Always Safe</span>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<!-- Multi-Language Cycling -->
|
|
130
|
+
<section id="multilang" class="example-group">
|
|
131
|
+
<h3>Multi-Language Cycling</h3>
|
|
132
|
+
<p>Cycles through English, Romaji, Hiragana, Katakana, and Kanji variants continuously.</p>
|
|
133
|
+
|
|
134
|
+
<div class="demo-area">
|
|
135
|
+
<span class="corrupted-text corrupted-multilang"
|
|
136
|
+
data-english="Hello World"
|
|
137
|
+
data-romaji="konnichiwa"
|
|
138
|
+
data-hiragana="こんにちは"
|
|
139
|
+
data-katakana="コンニチハ"
|
|
140
|
+
data-kanji="今日は">
|
|
141
|
+
</span>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
<div class="code-block"><span class="corrupted-multilang"
|
|
145
|
+
data-english="Hello World"
|
|
146
|
+
data-romaji="konnichiwa"
|
|
147
|
+
data-hiragana="こんにちは"
|
|
148
|
+
data-katakana="コンニチハ"
|
|
149
|
+
data-kanji="今日は">
|
|
150
|
+
</span></div>
|
|
151
|
+
</section>
|
|
152
|
+
|
|
153
|
+
<!-- English-Only Decoding -->
|
|
154
|
+
<section id="english" class="example-group">
|
|
155
|
+
<h3>English-Only Decoding</h3>
|
|
156
|
+
<p>Decodes from random character chaos to clean English text with manual controls.</p>
|
|
157
|
+
|
|
158
|
+
<div class="demo-area">
|
|
159
|
+
<span class="corrupted-text corrupted-multilang"
|
|
160
|
+
data-english="Neural corruption detected"
|
|
161
|
+
id="example2">
|
|
162
|
+
</span>
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div class="controls">
|
|
166
|
+
<button class="btn" onclick="restartExample2()">
|
|
167
|
+
<i class="fas fa-redo"></i> Restart
|
|
168
|
+
</button>
|
|
169
|
+
<button class="btn btn-secondary" onclick="settleExample2()">
|
|
170
|
+
<i class="fas fa-stop"></i> Settle
|
|
171
|
+
</button>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="code-block">// Manual control
|
|
175
|
+
const element = document.getElementById('example2');
|
|
176
|
+
const instance = element.corruptedTextInstance;
|
|
177
|
+
|
|
178
|
+
// Restart corruption
|
|
179
|
+
instance.restart();
|
|
180
|
+
|
|
181
|
+
// Settle on final text
|
|
182
|
+
instance.settle('Neural corruption detected');</div>
|
|
183
|
+
</section>
|
|
184
|
+
|
|
185
|
+
<!-- One-Shot Decoding -->
|
|
186
|
+
<section id="oneshot" class="example-group">
|
|
187
|
+
<h3>One-Shot Decoding (No Loop)</h3>
|
|
188
|
+
<p>Decodes once and settles on the final text without looping.</p>
|
|
189
|
+
|
|
190
|
+
<div class="demo-area">
|
|
191
|
+
<span class="corrupted-text corrupted-multilang"
|
|
192
|
+
data-english="System Online"
|
|
193
|
+
id="example3">
|
|
194
|
+
</span>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div class="code-block">// One-shot configuration
|
|
198
|
+
const instance = element.corruptedTextInstance;
|
|
199
|
+
instance.stop();
|
|
200
|
+
instance.options.loop = false;
|
|
201
|
+
instance.options.finalText = 'System Online';
|
|
202
|
+
instance.start();</div>
|
|
203
|
+
</section>
|
|
204
|
+
|
|
205
|
+
<!-- Component Info -->
|
|
206
|
+
<section class="example-group">
|
|
207
|
+
<h3><i class="fas fa-info-circle"></i> Component Information</h3>
|
|
208
|
+
<ul style="color: var(--text-secondary); line-height: 1.8;">
|
|
209
|
+
<li><strong>Type:</strong> Character-Level Corruption (Pattern 1)</li>
|
|
210
|
+
<li><strong>Content:</strong> Always SFW (no phrases, just random characters)</li>
|
|
211
|
+
<li><strong>Character Sets:</strong> Katakana, Hiragana, Romaji, Symbols for visual glitch</li>
|
|
212
|
+
<li><strong>Colors:</strong> Magenta/Purple corruption, White for decoded text</li>
|
|
213
|
+
<li><strong>Auto-initialization:</strong> Elements with class <code>corrupted-multilang</code></li>
|
|
214
|
+
<li><strong>Script:</strong> <code>src/core/corrupted-text.js</code></li>
|
|
215
|
+
</ul>
|
|
216
|
+
</section>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<script src="../../src/core/corrupted-text.js"></script>
|
|
220
|
+
<script>
|
|
221
|
+
// Example 2: Manual control
|
|
222
|
+
const example2 = document.getElementById('example2');
|
|
223
|
+
let example2Instance = null;
|
|
224
|
+
|
|
225
|
+
// Wait for auto-init, then store reference
|
|
226
|
+
setTimeout(() => {
|
|
227
|
+
example2Instance = example2.corruptedTextInstance;
|
|
228
|
+
}, 100);
|
|
229
|
+
|
|
230
|
+
function restartExample2() {
|
|
231
|
+
if (example2Instance) {
|
|
232
|
+
example2Instance.restart();
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
function settleExample2() {
|
|
237
|
+
if (example2Instance) {
|
|
238
|
+
example2Instance.settle('Neural corruption detected');
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// Example 3: One-shot configuration
|
|
243
|
+
const example3 = document.getElementById('example3');
|
|
244
|
+
setTimeout(() => {
|
|
245
|
+
if (example3.corruptedTextInstance) {
|
|
246
|
+
example3.corruptedTextInstance.stop();
|
|
247
|
+
example3.corruptedTextInstance.options.loop = false;
|
|
248
|
+
example3.corruptedTextInstance.options.finalText = 'System Online';
|
|
249
|
+
example3.corruptedTextInstance.start();
|
|
250
|
+
}
|
|
251
|
+
}, 100);
|
|
252
|
+
</script>
|
|
253
|
+
</body>
|
|
254
|
+
</html>
|
|
@@ -0,0 +1,344 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Buffer Corruption - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 1000px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.example-group {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
background: var(--glass);
|
|
19
|
+
border: 1px solid var(--border);
|
|
20
|
+
border-radius: var(--radius-lg);
|
|
21
|
+
padding: var(--spacing-lg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.example-group h3 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-lg);
|
|
27
|
+
font-size: 1.25rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-area {
|
|
31
|
+
background: var(--bg-secondary);
|
|
32
|
+
border: 1px solid var(--border);
|
|
33
|
+
border-radius: var(--radius-md);
|
|
34
|
+
padding: var(--spacing-xl);
|
|
35
|
+
margin-bottom: var(--spacing-md);
|
|
36
|
+
min-height: 100px;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.typing-output {
|
|
43
|
+
font-size: 1.25rem;
|
|
44
|
+
min-height: 40px;
|
|
45
|
+
letter-spacing: 1px;
|
|
46
|
+
font-family: 'Courier New', monospace;
|
|
47
|
+
text-align: center;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.controls {
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: var(--spacing-md);
|
|
54
|
+
margin-top: var(--spacing-md);
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.code-block {
|
|
59
|
+
background: var(--bg);
|
|
60
|
+
border: 1px solid var(--border);
|
|
61
|
+
border-radius: var(--radius-md);
|
|
62
|
+
padding: var(--spacing-md);
|
|
63
|
+
margin-top: var(--spacing-md);
|
|
64
|
+
font-family: 'Courier New', monospace;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
color: var(--text-secondary);
|
|
67
|
+
overflow-x: auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.info-badge {
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: var(--spacing-sm);
|
|
74
|
+
background: var(--glass);
|
|
75
|
+
border: 1px solid var(--border);
|
|
76
|
+
border-radius: var(--radius-full);
|
|
77
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
78
|
+
font-size: 0.875rem;
|
|
79
|
+
color: var(--text-secondary);
|
|
80
|
+
margin-bottom: var(--spacing-md);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.sfw-badge {
|
|
84
|
+
background: rgba(217, 79, 144, 0.2);
|
|
85
|
+
border-color: var(--corrupted-magenta2);
|
|
86
|
+
color: var(--corrupted-magenta2);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.slider-container {
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
gap: var(--spacing-md);
|
|
93
|
+
margin-top: var(--spacing-md);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.slider-container label {
|
|
97
|
+
min-width: 100px;
|
|
98
|
+
color: var(--text-secondary);
|
|
99
|
+
font-size: 0.875rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.slider-container input[type="range"] {
|
|
103
|
+
flex: 1;
|
|
104
|
+
max-width: 300px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.slider-container span {
|
|
108
|
+
min-width: 120px;
|
|
109
|
+
color: var(--accent);
|
|
110
|
+
font-family: 'Courier New', monospace;
|
|
111
|
+
font-size: 0.875rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
input[type="text"] {
|
|
115
|
+
width: 100%;
|
|
116
|
+
padding: var(--spacing-md);
|
|
117
|
+
background: var(--bg);
|
|
118
|
+
border: 1px solid var(--border);
|
|
119
|
+
border-radius: var(--radius-md);
|
|
120
|
+
color: var(--text);
|
|
121
|
+
font-family: 'Courier New', monospace;
|
|
122
|
+
margin-bottom: var(--spacing-md);
|
|
123
|
+
font-size: 1rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
input[type="text"]:focus {
|
|
127
|
+
outline: none;
|
|
128
|
+
border-color: var(--accent);
|
|
129
|
+
box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.1);
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
132
|
+
</head>
|
|
133
|
+
<body>
|
|
134
|
+
<!-- Global Navigation -->
|
|
135
|
+
<nav class="navbar">
|
|
136
|
+
<div class="navbar-content">
|
|
137
|
+
<a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
138
|
+
<ul class="navbar-links">
|
|
139
|
+
<li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
|
|
140
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
|
|
141
|
+
<li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
|
|
142
|
+
<li class="has-submenu">
|
|
143
|
+
<a href="#" class="active">
|
|
144
|
+
<i class="fas fa-flask"></i> Examples
|
|
145
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
146
|
+
</a>
|
|
147
|
+
<div class="submenu">
|
|
148
|
+
<a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
149
|
+
<a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
150
|
+
<a href="../card.html"><i class="fas fa-square"></i> Cards</a>
|
|
151
|
+
<a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
152
|
+
<a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
153
|
+
<a href="corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
154
|
+
<a href="typing-animation.html" class="active"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
155
|
+
<a href="../advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
156
|
+
</div>
|
|
157
|
+
</li>
|
|
158
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
159
|
+
</ul>
|
|
160
|
+
</div>
|
|
161
|
+
</nav>
|
|
162
|
+
|
|
163
|
+
<div class="container">
|
|
164
|
+
<h1><i class="fas fa-keyboard"></i> Buffer Corruption</h1>
|
|
165
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
166
|
+
Pattern 2: Phrase flickering with buffer corruption (SFW mode).
|
|
167
|
+
</p>
|
|
168
|
+
|
|
169
|
+
<div class="info-badge sfw-badge">
|
|
170
|
+
<i class="fas fa-check-circle"></i>
|
|
171
|
+
<span>SFW Mode - Cute & Playful</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- Basic Buffer Corruption -->
|
|
175
|
+
<section id="basic" class="example-group">
|
|
176
|
+
<h3>System Message with Buffer Corruption</h3>
|
|
177
|
+
<p>Cute, playful, and atmospheric phrases flicker through before revealing the final text.</p>
|
|
178
|
+
|
|
179
|
+
<div class="demo-area">
|
|
180
|
+
<div class="typing-output" id="output1"></div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="controls">
|
|
184
|
+
<button class="btn" onclick="startExample1()">
|
|
185
|
+
<i class="fas fa-play"></i> Start
|
|
186
|
+
</button>
|
|
187
|
+
<button class="btn btn-secondary" onclick="stopExample1()">
|
|
188
|
+
<i class="fas fa-stop"></i> Stop
|
|
189
|
+
</button>
|
|
190
|
+
<button class="btn btn-ghost" onclick="settleExample1()">
|
|
191
|
+
<i class="fas fa-check"></i> Settle
|
|
192
|
+
</button>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="code-block">import { TypingAnimation } from '@whykusanagi/corrupted-theme/typing-animation';
|
|
196
|
+
|
|
197
|
+
const element = document.getElementById('output');
|
|
198
|
+
const typing = new TypingAnimation(element, {
|
|
199
|
+
typingSpeed: 40, // Characters per second
|
|
200
|
+
glitchChance: 0.08, // 8% corruption chance
|
|
201
|
+
nsfw: false // SFW mode (default)
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
typing.start('Neural corruption detected...');</div>
|
|
205
|
+
</section>
|
|
206
|
+
|
|
207
|
+
<!-- Adjustable Settings -->
|
|
208
|
+
<section id="adjustable" class="example-group">
|
|
209
|
+
<h3>Adjustable Corruption Settings</h3>
|
|
210
|
+
<p>Control typing speed and corruption frequency in real-time.</p>
|
|
211
|
+
|
|
212
|
+
<div class="demo-area">
|
|
213
|
+
<div class="typing-output" id="output2"></div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="slider-container">
|
|
217
|
+
<label for="speed"><i class="fas fa-tachometer-alt"></i> Speed:</label>
|
|
218
|
+
<input type="range" id="speed" min="10" max="100" value="40" class="form-range">
|
|
219
|
+
<span id="speedValue">40 chars/sec</span>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="slider-container">
|
|
223
|
+
<label for="glitch"><i class="fas fa-bolt"></i> Corruption:</label>
|
|
224
|
+
<input type="range" id="glitch" min="0" max="30" value="8" class="form-range">
|
|
225
|
+
<span id="glitchValue">8%</span>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="controls">
|
|
229
|
+
<button class="btn" onclick="startExample2()">
|
|
230
|
+
<i class="fas fa-play"></i> Start with Settings
|
|
231
|
+
</button>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="code-block">const typing = new TypingAnimation(element, {
|
|
235
|
+
typingSpeed: 80, // Faster typing
|
|
236
|
+
glitchChance: 0.20 // More corruption
|
|
237
|
+
});</div>
|
|
238
|
+
</section>
|
|
239
|
+
|
|
240
|
+
<!-- Custom Messages -->
|
|
241
|
+
<section id="custom" class="example-group">
|
|
242
|
+
<h3>Custom Messages</h3>
|
|
243
|
+
<p>Type your own message to see it corrupted and revealed.</p>
|
|
244
|
+
|
|
245
|
+
<input type="text" id="customMessage" placeholder="Enter your message here...">
|
|
246
|
+
|
|
247
|
+
<div class="demo-area">
|
|
248
|
+
<div class="typing-output" id="output3"></div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<div class="controls">
|
|
252
|
+
<button class="btn" onclick="startExample3()">
|
|
253
|
+
<i class="fas fa-keyboard"></i> Type Custom Message
|
|
254
|
+
</button>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="code-block">const message = document.getElementById('input').value;
|
|
258
|
+
typing.start(message);</div>
|
|
259
|
+
</section>
|
|
260
|
+
|
|
261
|
+
<!-- Component Info -->
|
|
262
|
+
<section class="example-group">
|
|
263
|
+
<h3><i class="fas fa-info-circle"></i> Component Information</h3>
|
|
264
|
+
<ul style="color: var(--text-secondary); line-height: 1.8;">
|
|
265
|
+
<li><strong>Type:</strong> Buffer Corruption / Phrase Flickering (Pattern 2)</li>
|
|
266
|
+
<li><strong>Mode:</strong> SFW (Default) - Cute, playful, atmospheric phrases</li>
|
|
267
|
+
<li><strong>Example Phrases:</strong> "かわいい", "nyaa~", "闇が...私を呼んでいる...", "Neural corruption detected..."</li>
|
|
268
|
+
<li><strong>Color:</strong> Magenta (#d94f90) for SFW corruption, White for final text</li>
|
|
269
|
+
<li><strong>Mental Model:</strong> Neural network decoding corrupted data buffer</li>
|
|
270
|
+
<li><strong>Script:</strong> <code>src/core/typing-animation.js</code></li>
|
|
271
|
+
</ul>
|
|
272
|
+
|
|
273
|
+
<div class="alert alert-info" style="margin-top: var(--spacing-md);">
|
|
274
|
+
<i class="fas fa-exclamation-circle"></i>
|
|
275
|
+
<strong>NSFW Mode:</strong> For explicit content examples, see
|
|
276
|
+
<a href="../advanced/nsfw-corruption.html" style="color: var(--accent);">advanced/nsfw-corruption.html</a> (18+ only)
|
|
277
|
+
</div>
|
|
278
|
+
</section>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<script type="module">
|
|
282
|
+
import { TypingAnimation } from '../../src/core/typing-animation.js';
|
|
283
|
+
|
|
284
|
+
// Example 1: Basic
|
|
285
|
+
const output1 = document.getElementById('output1');
|
|
286
|
+
let typing1 = new TypingAnimation(output1, {
|
|
287
|
+
typingSpeed: 40,
|
|
288
|
+
glitchChance: 0.08,
|
|
289
|
+
nsfw: false
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
window.startExample1 = () => {
|
|
293
|
+
typing1.start('Neural corruption detected... System stabilizing...');
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
window.stopExample1 = () => {
|
|
297
|
+
typing1.stop();
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
window.settleExample1 = () => {
|
|
301
|
+
typing1.settle('System Online');
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
// Example 2: Adjustable
|
|
305
|
+
const output2 = document.getElementById('output2');
|
|
306
|
+
const speedSlider = document.getElementById('speed');
|
|
307
|
+
const glitchSlider = document.getElementById('glitch');
|
|
308
|
+
const speedValue = document.getElementById('speedValue');
|
|
309
|
+
const glitchValue = document.getElementById('glitchValue');
|
|
310
|
+
|
|
311
|
+
speedSlider.addEventListener('input', (e) => {
|
|
312
|
+
speedValue.textContent = `${e.target.value} chars/sec`;
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
glitchSlider.addEventListener('input', (e) => {
|
|
316
|
+
glitchValue.textContent = `${e.target.value}%`;
|
|
317
|
+
});
|
|
318
|
+
|
|
319
|
+
window.startExample2 = () => {
|
|
320
|
+
const typing2 = new TypingAnimation(output2, {
|
|
321
|
+
typingSpeed: parseInt(speedSlider.value),
|
|
322
|
+
glitchChance: parseInt(glitchSlider.value) / 100,
|
|
323
|
+
nsfw: false
|
|
324
|
+
});
|
|
325
|
+
typing2.start('Loading data streams... Reality.exe has stopped responding...');
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
// Example 3: Custom
|
|
329
|
+
const output3 = document.getElementById('output3');
|
|
330
|
+
const customInput = document.getElementById('customMessage');
|
|
331
|
+
|
|
332
|
+
window.startExample3 = () => {
|
|
333
|
+
const message = customInput.value || 'Enter a message above!';
|
|
334
|
+
const typing3 = new TypingAnimation(output3, {
|
|
335
|
+
nsfw: false
|
|
336
|
+
});
|
|
337
|
+
typing3.start(message);
|
|
338
|
+
};
|
|
339
|
+
|
|
340
|
+
// Auto-start example 1 on load
|
|
341
|
+
setTimeout(() => startExample1(), 500);
|
|
342
|
+
</script>
|
|
343
|
+
</body>
|
|
344
|
+
</html>
|
package/examples/button.html
CHANGED
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
138
138
|
</div>
|
|
139
139
|
</li>
|
|
140
|
-
<li><a href="../
|
|
140
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
141
141
|
</ul>
|
|
142
142
|
</div>
|
|
143
143
|
</nav>
|
package/examples/card.html
CHANGED
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
247
247
|
</div>
|
|
248
248
|
</li>
|
|
249
|
-
<li><a href="../
|
|
249
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
250
250
|
</ul>
|
|
251
251
|
</div>
|
|
252
252
|
</nav>
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
163
163
|
</div>
|
|
164
164
|
</li>
|
|
165
|
-
<li><a href="../
|
|
165
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
166
166
|
</ul>
|
|
167
167
|
</div>
|
|
168
168
|
</nav>
|
package/examples/form.html
CHANGED
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
204
204
|
</div>
|
|
205
205
|
</li>
|
|
206
|
-
<li><a href="../
|
|
206
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
207
207
|
</ul>
|
|
208
208
|
</div>
|
|
209
209
|
</nav>
|