+
{/* Phones only (globals.css): dark fades behind the heading and the counter, so a photo flying past never covers the text. */}
-
+ {/* The heading and its scrim fade out as the visitor scrolls into the tunnel (Innovision#homeScroll). */}
+
-
+
- {
const tun = this.$('[data-tunnel]');
if (tun) {
const fr = this.$$('[data-t-frame]'), N = fr.length, TGAP = 1000, cnt = this.$('[data-t-count]');
+ const head = this.$$('[data-t-head]'), cta = this.$('[data-t-cta]');
fr.forEach((f, i) => { f.style.zIndex = String(N - i); });
+ // The heading (and the phone scrim behind it) fades out over the first steps into the tunnel; "View full gallery"
+ // fades in once the last photo is on its way. Both follow the scroll, so scrolling back up reverses them.
+ const fade = (el: HTMLElement, o: number, dy: number) => {
+ const os = String(+o.toFixed(3)), vis = o > 0 ? 'visible' : 'hidden';
+ if (el.style.opacity !== os) { el.style.opacity = os; el.style.transform = 'translateY(' + ((1 - o) * dy).toFixed(1) + 'px)'; }
+ if (el.style.visibility !== vis) el.style.visibility = vis;
+ };
// Only write what changed: replacing the counter's text every scroll update invalidates layout.
const upd = (p: number) => {
+ const ho = Math.max(0, 1 - p / .05);
+ head.forEach((el) => fade(el, ho, -24));
+ if (cta) {
+ const co = Math.min(1, Math.max(0, (p - .86) / .08));
+ fade(cta, co, 18);
+ cta.style.pointerEvents = co > .6 ? 'auto' : 'none';
+ }
const travel = p * (N * TGAP - 200);
// Phones fade a photo out sooner as it passes the camera, before it grows past the room between the heading and the counter.
const near = innerWidth < 720 || (innerHeight < 500 && innerWidth > innerHeight) ? 120 : 250;
@@ -2670,11 +2685,14 @@ export class Innovision extends Component {
{ key: 'other', title: '', items: list.filter((m) => !dw.groups!.some(([cat]) => cat === m.cat)) }]
: [{ key: 'all', title: '', items: list }];
// Numbered in display order; idx is the ticket's place in missions, which the event popup reads.
+ // A titled group with no events yet stays, shown as "Coming soon".
let n = 0;
- const groups = sections.filter((g) => g.items.length).map((g) => ({
+ const groups = sections.filter((g) => g.items.length || g.title).map((g) => ({
key: g.key,
+ title: g.title,
titleU: g.title.toUpperCase(),
count: String(g.items.length).padStart(2, '0'),
+ soon: !g.items.length,
missions: g.items.map((m) => {
const k = n++;
return {
@@ -2697,7 +2715,7 @@ export class Innovision extends Component {
serial: 'IV26-0' + (s.dIndex + 1),
stampText: 'BOARDING SOON · ' + dw.statL.toUpperCase() + ' · ',
frame: 'color-mix(in oklab, ' + dw.ink + ' 50%, transparent)',
- ticker: [0, 1, 2, 3].flatMap(() => ['Now boarding · ' + dw.name, ...missions.map((m) => m.name)]).map((t) => ({ t })),
+ ticker: [0, 1, 2, 3].flatMap(() => ['Now boarding · ' + dw.name, ...groups.flatMap((g) => g.soon ? [g.titleU + ' · Coming soon'] : g.missions.map((m) => m.name))]).map((t) => ({ t })),
chars: [...dw.name.toUpperCase()].map((ch) => ({ ch: ch === ' ' ? ' ' : ch })),
words: dw.tagline.split(' ').map((t) => ({ t })),
specs: dw.specs.map(([k, v], j) => ({ k, v, i: String(j + 1).padStart(2, '0') })),
diff --git a/src/components/innovision/data.ts b/src/components/innovision/data.ts
index 901db0c..074d656 100644
--- a/src/components/innovision/data.ts
+++ b/src/components/innovision/data.ts
@@ -106,7 +106,8 @@ export const WORLDS: World[] = [
specs: [['Category', 'Fun & games'], ['Format', 'Open to all'], ['Vibe', 'Euphoric'], ['Fuel', 'Team spirit'], ['Status', 'Boarding soon']],
categories: ['dts events', 'fun events'],
groups: [['dts events', 'DTS Events'], ['fun events', 'Fun Events']],
- missions: [['Quiz Night', 'Tech, pop culture and everything in between.', 'Team · 2–3', '3 rounds', 'dts events'], ['Project Expo', 'Walk the hall of student builds and vote for your favourite.', 'Open to all', 'All fest', 'dts events'], ['Gaming Arena', 'Squad up for LAN battles and console showdowns.', 'Squad', 'All night', 'fun events'], ['Treasure Hunt', 'Clues scattered across campus. Only the sharpest crews finish.', 'Team · 3–4', 'Campus-wide', 'fun events']] },
+ // No placeholder line-up: each group shows a "Coming soon" card until its events are published.
+ missions: [] },
];
/**
@@ -199,21 +199,25 @@ export default function HomeView({ v }: { v: V }) {
GALLERY
Into the archive
Keep scrolling to fly through moments from Innovision past.
+
diff --git a/src/components/innovision/Innovision.tsx b/src/components/innovision/Innovision.tsx
index 6ac650e..9b84f07 100644
--- a/src/components/innovision/Innovision.tsx
+++ b/src/components/innovision/Innovision.tsx
@@ -1002,9 +1002,24 @@ export class Innovision extends Component
01
/ {v.tunnelTotal}
-
- VIEW FULL GALLERY
-
+ {/* Shown only at the end of the tunnel (Innovision#homeScroll); hidden until then, so it isn't tabbable either. */}
+