GameCult/gamecult-site
Watch
9
0
Fork
You've already forked gamecult-site
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Project Thing hero: drop the scroll scatter and I-zoom with the 260vh pin

Browse source 
The hero is one screen; the load-time slam, shake, rings, burst, flash
and ticker are unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Meta Vens 2026-10-02 14:24:46 +02:00
commit 1cf2029c77
1 changed files with 10 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

28
site/quartz/static/applets/project-thing/index.html
View file

@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap">
<style>
/* Layout: a consulting board deck unrolled into one scroll. Only the hero pins; every exhibit after it scrolls naturally while its contents animate in place or in a sticky background layer */
/* Layout: a consulting board deck unrolled into one scroll. Nothing pins the page; every exhibit scrolls naturally while its contents animate in place or in a sticky background layer */
:root{
color-scheme:dark;
--paper:#07111a; --ink:#eef5ff; --ink-2:#b7c7d9; --ink-3:#63758a; --rule:#16212c; --tint:#16212c; --tint-2:rgba(89,183,255,.14);
@ -42,10 +42,9 @@ b,strong{font-weight:500}
.hud-pill{position:fixed;right:clamp(12px,2vw,24px);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;gap:14px;font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;pointer-events:none;font-variant-numeric:tabular-nums;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.hud-pill b{color:var(--paper);font-weight:500}
/* HERO: the one pinned scene */
.hero{position:relative;height:260vh}
.stage{position:sticky;top:env(safe-area-inset-top,0px);height:100vh;height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--inv);color:var(--inv-ink)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%, var(--accent), transparent 60%);opacity:calc(.3 + var(--p)*.5);animation:pulse 3.2s ease-in-out 2s infinite}
/* HERO: one screen */
.stage{position:relative;height:100vh;height:calc(100svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--inv);color:var(--inv-ink)}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%, var(--accent), transparent 60%);opacity:.3;animation:pulse 3.2s ease-in-out 2s infinite}
@keyframes pulse{50%{filter:brightness(1.35)}}
.rays{position:absolute;left:50%;top:55%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;background:repeating-conic-gradient(from 0deg, var(--inv-accent) 0deg 4deg, transparent 4deg 15deg);-webkit-mask-image:radial-gradient(circle, #000 6%, transparent 42%);mask-image:radial-gradient(circle, #000 6%, transparent 42%);opacity:0;animation:rayin .9s ease-out 2s forwards, spin 70s linear 2s infinite}
@keyframes rayin{to{opacity:.16}}
@ -58,7 +57,7 @@ b,strong{font-weight:500}
.hero-in.shake-big{animation:shakebig .7s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{20%{transform:translate(-6px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(3px,4px)}}
@keyframes shakebig{10%{transform:translate(-18px,10px) rotate(-.6deg)}25%{transform:translate(16px,-14px) rotate(.5deg)}40%{transform:translate(-12px,-8px)}55%{transform:translate(10px,10px) rotate(-.3deg)}70%{transform:translate(-6px,4px)}85%{transform:translate(3px,-3px)}}
.fade{opacity:max(0,calc(1 - var(--p)*3));display:block}
.fade{display:block}
.in{animation:rise .6s cubic-bezier(.2,.8,.2,1) var(--d,0s) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.hero .eyebrow{color:var(--inv-accent)}
@ -70,8 +69,7 @@ b,strong{font-weight:500}
.hero h1{font-family:var(--display);font-weight:200;line-height:.9;display:flex;flex-direction:column}
.proj{display:block;font-style:normal;font-weight:100;font-size:clamp(30px,5vw,64px);color:var(--inv-2)}
.letters{font-size:clamp(96px,22vw,300px);letter-spacing:-.02em;white-space:nowrap;font-weight:100}
.l{display:inline-block;transform:translate(calc(var(--p)*var(--dx,0px)),calc(var(--p)*var(--dy,0px))) rotate(calc(var(--p)*var(--rot,0deg)));will-change:transform}
.l.zoom{transform:scale(calc(1 + var(--p)*var(--p)*90));opacity:clamp(0,calc((1 - var(--p))*7),1)}
.l{display:inline-block}
.li{display:inline-block;animation:slam .42s cubic-bezier(.6,0,1,.5) var(--d) both}
@keyframes slam{0%{opacity:0;transform:scale(7) translateY(-12%);filter:blur(14px)}60%{opacity:1}100%{opacity:1;transform:none;filter:none}}
.hero-sub{font-size:clamp(18px,2vw,24px);line-height:1.45;max-width:46ch;color:var(--inv-2)}
@ -247,8 +245,7 @@ tr.strike td::after{content:"";position:absolute;left:0;right:0;top:50%;height:2
}
/* reduced motion: everything in its finished, readable state */
.rm .hero{height:auto}
.rm .stage{position:relative;top:0;height:auto;min-height:88vh;padding-block:96px 160px}
.rm .stage{height:auto;min-height:88vh;padding-block:96px 160px}
.rm .in,.rm .li,.rm .strike::after,.rm .ticker,.rm .tk,.rm .flash,.rm .hero-bg,.rm .cue::after{animation:none!important}
.rm .rays{animation:none;opacity:.12}
.rm .flash{opacity:0}
@ -260,14 +257,14 @@ tr.strike td::after{content:"";position:absolute;left:0;right:0;top:50%;height:2
<div class="hud-pill" aria-hidden="true"><span>Synergy realised <b class="syn">0%</b></span><span>Live TPS <b class="tps">0</b></span></div>
<!-- HERO -->
<section class="hero" style="--p:0">
<section class="hero">
<div class="stage">
<div class="hero-bg" aria-hidden="true"></div>
<div class="rays" aria-hidden="true"></div>
<div class="wrap hero-in">
<div class="fade"><p class="eyebrow in" style="--d:.1s">Thing Transformation Office · Board discussion document · October 2026</p></div>
<div class="fade"><p class="was in" style="--d:.3s"><span class="strike">Project Eve</span><span>Deprecated: based on a copyrighted character</span></p></div>
<h1 aria-label="Project THING"><span class="fade" aria-hidden="true"><span class="proj in" style="--d:.85s">Project</span></span><span class="letters" aria-hidden="true"><span class="l" style="--dx:-60vw;--dy:-45vh;--rot:-70deg"><span class="li" style="--d:1s">T</span></span><span class="l" style="--dx:-30vw;--dy:60vh;--rot:45deg"><span class="li" style="--d:1.13s">H</span></span><span class="l zoom"><span class="li" style="--d:1.26s">I</span></span><span class="l" style="--dx:35vw;--dy:-60vh;--rot:60deg"><span class="li" style="--d:1.39s">N</span></span><span class="l" style="--dx:65vw;--dy:45vh;--rot:-40deg"><span class="li" style="--d:1.52s">G</span></span></span></h1>
<h1 aria-label="Project THING"><span class="fade" aria-hidden="true"><span class="proj in" style="--d:.85s">Project</span></span><span class="letters" aria-hidden="true"><span class="l"><span class="li" style="--d:1s">T</span></span><span class="l"><span class="li" style="--d:1.13s">H</span></span><span class="l"><span class="li" style="--d:1.26s">I</span></span><span class="l"><span class="li" style="--d:1.39s">N</span></span><span class="l"><span class="li" style="--d:1.52s">G</span></span></span></h1>
<div class="fade"><p class="hero-sub in" style="--d:2.25s">Reframing the semantic surface value chain through an etymologically grounded, deity-light naming architecture</p></div>
<div class="fade"><p class="cue in" style="--d:2.5s">Scroll to realise synergies</p></div>
</div>
@ -540,7 +537,7 @@ tr.strike td::after{content:"";position:absolute;left:0;right:0;top:50%;height:2
function $$(s,c){return Array.prototype.slice.call((c||document).querySelectorAll(s));}
function tok(n,f){return getComputedStyle(root).getPropertyValue(n).trim()||f;}
var hero=$('.hero'), heroStage=$('.hero .stage'), heroIn=$('.hero-in');
var heroStage=$('.hero .stage'), heroIn=$('.hero-in');
var reveals=$$('[data-reveal]');
var etym=$('.etym'); if(!reduce) etym.classList.add('scrub');
var matrix=$('.matrix'), wfSec=$('[data-wf]'), tam=$('[data-tam]'), statement=$('[data-statement]');
@ -618,11 +615,6 @@ tr.strike td::after{content:"";position:absolute;left:0;right:0;top:50%;height:2
ticking=false;
var vh=window.innerHeight;
// hero: the only pinned scene
var hp=0;
if(!reduce){var hr=hero.getBoundingClientRect(),tot=hr.height-heroStage.offsetHeight;hp=tot>0?clamp(-hr.top/tot):0;}
hero.style.setProperty('--p',hp.toFixed(4));
// quadrant
var qp=reduce?1:flowP(matrix,vh,0.95,0.6);
matrix.style.setProperty('--p',qp.toFixed(4));