128 lines
6.2 KiB
HTML
128 lines
6.2 KiB
HTML
|
<!doctype html>
|
||
|
|
<html><head><meta charset="UTF-8"/>
|
||
|
|
<title>The Geometry of Trust</title>
|
||
|
|
<meta property="og:type" content="website">
|
||
|
|
<meta property="og:title" content="The Geometry of Trust">
|
||
|
|
<meta property="og:description" content="THE HOST STAND THE FIRST VECTOR THE FLOOR ROUTING INTENT THE PASS REJECT THE FLAWED TRUST THE EXIT MEMORY ENCODED">
|
||
|
|
<meta property="og:url" content="https://bryan-mubarak.4ort.net/">
|
||
|
|
<meta name="twitter:card" content="summary">
|
||
|
|
<meta name="description" content="THE HOST STAND THE FIRST VECTOR THE FLOOR ROUTING INTENT THE PASS REJECT THE FLAWED TRUST THE EXIT MEMORY ENCODED">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||
|
|
<style>
|
||
|
|
:root { --void: #05080a; --steel: #8c9bb5; --fire: #ff4d00; --ghost: rgba(255,255,255,0.1); }
|
||
|
|
body{margin:0;background:var(--void);color:var(--steel);font-family:"Courier New",monospace;}
|
||
|
|
#root{position:relative;width:1920px;height:1080px;overflow:hidden}
|
||
|
|
.clip{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
|
||
|
|
|
||
|
|
/* ACT 1: HOST STAND */
|
||
|
|
#s1 .line{height:2px;background:linear-gradient(90deg,transparent,var(--steel));width:0;transition:width 2s ease-out}
|
||
|
|
#s1 .node{width:40px;height:40px;border:2px solid var(--steel);border-radius:50%;box-shadow:0 0 30px var(--steel)}
|
||
|
|
|
||
|
|
/* ACT 2: FLOOR */
|
||
|
|
#s2 .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;opacity:0}
|
||
|
|
#s2 .cell{border:1px solid var(--ghost);padding:20px;transition:border-color 0.5s}
|
||
|
|
|
||
|
|
/* ACT 3: PASS */
|
||
|
|
#s3 .plate{width:300px;height:300px;border-radius:50%;border:4px dashed var(--steel);animation:spin 20s linear infinite}
|
||
|
|
#s3 .knife{width:600px;height:4px;background:var(--fire);position:absolute;transform-origin:left;transform:rotate(-15deg)}
|
||
|
|
|
||
|
|
/* ACT 4: EXIT */
|
||
|
|
#s4 .echo{font-size:20vw;font-weight:bold;letter-spacing:10vw;opacity:0}
|
||
|
|
|
||
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||
|
|
</style> <script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root" data-composition-id="main" data-start="0" data-width="1920" data-height="1080" data-duration="60">
|
||
|
|
|
||
|
|
<!-- AUDIO TRACKS -->
|
||
|
|
<audio id="voice-s1" src="audio/s1.wav" data-start="0"></audio>
|
||
|
|
<audio id="voice-s2" src="audio/s2.wav" data-start="15"></audio>
|
||
|
|
<audio id="voice-s3" src="audio/s3.wav" data-start="30"></audio>
|
||
|
|
<audio id="voice-s4" src="audio/s4.wav" data-start="45"></audio>
|
||
|
|
<audio id="bgm" src="audio/music.mp3" data-start="0" data-volume="0.12"></audio>
|
||
|
|
|
||
|
|
<!-- SCENE 1: THE HOST STAND (0-15s) -->
|
||
|
|
<section id="s1" class="clip" data-start="0" data-duration="15" data-track-index="1">
|
||
|
|
<div style="position:relative;top:-10%">
|
||
|
|
<div class="line" id="s1-line"></div>
|
||
|
|
<div class="node" id="s1-node" style="margin-top:-20px;left:calc(50% - 20px)"></div>
|
||
|
|
</div>
|
||
|
|
<h1 id="s1-title" style="margin-top:100px;font-size:6vw;">THE HOST STAND</h1>
|
||
|
|
<p id="s1-sub" style="font-size:2vw;margin-top:20px;opacity:0">THE FIRST VECTOR</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 2: THE FLOOR (15-30s) -->
|
||
|
|
<section id="s2" class="clip" data-start="15" data-duration="15" data-track-index="1">
|
||
|
|
<div class="grid" id="s2-grid" style="width:80vw;height:60vh;margin:auto">
|
||
|
|
<!-- 12 cells generated by GSAP -->
|
||
|
|
</div>
|
||
|
|
<h1 id="s2-title" style="z-index:10;font-size:6vw;">THE FLOOR</h1>
|
||
|
|
<p id="s2-sub" style="z-index:10;font-size:2vw;margin-top:20px;opacity:0">ROUTING INTENT</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 3: THE PASS (30-45s) -->
|
||
|
|
<section id="s3" class="clip" data-start="30" data-duration="15" data-track-index="1">
|
||
|
|
<div style="position:relative">
|
||
|
|
<div class="plate" id="s3-plate"></div>
|
||
|
|
<div class="knife" id="s3-knife" style="left:50%;top:50%"></div>
|
||
|
|
</div>
|
||
|
|
<h1 id="s3-title" style="margin-top:150px;font-size:6vw;">THE PASS</h1>
|
||
|
|
<p id="s3-sub" style="font-size:2vw;margin-top:20px;opacity:0">REJECT THE FLAWED</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- SCENE 4: THE EXIT (45-60s) -->
|
||
|
|
<section id="s4" class="clip" data-start="45" data-duration="15" data-track-index="1">
|
||
|
|
<div class="echo" id="s4-echo">TRUST</div>
|
||
|
|
<h1 id="s4-title" style="font-size:6vw;margin-top:100px;">THE EXIT</h1>
|
||
|
|
<p id="s4-sub" style="font-size:2vw;margin-top:20px;opacity:0">MEMORY ENCODED</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
window.__timelines = window.__timelines || {};
|
||
|
|
const tl = gsap.timeline({ paused: true });
|
||
|
|
|
||
|
|
// SCENE 1: HOST STAND
|
||
|
|
tl.to("#s1-title", { opacity: 1, duration: 1, ease: "power2.inOut" }, 0.5);
|
||
|
|
tl.to("#s1-line", { width: "80%", duration: 3, ease: "expo.out" }, 1);
|
||
|
|
tl.to("#s1-node", { boxShadow: "0 0 60px var(--steel)", borderColor: "#fff", duration: 1 }, 2);
|
||
|
|
tl.to("#s1-sub", { opacity: 1, y: 0, duration: 1 }, 4);
|
||
|
|
|
||
|
|
// SCENE 2: FLOOR
|
||
|
|
tl.to("#s2-title", { opacity: 1, duration: 1 }, 15.5);
|
||
|
|
tl.to("#s2-grid", { opacity: 1, duration: 2 }, 16);
|
||
|
|
// Populate grid
|
||
|
|
let cells = [];
|
||
|
|
for(let i=0;i<12;i++) {
|
||
|
|
let cell = document.createElement('div');
|
||
|
|
cell.className='cell';
|
||
|
|
cell.id='s2-cell-'+i;
|
||
|
|
document.getElementById('s2-grid').appendChild(cell);
|
||
|
|
cells.push(cell);
|
||
|
|
}
|
||
|
|
tl.to(cells, {
|
||
|
|
stagger: 0.2,
|
||
|
|
borderColor: "#fff",
|
||
|
|
backgroundColor: "rgba(255,255,255,0.05)",
|
||
|
|
padding: "30px",
|
||
|
|
duration: 0.5
|
||
|
|
}, 17);
|
||
|
|
tl.to("#s2-sub", { opacity: 1, duration: 1 }, 20);
|
||
|
|
|
||
|
|
// SCENE 3: PASS
|
||
|
|
tl.to("#s3-title", { opacity: 1, duration: 1 }, 30.5);
|
||
|
|
tl.to("#s3-plate", { rotation: 360, duration: 15, ease: "none" }, 31);
|
||
|
|
tl.to("#s3-knife", { x: 0, scaleX: 1.5, duration: 0.2, ease: "power4.inOut" }, 35); // The cut
|
||
|
|
tl.to("#s3-plate", { borderStyle: "solid", borderColor: "var(--fire)", duration: 0.1 }, 35.2); // Rejection
|
||
|
|
tl.to("#s3-sub", { opacity: 1, duration: 1 }, 36);
|
||
|
|
|
||
|
|
// SCENE 4: EXIT
|
||
|
|
tl.to("#s4-title", { opacity: 1, duration: 1 }, 45.5);
|
||
|
|
tl.to("#s4-echo", { opacity: 1, letterSpacing: "15vw", scale: 1.2, duration: 4, ease: "expo.out" }, 47);
|
||
|
|
tl.to("#s4-sub", { opacity: 1, duration: 1 }, 50);
|
||
|
|
tl.to("#s4-echo", { opacity: 0, duration: 1 }, 58); // Fade out
|
||
|
|
|
||
|
|
window.__timelines["main"] = tl;
|
||
|
|
</script>
|
||
|
|
</body></html>
|