Nový hero: WebGL shader, agent konzole a Opus 5

V dubnu jsem psal o redesignu za 20 minut s 21st.dev. Hero tehdy dostal pixelový pong — míček, který rozbíjí nápis AIREPUBLIC. Měl jsem ho rád. Ale po čtyřech měsících pauzy jsem chtěl, aby homepage ukázala, co se za tu dobu v AI posunulo: agenty, terminál, živý výpočet.

Tak jsem otevřel Claude Code s Opusem 5 a zadal zhruba tohle: "posuň hero technologicky dál, nech si pixelové DNA, musí fungovat v light i dark módu, česky i anglicky, a nesmí to zabít výkon."

Dva nápady, jeden příběh

Hero má teď dvě části a obě vyprávějí totéž — tenhle web píše člověk, který s AI agenty reálně pracuje:

1. Signal field — celé pozadí je mřížka teček vykreslená jedním WebGL fragment shaderem. Každá tečka je jeden "pixel" původního pongu. Přes mřížku teče šum, velké slovo airepublic je zapečené do masky a projíždí přes něj skenovací vlna. Kurzor po sobě nechává vlnku.
2. Agent konzole — vpravo je přehraná Claude Code session: co je nového od posledně? → Read src/content/blog/cs → seřadit → tři nejnovější články. A ty články jsou skutečné odkazy, generované ze stejných MDX souborů jako blog.

Druhý bod je pro mě důležitý. Dekorativní terminál s vymyšleným výstupem by byl kýč. Tenhle je funkční — nahradil tři karty "doporučených článků", které byly pod starým herem, a navíc duplikovaly sekci Blog níž na stránce.

Shader: proč jeden fragment shader

Nejjednodušší by bylo vzít Three.js nebo nějakou particle knihovnu. Jenže tisíce DOM elementů nebo stovky kilobajtů JavaScriptu kvůli tečkám v pozadí? Ne.

Celé pole je jeden trojúhelník přes celou plochu a fragment shader, který pro každý pixel spočítá:

vec2 cell = floor(frag / uCell);
vec2 center = (cell + 0.5) * uCell;

float n = fbm(uv * 2.6 + vec2(t * 0.045, -t * 0.03));  // tekoucí šum
float mask = texture2D(uMask, uv).a;                    // wordmark
float scan = 0.5 + 0.5 * sin(uv.x * 7.0 - t * 1.1 + n * 5.0);
float ripple = uMouseActive * exp(-d / (uCell * 9.0));  // kurzor

float intensity = 0.05 + flow * 0.32 + mask * (0.3 + 0.5 * scan) + ripple * 0.9;
float radius = uCell * (0.1 + 0.3 * intensity);

Intenzita určuje poloměr tečky i barvu. Žádné částice, žádná fyzika — jen matematika na GPU. Wordmark se kreslí jednou do 2D canvasu písmem Space Grotesk (stejným jako nadpisy webu) a nahraje se jako textura. Když se změní velikost okna, přepočítá se.

Pár věcí, na kterých Opus 5 trval a měl pravdu:

• Pauza mimo obrazovku. IntersectionObserver a visibilitychange zastaví requestAnimationFrame, když hero nevidíš. Baterie ti poděkuje.
• prefers-reduced-motion — vykreslí se jeden statický snímek a hotovo.
• Device pixel ratio omezené na 1,5. Na retina displeji by shader jinak počítal 4× víc pixelů pro rozdíl, který nevidíš.
• Fallback. Když prohlížeč WebGL nemá, naskočí původní pong. Starý hero tak úplně nezmizel — jen se stal záchrannou sítí.
• Dark mode bez reloadu. MutationObserver sleduje třídu dark na <html> a posílá do shaderu uniform.

Konzole: nula JavaScriptu

Tohle mě bavilo nejvíc. Konzole vypadá animovaně — příkaz se "napíše", řádky postupně naskakují, kurzor bliká — ale je to čistá server komponenta. Žádný useEffect, žádný state.

Psaní příkazu je CSS animace clip-path se steps():

@keyframes console-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.console-typed { animation: console-type 1.1s steps(26, end) 0.5s both; }

Řádky mají jen odstupňované animation-delay. Výhoda: odkazy na články jsou v HTML od prvního bajtu, takže je vidí Google i lidé s vypnutým JavaScriptem. A s prefers-reduced-motion se zobrazí všechno hned.

Jedinou klientskou částí celého hera tak zůstává shader.

Co se rozbilo

Samozřejmě ne všechno fungovalo napoprvé:

• Wordmark zakrýval obsah. První verze měla slovo přes celou výšku hera a tečky lezly přes text "Naposledy aktualizováno". Řešení: hero má dole rezervovaný pás calc(18vw + 2rem) a wordmark sedí v něm.
• Mobil přetékal. Nadpis měl whitespace-nowrap, což v gridu roztáhlo sloupec za okraj obrazovky. Opravilo to min-w-0, explicitní grid-cols-1 a nowrap až od breakpointu sm.
• Světlý mód byl šedivý. "Horká" barva teček byla moc tmavá a na bílém pozadí působila špinavě. Opus ji přepnul na teal-700 a snížil maximální průhlednost.

Každou iteraci jsem kontroloval přes Chrome DevTools MCP — Claude si stránku sám otevřel, udělal screenshot, podíval se a opravil. Tahle smyčka "napiš → podívej se → oprav" je přesně to, co z Claude Code dělá něco víc než autocomplete.

Co je nového na webu

Když už jsem byl u toho, přibylo i pár článků z toho, co jsem přes léto zmeškal:

• Claude Code přes léto 2026 — workflows, Opus 5, auto mode, 2× limity
• Claude Fable 5 a 5.1 vysvětleně — co je Mythos-class a kdy se vyplatí
• FLORA AI: test přes Claude — a jestli AI umí česky psát do obrázků
• OpenAI přes léto 2026 — GPT-6 Astra, konec Sory a co se dělo jinde

Plus nová recenze FLORA a aktualizované recenze Claude a ChatGPT.

Zkus si na homepage přejet myší přes tečky. A jestli máš vypnuté animace, tak tě zdraví jeden hezký statický snímek.