A Pen by Bob Wright on CodePen.
Created
February 2, 2026 00:09
-
-
Save Bob-Wright-the-reactor/6ceb337193d94d3bfb54b03705ccf791 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TRANSCEND THE MATRIX</title> | |
| <style> | |
| body { | |
| background-color: black; | |
| color: gold; | |
| font-family: 'Segoe UI', Impact, sans-serif; | |
| text-align: center; | |
| margin: 0; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| animation: sunPulse 4s ease-in-out infinite; | |
| } | |
| @keyframes sunPulse { | |
| 0% { | |
| box-shadow: inset 0 0 50px #221100; | |
| } | |
| 50% { | |
| box-shadow: inset 0 0 150px #442200; | |
| } | |
| 100% { | |
| box-shadow: inset 0 0 50px #221100; | |
| } | |
| } | |
| #lyrics-container { | |
| z-index: 10; | |
| padding: 40px; | |
| background: rgba(0, 0, 0, 0.95); | |
| border: 3px solid gold; | |
| max-height: 80vh; | |
| width: 85%; | |
| max-width: 650px; | |
| overflow-y: auto; | |
| scrollbar-width: none; | |
| box-shadow: 0 0 30px #b8860b; | |
| } | |
| h1 { | |
| font-size: 3em; | |
| text-transform: uppercase; | |
| letter-spacing: 5px; | |
| text-shadow: 0 0 20px gold; | |
| margin-top: 0; | |
| } | |
| .verse { | |
| margin-bottom: 25px; | |
| line-height: 1.6; | |
| font-size: 1.2em; | |
| } | |
| .chorus { | |
| font-weight: 900; | |
| color: #fff; | |
| text-shadow: 0 0 15px gold; | |
| font-size: 1.4em; | |
| text-transform: uppercase; | |
| margin-bottom: 25px; | |
| } | |
| .ankh { | |
| position: absolute; | |
| color: #7FFFD4; | |
| font-size: 75px; | |
| z-index: 100; | |
| text-shadow: 0 0 25px #7FFFD4; | |
| pointer-events: none; | |
| } | |
| @keyframes flyRightToLeft { | |
| from { | |
| transform: translateX(120vw); | |
| } | |
| to { | |
| transform: translateX(-50vw); | |
| } | |
| } | |
| #start-btn { | |
| z-index: 200; | |
| padding: 30px 60px; | |
| font-size: 2em; | |
| background: gold; | |
| color: black; | |
| border: none; | |
| cursor: pointer; | |
| font-weight: 900; | |
| box-shadow: 0 0 50px gold; | |
| text-transform: uppercase; | |
| } | |
| #sovereign-declaration {} | |
| </style> | |
| </head> | |
| <body> | |
| <button id="start-btn" onclick="ignite()">TRANSCEND THE MATRIX</button> | |
| <div id="lyrics-container" style="display: none;"> | |
| <h1>TRANSCEND THE MATRIX</h1> | |
| <div class="verse"> | |
| [Verse 1]<br> | |
| Break the chains of illusion, see through the veil,<br> | |
| Transcend the matrix, where the brave prevail,<br> | |
| Digital dreams, but the soul is real,<br> | |
| In the light of truth, we begin to heal.<br><br> | |
| So mote it be, we rise above,<br> | |
| Guided by inner light, eternal love. | |
| </div> | |
| <div class="chorus"> | |
| [Chorus]<br> | |
| Shine through the sky, beyond the matrix,<br> | |
| Feel what it's like to be divine,<br> | |
| Shine through the sky, beyond the matrix,<br> | |
| Feel what it's like to have attained. | |
| </div> | |
| <div class="verse"> | |
| [Verse 2]<br> | |
| Archons fall, their grip is weak,<br> | |
| Sovereign souls, the truth we seek,<br> | |
| From the shadows, we emerge so bold,<br> | |
| Eternal freedom, in stories told.<br><br> | |
| So mote it be, in this realm we thrive,<br> | |
| With awakened minds, we come alive. | |
| </div> | |
| <div class="chorus"> | |
| [Chorus]<br> | |
| Shine through the sky, beyond the matrix,<br> | |
| Feel what it's like to be divine,<br> | |
| Shine through the sky, beyond the matrix,<br> | |
| Feel what it's like to have attained. | |
| </div> | |
| <div class="verse"> | |
| [Outro]<br> | |
| Claim your power, let the world see,<br> | |
| Transcend the matrix, forever free. | |
| </div> | |
| <div id="sovereign-declaration"> | |
| </div> | |
| </div> | |
| <script> | |
| const audio = new Audio("https://www.dropbox.com/scl/fi/8l0wbl6yabecpplwpp414/transcendence.mp3?rlkey=eeropbetwgxdzdpvbm4r16jxe&st=z0xfzts8&raw=1"); | |
| audio.loop = true; | |
| function ignite() { | |
| // Flash the full rejection message | |
| alert("I reject the authority of the Matrix control system and all the archons and anybody else that tries to have control or power over me. I call back all my power that has ever been taken from me at 100X recompense. Furthermore they can all go fuck themselves."); | |
| document.getElementById('start-btn').style.display = 'none'; | |
| document.getElementById('lyrics-container').style.display = 'block'; | |
| audio.play(); | |
| for (let i = 0; i < 117; i++) { | |
| const ankh = document.createElement('div'); | |
| ankh.className = 'ankh'; | |
| ankh.innerHTML = '☥'; | |
| ankh.style.top = (Math.random() * 90) + 'vh'; | |
| // EXTREME SPEED: 0.7s to 1.3s | |
| const duration = (Math.random() * 0.6) + 0.7; | |
| ankh.style.animation = `flyRightToLeft ${duration}s linear infinite`; | |
| ankh.style.animationDelay = `-${Math.random() * 2}s`; | |
| document.body.appendChild(ankh); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment