-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
271 lines (251 loc) · 14.6 KB
/
Copy pathdemo.html
File metadata and controls
271 lines (251 loc) · 14.6 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
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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<meta name="color-scheme" content="dark" />
<title>INFOHAZARD — demo</title>
<!-- preload the reveal assets so "The Last Psyop" fades in seamlessly: the LED font and
war-room photo live in hidden elements, so without this they'd only start loading at
reveal time (causing the wrong-font flash + black-then-photo pop). -->
<link rel="preload" href="assets/LEDLIGHT.otf" as="font" type="font/otf" crossorigin />
<link rel="preload" href="assets/revbg.mp4" as="video" type="video/mp4" />
<!-- classic serifs for the elegant reveal — Cormorant Garamond (display) + EB Garamond (body) -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap" />
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<!-- ░░░ THE EYE (exact gate eye) ░░░ -->
<main id="hero">
<svg id="hazard" viewBox="0 0 600 560" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Infohazard — the watching eye">
<defs>
<radialGradient id="iris" cx="50%" cy="48%" r="52%">
<stop id="s0" offset="0%" stop-color="#fffbd0" />
<stop id="s1" offset="34%" stop-color="#f2dd00" />
<stop id="s2" offset="72%" stop-color="#a07a00" />
<stop id="s3" offset="100%" stop-color="#3a2a00" />
</radialGradient>
<radialGradient id="sclera" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#16160f" />
<stop offset="100%" stop-color="#050504" />
</radialGradient>
<clipPath id="eyeClip" clipPathUnits="userSpaceOnUse">
<path d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z" />
</clipPath>
<!-- info "i" punched into the pupil (default on) -->
<mask id="iMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect x="246" y="301" width="108" height="108" fill="#fff" />
<circle cx="300" cy="346.5" r="3.4" fill="#000" />
<rect x="296.8" y="351.5" width="6.4" height="14" rx="3.2" fill="#000" />
</mask>
<!-- becomes a heart on blessing -->
<mask id="heartMask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
<rect x="246" y="301" width="108" height="108" fill="#fff" />
<path d="M300 372 C322 352 315 334 300 344 C285 334 278 352 300 372 Z" fill="#000" />
</mask>
</defs>
<!-- warning triangle -->
<polygon id="triangle" class="tri" points="300,46 542,498 58,498"
fill="none" stroke="#eaff00" stroke-width="14" stroke-linejoin="round" />
<!-- the whole eye (visuals + hit area) scaled to 137% about its centre; the flip/gaze/blink
operate on the inner groups and compose with this -->
<g id="eyeAll" transform="translate(300 355) scale(1.37) translate(-300 -355)">
<!-- eyeball: clipped to the almond, opened/closed by the inner #lid group -->
<g clip-path="url(#eyeClip)">
<g id="lid">
<ellipse id="scleraE" cx="300" cy="355" rx="120" ry="68" fill="url(#sclera)" />
<g id="gaze">
<circle id="irisC" cx="300" cy="355" r="47" fill="url(#iris)" />
<circle id="pupil" cx="300" cy="355" r="20" fill="#040403" mask="url(#iMask)" />
<circle id="hi" cx="285" cy="340" r="7.5" fill="#fffbe6" opacity="0.8" />
</g>
</g>
</g>
<path id="rim" class="rim" d="M 215 355 Q 300 281 385 355 Q 300 429 215 355 Z"
fill="none" stroke="#9bbf00" stroke-width="3" />
<path id="crease" class="crease" d="M 222 356 Q 300 361 378 356"
fill="none" stroke="#7d9a00" stroke-width="3" stroke-linecap="round" />
<ellipse id="eyeHit" cx="300" cy="355" rx="102" ry="82" fill="transparent" pointer-events="all" />
</g>
</svg>
</main>
<!-- proximity red wash -->
<div id="dread" aria-hidden="true"></div>
<!-- ░░░ THE TRUTH — revealed when the heart reaches the eye ░░░ -->
<section id="reveal" hidden>
<!-- ░ LANDING / HERO — the war-room photo shows through here; the title sits on top.
it "sticks" because #revbg is fixed; the opaque paper sections below scroll up over it. ░ -->
<div class="lp-hero">
<div class="lp-hero__inner">
<h1 class="lp-title">The Last Psyop</h1>
<h2 class="lp-event">The September Event</h2>
<p class="lp-tagline">A gain-of-function research & deployment memetic hackathon.</p>
<p class="lp-dates">The weekend of September 4–6, 2026</p>
</div>
<a class="apply" href="https://luma.com/psyop-hackathon" target="_blank" rel="noopener">Apply to Attend</a>
<div class="lp-cue" aria-hidden="true">▼</div>
</div>
<!-- ░ the photo blurs + lightens into the off-white paper here ░ -->
<div class="lp-veil" aria-hidden="true"></div>
<!-- ░ THE PAPER — one continuous orange graph-paper sheet holding all the text sections ░ -->
<div class="lp-paper">
<!-- ░ scrolling "eternal september" separator (toggled in settings) between hero and paper ░ -->
<div class="es-sep" aria-hidden="true"><div class="es-track" id="es-track"></div></div>
<!-- ░ COPY — off-white paper, black serif text ░ -->
<div class="lp-section lp-copy">
<div class="rev-inner">
<div class="lp-rule" aria-hidden="true"><i></i></div>
<blockquote>
<p>It's called “THE LAST PSYOP” because once you play this game — creating a psyop
yourself, seeing what it's like from the other side — you begin to see what % of the information
you're exposed to is organic vs engineered.</p>
<p>You leave with the knowledge, and a toolkit, to spread it to your people back home. To raise the
epistemic waterline and create enclaves of
<a href="https://omarshehata.substack.com/p/what-is-the-ideal-information-environment" target="_blank" rel="noopener">clean information environments</a>.</p>
<p>Many are already lighthouses in this effort —
<a href="https://x.com/TaylorLorenz/status/2062203762442481874" target="_blank" rel="noopener">Taylor Lorenz</a>,
<a href="https://www.etymologynerd.com/" target="_blank" rel="noopener">Etymology Nerd</a>,
<a href="https://rivalvoices.substack.com/p/anatomy-of-a-viral-tweet-2" target="_blank" rel="noopener">Nosilverv</a>, and
<a href="https://defenderofthebasic.substack.com/p/how-hank-green-is-contributing-to" target="_blank" rel="noopener">Hank Green</a>.
May the best final psyop win.</p>
</blockquote>
</div>
</div>
<!-- ░ HOSTS — three portraits ░ -->
<div class="lp-section lp-hosts">
<div class="rev-inner">
<div class="lp-rule" aria-hidden="true"><i></i></div>
<h3 class="hosts-title">Hosts</h3>
<div class="hosts-grid">
<figure class="host">
<div class="host__photo"><img src="assets/hosts/defenderofbasic.webp" alt="DefenderofBasic" loading="lazy" /></div>
<figcaption>
<span class="host__name">DefenderofBasic</span>
<a class="host__handle" href="https://x.com/defenderofbasic" target="_blank" rel="noopener">@defenderofbasic</a>
</figcaption>
</figure>
<figure class="host">
<div class="host__photo"><img src="assets/hosts/workflowsauce.webp" alt="Joshua" loading="lazy" /></div>
<figcaption>
<span class="host__name">Joshua</span>
<a class="host__handle" href="https://x.com/workflowsauce" target="_blank" rel="noopener">@workflowsauce</a>
</figcaption>
</figure>
<figure class="host">
<div class="host__photo"><img src="assets/hosts/katt.jpeg" alt="Katt" loading="lazy" /></div>
<figcaption>
<span class="host__name">Katt</span>
<a class="host__handle" href="https://x.com/kaefairy_" target="_blank" rel="noopener">@kaefairy_</a>
</figcaption>
</figure>
</div>
</div>
</div>
<!-- ░ LIVE PLAYERS — two portraits ░ -->
<div class="lp-section lp-players">
<div class="rev-inner">
<div class="lp-rule" aria-hidden="true"><i></i></div>
<h3 class="hosts-title">Live Players</h3>
<div class="hosts-grid">
<figure class="host">
<div class="host__photo"><img src="assets/hosts/mathew.jpg" alt="Mathew" loading="lazy" /></div>
<figcaption>
<span class="host__name">Mathew</span>
<a class="host__handle" href="https://x.com/mathyouf" target="_blank" rel="noopener">@mathyouf</a>
</figcaption>
</figure>
<figure class="host">
<div class="host__photo"><img src="assets/hosts/nosilver.jpg" alt="Guy" loading="lazy" /></div>
<figcaption>
<span class="host__name">Guy</span>
<a class="host__handle" href="https://x.com/nosilverv" target="_blank" rel="noopener">@nosilverv</a>
</figcaption>
</figure>
<figure class="host">
<div class="host__photo"><img src="assets/hosts/arquilla.jpg" alt="John Arquilla" loading="lazy" /></div>
<figcaption>
<span class="host__name">John Arquilla</span>
<span class="host__role">Father of Cyberwarfare</span>
</figcaption>
</figure>
</div>
</div>
</div>
<!-- ░ FEATURE VIDEO — autoplays WITH sound when scrolled into view; custom controls ░ -->
<section class="lp-section lp-video">
<div class="vfeature">
<div class="vfeature__media">
<video class="vfeature__vid" loop playsinline preload="auto">
<source src="assets/feature.mp4" type="video/mp4" />
</video>
</div>
<!-- centre play/pause -->
<button class="vfeature__center" type="button" aria-label="Play or pause">
<svg class="vf-ic vf-ic--play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5v14l11-7z" /></svg>
<svg class="vf-ic vf-ic--pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h3.4v14H7zM13.6 5H17v14h-3.4z" /></svg>
</button>
<!-- bottom-left mute -->
<button class="vfeature__mute" type="button" aria-label="Mute or unmute">
<svg class="vf-ic vf-ic--on" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 9v6h4l5 4V5L8 9H4z" />
<path d="M16 8.6a4 4 0 010 6.8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M18.6 6a7.5 7.5 0 010 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
<svg class="vf-ic vf-ic--off" viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 9v6h4l5 4V5L8 9H4z" />
<path d="M16 9.5l5.5 5M21.5 9.5l-5.5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<!-- scrub bar — click / drag to seek back and forth -->
<div class="vfeature__bar" aria-label="Seek"><div class="vfeature__track"><div class="vfeature__played"></div></div></div>
</div>
<p class="vfeature__src"><a href="https://x.com/suntzugi/status/1881416582603391082?s=20" target="_blank" rel="noopener">source</a></p>
</section>
<!-- ░ PROSOCIAL ENGINEERING CORP emblem — centred on the graph paper ░ -->
<section class="lp-section lp-emblem">
<a class="lp-emblem__link" href="https://prosocialengineering.org/" target="_blank" rel="noopener" aria-label="Prosocial Engineering Corp">
<img class="lp-emblem__img" src="assets/prosocial.png" alt="Prosocial Engineering Corp — Maximum Good Actuator" loading="lazy" />
</a>
</section>
<!-- ░ footer credit — in flow at the very bottom (only seen after scrolling) ░ -->
<footer class="lp-footer">
<a href="https://lovepill.ai" target="_blank" rel="noopener">Made with <span class="lp-heart">❤️</span></a>
</footer>
</div><!-- /.lp-paper -->
</section>
<!-- pinned credit — the ❤️ is the draggable mechanic -->
<p class="credit">Made with <span id="heart" role="img" aria-label="love">❤️</span></p>
<!-- fixed video backdrop for the reveal (muted, looping, preloaded; covers the viewport).
poster = the war-room still — a fallback if the video can't play -->
<div id="revbg" aria-hidden="true">
<video id="revvid" autoplay loop muted playsinline preload="auto" poster="assets/warroom.jpg">
<source src="assets/revbg.mp4" type="video/mp4" />
</video>
</div>
<!-- background muzak for The Last Psyop — fades in on reveal; elegant toggle at top-right -->
<audio id="bgm" loop preload="auto" src="assets/muzak.mp3"></audio>
<button id="bgm-toggle" class="bgm-toggle" type="button" aria-label="Toggle music" aria-pressed="true">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path class="bgm-note" d="M9 18V6l10-2.2v11.7" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
<ellipse class="bgm-note" cx="6.6" cy="18" rx="2.9" ry="2.3" fill="currentColor" />
<ellipse class="bgm-note" cx="16.6" cy="15.5" rx="2.9" ry="2.3" fill="currentColor" />
<line class="bgm-slash" x1="3.5" y1="20.5" x2="20.5" y2="3.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
</svg>
</button>
<!-- settings (gear) — opens a small panel of toggles, left of the music button -->
<button id="settings-btn" class="settings-btn" type="button" aria-label="Settings" aria-expanded="false">
<svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="3.4" fill="none" stroke="currentColor" stroke-width="1.7" />
<path d="M12 2.6v3.2M12 18.2v3.2M2.6 12h3.2M18.2 12h3.2M5.1 5.1l2.3 2.3M16.6 16.6l2.3 2.3M18.9 5.1l-2.3 2.3M7.4 16.6l-2.3 2.3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
</svg>
</button>
<div id="settings-panel" class="settings-panel">
<label class="settings-row"><span>Eternal September banner</span><input type="checkbox" id="es-toggle" checked /></label>
</div>
<canvas id="boom" aria-hidden="true"></canvas>
<script src="demo.js"></script>
</body>
</html>