Something went wrong. Try again.
Web frontend and supporting services for lance.blue
Something went wrong. Try again.
6.7 kB · 165 lines
TypeScript
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166/** * The last word of the hero's pitch, which does not stay still. * * "brag about it on Bluesky" is true and is also the one sentence on the front * page that can leave a stranger with the wrong idea — that Bluesky is the * thing lance.blue is attached to. It is not: any Atmosphere account works, * which is what the sign-in form already says ("Supports Bluesky, Blacksky, or * any other ATproto PDS"). So the word rolls through hosts a player could * really be arriving from, and ends on their own server. * * The list will go stale. Hosts open and hosts close, and nothing here notices * — somebody has to check. Two rules for anything added: a player must be able * to actually hold an account there, and it has to be about as long as the * names already here, because the box is as wide as the widest of them and * every extra character is paid for by the whole paragraph. * * The motion is in styles.css with the rest of the hero's. This file only * decides when to swap, and it does not run at all for a player who has asked * for less motion: something that never stops is what that setting is for, so * they get the first name, sitting still. */
import { el } from "./dom";
/** * Checked 2026-08-07 against the community PDS hosting list at * discourse.atmosphere.community and the hosts named on atmosphereaccount.com, * which is where the sign-in form's heading already sends people. * * The first three are what the order is about: Bluesky, because it is the one * a stranger recognises and it is what the sentence said before it started * moving; then mu.social; then the player's own machine, which is the point * being made. The rest follow, arranged only so that no two of them look alike * in a row — Blacksky and Northsky are both purple, Sprk and mu.social are both * pink. * * The full stop belongs to each name rather than to the sentence. The names are * stacked in one box, so anything after them would have to sit at the far edge * of the widest one, stranded behind a gap after every short name. * * Each name wears its host's own colours, sampled off their sites on * 2026-08-07. `ink` is the type and `glow` is the halo feathered behind it. * * Sample the whole page, not the part above the fold. Two mistakes here were * that. Blacksky came out lime, which is only their bracketed links over a page * that is black and periwinkle four to one; Tangled came out green, which is * one button on a page that is slate and white by two orders of magnitude. * * Both colours have to come off the site. Where a host has two of their own * that is the pair: Sprk's green against their pink, Blacksky's lime against * their periwinkle, Tangled's green against their slate. Bluesky, mu.social and * Northsky are each one colour and nothing else, and an earlier set gave them a * complement off the wheel instead — amber, cyan, gold. It read as invented, * because it was; nothing on bsky.app is amber. So those three take a pale tint * of their own colour as the ink and that colour at full strength as the halo, * which reads as the brand lighting the word from behind rather than as a * second brand nobody has. * * "your PDS" is the one entry that is nobody else's, so it gets ours: the * masthead's teal lit by the accent blue. * * Both are light-dark() pairs. The theme control has to be able to change them, * and light needs the opposite of what dark needs: on a dark page a halo * carries by being lighter than the ground, on a light one by being darker. * * Every glow is saturated and none is a pastel. A pale colour blurred over a * dark background has almost no chroma left to show and comes out white, which * is what an earlier set of these all looked like. */const HOSTS = [ { name: "Bluesky.", ink: "light-dark(#0a5fd0, #93c8ff)", glow: "light-dark(#0069cc, #0085ff)", }, { name: "mu.social.", ink: "light-dark(#a52d7c, #f9b3e2)", glow: "light-dark(#db4aa6, #e0369f)", }, { name: "your PDS.", ink: "var(--brand)", glow: "var(--accent)", }, { name: "Sprk.", ink: "light-dark(#c4006e, #ff3da6)", glow: "light-dark(#0b6b32, #00c853)", }, { name: "Blacksky.", ink: "light-dark(#4a4ad4, #8b8bff)", glow: "light-dark(#5f7a00, #b8e000)", }, { name: "Tangled.", ink: "light-dark(#3b4d63, #b9cce6)", glow: "light-dark(#0f6b32, #16b356)", }, { name: "Northsky.", ink: "light-dark(#6d28d9, #cdb8ff)", glow: "light-dark(#7325d6, #8338ec)", },];
/** Long enough that the sentence gets read as written before anything moves. */const FIRST_HOLD_MS = 1700;const HOLD_MS = 2250;
export function hostCycle(): HTMLElement { // Every name, all in the one grid cell, all hidden but for the one being // shown. Hidden is `visibility`, not `display`, so they all still size the // box: it is as wide as the longest name from the first paint, and the // paragraph around it wraps the same way whichever name is up. Measuring // instead would mean measuring again after the webfont lands, and being // wrong until it did. const words = HOSTS.map((host) => { const word = el("span", { className: "cycle-word", textContent: host.name, }); // Set here rather than in styles.css: this is the host's colour, which is // data about the host, not a decision about how the page looks. word.style.setProperty("--host-ink", host.ink); word.style.setProperty("--host-glow", host.glow); return word; }); const cycle = el("span", { className: "hero-cycle" }, words);
let showing = words[0]!; showing.className = "cycle-word cycle-here";
if (!matchMedia("(prefers-reduced-motion: no-preference)").matches) { return cycle; }
let index = 0;
const tick = (): void => { // The nav can replace this screen at any point, and a detached node is the // only notice of it we get. Returning without booking the next tick ends // the rotation for good. if (!cycle.isConnected) return;
// Nothing to see, so nothing to spend: hold the current name and look again // later rather than rolling through the list into a hidden tab. if (document.visibilityState === "visible") { index = (index + 1) % words.length; const arriving = words[index]!;
// The names that have already had their turn keep cycle-out, and the end // of that animation is holding them hidden. Nothing has to put them back. showing.className = "cycle-word cycle-out"; arriving.className = "cycle-word cycle-in"; showing = arriving; }
setTimeout(tick, HOLD_MS); };
setTimeout(tick, FIRST_HOLD_MS); return cycle;}