invisible/index.html at main · PICHULAX/invisible · GitHub

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>invisible</title>
    <style>
        body, html {
            margin: 0; padding: 0;
            width: 100%; height: 100%;
            background-color: #000;
            display: flex; justify-content: center; align-items: center;
            font-family: 'Courier New', monospace;
            overflow: hidden; color: #afff00;
        }

        #snakeGif {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            object-fit: cover;
            /* Optimización de FPS */
            image-rendering: pixelated;
            transform: translateZ(0);
            will-change: transform;
            z-index: 1;
        }

        .container {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 100%;
        }

        #lyricDisplay {
            position: fixed;
            bottom: 40px;
            width: 100%;
            font-size: 2rem;
            font-weight: bold;
            text-transform: uppercase;
            text-shadow: 2px 2px 10px #000;
            background: rgba(0, 0, 0, 0.5);
            padding: 15px 0;
            /* Animación suave que no consume CPU */
            transition: opacity 0.2s ease;
        }

        #playBtn {
            padding: 20px 40px;
            background: rgba(0, 0, 0, 0.8);
            color: #afff00;
            border: 2px solid #afff00;
            cursor: pointer;
            font-size: 1.5rem;
            letter-spacing: 5px;
            transition: 0.3s;
        }

        #playBtn:hover {
            background: #afff00;
            color: #000;
            box-shadow: 0 0 20px #afff00;
        }
    </style>
</head>
<body>

    <div class="container">
        <button id="playBtn">ESTABLISH MISSION LINK</button>
        <div id="lyricDisplay"></div>
    </div>

    <img id="snakeGif" src="snake.gif">
    <audio id="invisibleAudio" src="invisible.mp3"></audio>

    <script>
        const audio = document.getElementById('invisibleAudio');
        const btn = document.getElementById('playBtn');
        const gif = document.getElementById('snakeGif');
        const display = document.getElementById('lyricDisplay');

        const lrcText = `
[00:03.06]Invisible
[00:07.15]Invisible
[00:11.37]Invisible
[00:15.59]Invisible
[00:17.95](Shy one) walking by the wall
[00:21.96](Shy one) shadows will not fall
[00:26.35](Shy one) is silently ignored
[00:34.86](Quiet one) discouraged by the noise
[00:38.85](Quiet one) living without choice
[00:43.12](Quiet one) is a life without a voice
[00:49.40]When you can't even say my name
[00:55.09]Has the memory gone? Are you feeling numb?
[00:59.30]Go on, call my name
[01:03.55]I can't play this game, so I ask again
[01:07.62]Will you say my name?
[01:11.92]Has the memory gone? Are you feeling numb?
[01:16.00]Or have I become invisible?
[01:29.27](Sky light) that dreamers wish away
[01:33.75](Hindsight) is falling on my face
[01:37.94](Highlights) the shape of my disgrace
[01:44.10]When you don't hear a word I say
[01:49.81]As the talking goes, it's a one-way flow
[01:54.08]No fault, no blame
[01:58.22]Has the memory gone? Are you feeling numb?
[02:02.38]And have I become invisible?
[02:09.26]Invisible
[02:13.49]Invisible
[02:15.66]Invisible
[02:17.34]Invisible
[02:19.37]Invisible
[02:21.44]Invisible
[02:23.61]Invisible
[02:25.68]Invisible
[02:28.13]Invisible
[02:30.07]And no one hears a word they say
[02:36.14]Has the memory gone? Are you feeling numb?
[02:40.29]Not a word they say
[02:44.53]But a voiceless crowd isn't backing down
[02:48.76]When the air turns red
[02:53.02]With their loaded hesitation
[02:57.02]Can you say my name?
[03:01.39]Has the memory gone? Are you feeling numb?
[03:05.59]Have we all become invisible?`;

        function parseLRC(lrc) {
            const lines = lrc.split('\n');
            const result = [];
            const timeReg = /\[(\d+):(\d+\.\d+)\]/;
            lines.forEach(line => {
                const match = timeReg.exec(line);
                if (match) {
                    const t = parseInt(match[1]) * 60 + parseFloat(match[2]);
                    const txt = line.replace(timeReg, '').trim();
                    if (txt) result.push({ t, txt });
                }
            });
            return result;
        }

        const lyrics = parseLRC(lrcText);
        let lastIndex = -1;
        let scrollInterval;

        // Versión optimizada: usa arrays para evitar lag de procesamiento
        function animateTitle(text) {
            clearInterval(scrollInterval);
            let titleArray = (text + "   |   ").split("");

            scrollInterval = setInterval(() => {
                titleArray.push(titleArray.shift());
                document.title = titleArray.join("");
            }, 250); // Velocidad reducida para ganar FPS
        }

        btn.addEventListener('click', () => {
            audio.play();
            btn.style.display = 'none';
            gif.style.display = 'block';
        });

        audio.addEventListener('timeupdate', () => {
            const time = audio.currentTime;
            const idx = lyrics.findLastIndex(l => time >= l.t);

            if (idx !== -1 && idx !== lastIndex) {
                const text = lyrics[idx].txt;
                display.style.opacity = 0; // Efecto rápido de parpadeo
                setTimeout(() => {
                    display.innerText = text;
                    display.style.opacity = 1;
                }, 50);

                animateTitle(text);
                lastIndex = idx;
            }
        });

        audio.addEventListener('ended', () => {
            clearInterval(scrollInterval);
            document.title = "MISSION COMPLETE";
            display.innerText = "OUT OF THE SHADOWS";
        });
    </script>
</body>
</html>