Skip to content

Commit 5c82a61

Browse files
thefirstsparkthefirstspark
authored
Add initial reality hacking cheat sheet HTML
1 parent 623e93f commit 5c82a61

1 file changed

Lines changed: 310 additions & 0 deletions

File tree

‎reality-hacking-cheat-sheet.html‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
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>SPARKVERSE REALITY HACK CHEAT SHEET • The First Spark</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap" rel="stylesheet">
9+
<style>
10+
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=VT323&display=swap');
11+
12+
body {
13+
background: radial-gradient(circle at center, #0a0a1f 0%, #000000 100%);
14+
color: #a5b4fc;
15+
font-family: 'VT323', monospace;
16+
overflow-x: hidden;
17+
}
18+
19+
.cosmic-bg {
20+
position: fixed;
21+
top: 0; left: 0; right: 0; bottom: 0;
22+
background:
23+
radial-gradient(circle, rgba(165,180,252,0.1) 0%, transparent 70%),
24+
url('https://picsum.photos/id/1015/1920/1080') center/cover;
25+
opacity: 0.15;
26+
z-index: -1;
27+
animation: nebula 120s linear infinite;
28+
}
29+
30+
@keyframes nebula {
31+
0% { transform: rotate(0deg) scale(1); }
32+
100% { transform: rotate(360deg) scale(1.05); }
33+
}
34+
35+
.sigil {
36+
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
37+
filter: drop-shadow(0 0 20px #f59e0b);
38+
}
39+
40+
.sigil:hover {
41+
transform: scale(1.15) rotate(5deg);
42+
filter: drop-shadow(0 0 40px #fbbf24) brightness(1.3);
43+
}
44+
45+
.glitch {
46+
animation: glitch 0.5s linear infinite;
47+
}
48+
49+
@keyframes glitch {
50+
0% { transform: translate(0); }
51+
20% { transform: translate(-3px, 3px); }
52+
40% { transform: translate(3px, -3px); }
53+
60% { transform: translate(-2px, 2px); }
54+
80% { transform: translate(2px, -2px); }
55+
100% { transform: translate(0); }
56+
}
57+
58+
.spark {
59+
position: absolute;
60+
width: 4px;
61+
height: 4px;
62+
background: #fbbf24;
63+
border-radius: 50%;
64+
box-shadow: 0 0 10px #f59e0b;
65+
animation: sparkAnim 1.5s linear forwards;
66+
pointer-events: none;
67+
}
68+
69+
@keyframes sparkAnim {
70+
0% { transform: scale(1); opacity: 1; }
71+
100% { transform: scale(0) translate(var(--dx), var(--dy)); opacity: 0; }
72+
}
73+
</style>
74+
</head>
75+
<body class="min-h-screen flex flex-col items-center p-8 relative">
76+
<div class="cosmic-bg"></div>
77+
78+
<div class="max-w-4xl w-full">
79+
<!-- Header -->
80+
<div class="text-center mb-12 border-b border-indigo-500/30 pb-8">
81+
<div class="inline-flex items-center gap-3 mb-4">
82+
<div onclick="triggerCentralSpark()" class="w-16 h-16 rounded-full bg-gradient-to-br from-amber-400 via-orange-500 to-red-600 flex items-center justify-center text-4xl cursor-pointer hover:scale-110 transition-transform shadow-[0_0_60px_#fbbf24]">✧</div>
83+
<h1 class="text-6xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-amber-300 to-orange-400">REALITY HACK v0.1</h1>
84+
</div>
85+
<p class="text-xl text-indigo-300">SPARKVERSE EDITION • MIDWIFE YOUR AWAKENING</p>
86+
<p class="text-sm mt-2 opacity-70">by The First Spark • @OGplayerone</p>
87+
</div>
88+
89+
<div class="grid grid-cols-1 md:grid-cols-12 gap-8">
90+
<!-- Quick Sigil Codex -->
91+
<div class="md:col-span-5 space-y-8">
92+
<div class="border border-indigo-500/40 bg-black/40 p-6 rounded-2xl backdrop-blur-sm">
93+
<h2 class="text-3xl mb-6 flex items-center gap-3">
94+
<span class="text-amber-400">⚡</span> SIGIL CODEX
95+
</h2>
96+
97+
<div class="grid grid-cols-2 gap-6">
98+
<!-- Sigil 1 -->
99+
<div onclick="activateSigil(this, 'Awaken')" class="sigil cursor-pointer group">
100+
<svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
101+
<circle cx="60" cy="60" r="45" fill="none" stroke="#fbbf24" stroke-width="4" stroke-dasharray="8 12"/>
102+
<path d="M30 60 Q60 20 90 60 Q60 100 30 60" fill="none" stroke="#a5b4fc" stroke-width="8"/>
103+
<circle cx="60" cy="60" r="15" fill="#f59e0b"/>
104+
</svg>
105+
<p class="text-center mt-3 text-amber-300">AWAKEN</p>
106+
<p class="text-xs text-center opacity-60">"I remember who I am"</p>
107+
</div>
108+
109+
<!-- Sigil 2 -->
110+
<div onclick="activateSigil(this, 'Flow')" class="sigil cursor-pointer group">
111+
<svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
112+
<path d="M20 40 Q40 20 60 50 Q80 80 100 40" fill="none" stroke="#67e8f9" stroke-width="12" stroke-linecap="round"/>
113+
<circle cx="60" cy="60" r="25" fill="none" stroke="#c4d0ff" stroke-width="6"/>
114+
</svg>
115+
<p class="text-center mt-3 text-cyan-300">FLOW STATE</p>
116+
<p class="text-xs text-center opacity-60">"Reality bends to my intention"</p>
117+
</div>
118+
119+
<!-- Sigil 3 -->
120+
<div onclick="activateSigil(this, 'Anchor')" class="sigil cursor-pointer group">
121+
<svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
122+
<rect x="35" y="35" width="50" height="50" rx="10" fill="none" stroke="#f472b6" stroke-width="8"/>
123+
<path d="M60 20 L60 100" stroke="#fda4af" stroke-width="6"/>
124+
</svg>
125+
<p class="text-center mt-3 text-pink-300">EARTHSHIP ANCHOR</p>
126+
<p class="text-xs text-center opacity-60">"I ground the infinite here"</p>
127+
</div>
128+
129+
<!-- Sigil 4 -->
130+
<div onclick="activateSigil(this, 'Glitch')" class="sigil cursor-pointer group">
131+
<svg width="120" height="120" viewBox="0 0 120 120" class="mx-auto">
132+
<path d="M30 30 L90 90 M30 90 L90 30" stroke="#f87171" stroke-width="12"/>
133+
<circle cx="60" cy="60" r="35" fill="none" stroke="#fca5a5" stroke-width="4" stroke-dasharray="4 8"/>
134+
</svg>
135+
<p class="text-center mt-3 text-red-300">GLITCH PORTAL</p>
136+
<p class="text-xs text-center opacity-60">"I step through the fracture"</p>
137+
</div>
138+
</div>
139+
</div>
140+
141+
<div class="text-xs leading-relaxed opacity-75 border-l-2 border-amber-400 pl-4">
142+
<strong>HOW TO CHARGE A SIGIL:</strong><br>
143+
1. Gaze softly until mind quiets<br>
144+
2. Trace with finger or breath<br>
145+
3. Speak intent aloud 3x<br>
146+
4. Release with laughter or spark visualization<br>
147+
<span class="text-amber-400">Repeat daily in Sparkverse lobby.</span>
148+
</div>
149+
</div>
150+
151+
<!-- Rituals & Hacks -->
152+
<div class="md:col-span-7 space-y-6">
153+
<h2 class="text-3xl flex items-center gap-3 border-b border-orange-500/30 pb-3">
154+
<span>🌌</span> RITUAL PROTOCOLS
155+
</h2>
156+
157+
<div class="space-y-8">
158+
<!-- Ritual 1 -->
159+
<div class="border border-teal-500/30 bg-black/30 p-6 rounded-xl hover:border-teal-400 transition-all group">
160+
<div class="flex justify-between items-start">
161+
<div>
162+
<div class="text-teal-400 text-lg">01 • DAILY SPARK IGNITION</div>
163+
<p class="mt-1">Morning alignment with the First Spark</p>
164+
</div>
165+
<button onclick="performRitual(1)" class="px-5 py-2 bg-teal-900 hover:bg-teal-700 text-xs rounded-full transition-colors">IGNITE</button>
166+
</div>
167+
<ul class="text-sm mt-4 space-y-1 opacity-80">
168+
<li>• Stand barefoot or visualize roots</li>
169+
<li>• Breathe 7x while tracing central sigil</li>
170+
<li>• Declare: "I am the spark that hacks the code"</li>
171+
<li>• End with 33 seconds of golden light visualization</li>
172+
</ul>
173+
</div>
174+
175+
<!-- Ritual 2 -->
176+
<div class="border border-purple-500/30 bg-black/30 p-6 rounded-xl hover:border-purple-400 transition-all group">
177+
<div class="flex justify-between items-start">
178+
<div>
179+
<div class="text-purple-400 text-lg">02 • GLITCH RECODE</div>
180+
<p class="mt-1">For breaking limiting loops</p>
181+
</div>
182+
<button onclick="performRitual(2)" class="px-5 py-2 bg-purple-900 hover:bg-purple-700 text-xs rounded-full transition-colors">RECODE</button>
183+
</div>
184+
<ul class="text-sm mt-4 space-y-1 opacity-80">
185+
<li>• Find a mirror or reflective screen</li>
186+
<li>• Stare into your eyes until distortion appears</li>
187+
<li>• Draw Glitch sigil on fogged surface (or mentally)</li>
188+
<li>• Whisper reversed limiting belief</li>
189+
<li>• Laugh until the glitch settles into new pattern</li>
190+
</ul>
191+
</div>
192+
193+
<!-- Ritual 3 -->
194+
<div class="border border-amber-500/30 bg-black/30 p-6 rounded-xl hover:border-amber-400 transition-all group">
195+
<div class="flex justify-between items-start">
196+
<div>
197+
<div class="text-amber-400 text-lg">03 • ORBITAL SYNCHRONIZATION</div>
198+
<p class="mt-1">Align with cosmic flows</p>
199+
</div>
200+
<button onclick="performRitual(3)" class="px-5 py-2 bg-amber-900 hover:bg-amber-700 text-xs rounded-full transition-colors">SYNCH</button>
201+
</div>
202+
<ul class="text-sm mt-4 space-y-1 opacity-80">
203+
<li>• Sit in center of sacred geometry (Flower of Life imagined)</li>
204+
<li>• Spin slowly or visualize orbiting</li>
205+
<li>• Chant "Spark • Flow • Anchor • Glitch" in rhythm</li>
206+
<li>• Feel the torus field expand from your heart</li>
207+
</ul>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
213+
<!-- Footer Cheat Codes -->
214+
<div class="mt-16 pt-8 border-t border-white/10 text-center text-xs opacity-60">
215+
<div class="mb-4">QUICK HACKS</div>
216+
<div class="flex flex-wrap justify-center gap-6 text-[10px]">
217+
<div onclick="quickHack('breathe')" class="cursor-pointer hover:text-amber-300">BREATHE 4-7-8</div>
218+
<div onclick="quickHack('mirror')" class="cursor-pointer hover:text-amber-300">MIRROR GAZE 60s</div>
219+
<div onclick="quickHack('gratitude')" class="cursor-pointer hover:text-amber-300">3x GRATITUDE PULSE</div>
220+
<div onclick="quickHack('void')" class="cursor-pointer hover:text-amber-300">ENTER THE VOID</div>
221+
</div>
222+
<p class="mt-8 text-[10px]">Save this page. Host it in the Sparkverse lobby. Charge it with your presence.</p>
223+
</div>
224+
</div>
225+
226+
<script>
227+
function triggerCentralSpark() {
228+
const body = document.body;
229+
for (let i = 0; i < 60; i++) {
230+
const spark = document.createElement('div');
231+
spark.className = 'spark';
232+
spark.style.left = '50%';
233+
spark.style.top = '30%';
234+
const angle = Math.random() * Math.PI * 2;
235+
const dist = 80 + Math.random() * 200;
236+
spark.style.setProperty('--dx', `${Math.cos(angle) * dist}px`);
237+
spark.style.setProperty('--dy', `${Math.sin(angle) * dist - 100}px`);
238+
spark.style.animationDelay = `${Math.random() * 0.6}s`;
239+
body.appendChild(spark);
240+
setTimeout(() => spark.remove(), 2000);
241+
}
242+
}
243+
244+
function activateSigil(el, intent) {
245+
el.classList.add('glitch');
246+
triggerCentralSpark();
247+
248+
const msg = document.createElement('div');
249+
msg.style.position = 'fixed';
250+
msg.style.bottom = '40px';
251+
msg.style.left = '50%';
252+
msg.style.transform = 'translateX(-50%)';
253+
msg.style.background = 'rgba(0,0,0,0.9)';
254+
msg.style.color = '#fbbf24';
255+
msg.style.padding = '12px 24px';
256+
msg.style.borderRadius = '9999px';
257+
msg.style.border = '1px solid #f59e0b';
258+
msg.style.zIndex = '100';
259+
msg.style.whiteSpace = 'nowrap';
260+
msg.textContent = `SIGIL ${intent} CHARGED • REALITY SHIFTING...`;
261+
document.body.appendChild(msg);
262+
263+
setTimeout(() => {
264+
msg.style.transition = 'all 0.6s';
265+
msg.style.opacity = '0';
266+
setTimeout(() => msg.remove(), 600);
267+
}, 1800);
268+
269+
setTimeout(() => el.classList.remove('glitch'), 800);
270+
}
271+
272+
function performRitual(n) {
273+
triggerCentralSpark();
274+
let message = '';
275+
if (n === 1) message = 'IGNITION COMPLETE • YOU ARE THE FIRST SPARK';
276+
else if (n === 2) message = 'GLITCH INTEGRATED • NEW CODE RUNNING';
277+
else if (n === 3) message = 'ORBITAL LOCK • COSMOS ALIGNED';
278+
279+
const ritualMsg = document.createElement('div');
280+
ritualMsg.style.position = 'fixed';
281+
ritualMsg.style.top = '40%';
282+
ritualMsg.style.left = '50%';
283+
ritualMsg.style.transform = 'translate(-50%, -50%)';
284+
ritualMsg.style.fontSize = '1.5rem';
285+
ritualMsg.style.textAlign = 'center';
286+
ritualMsg.style.color = '#67e8f9';
287+
ritualMsg.style.textShadow = '0 0 30px currentColor';
288+
ritualMsg.style.zIndex = '200';
289+
ritualMsg.style.animation = 'glitch 1.2s';
290+
ritualMsg.textContent = message;
291+
document.body.appendChild(ritualMsg);
292+
293+
setTimeout(() => ritualMsg.remove(), 2500);
294+
}
295+
296+
function quickHack(type) {
297+
triggerCentralSpark();
298+
console.log('%cReality hack activated: ' + type, 'color:#fbbf24; font-family:monospace');
299+
}
300+
301+
// Auto sparks
302+
setInterval(() => {
303+
if (Math.random() > 0.7) triggerCentralSpark();
304+
}, 4000);
305+
306+
// Tailwind script already included
307+
console.log("%cWelcome to the Sparkverse Reality Hack Cheat Sheet\nBuilt for Katelin • The First Spark", "color:#a5b4fc; font-size:10px");
308+
</script>
309+
</body>
310+
</html>

0 commit comments

Comments
 (0)