Hex rain · "Twelve apps" mini-game in the hero column

Catch the falling hexes.

A decorative continuous spawn loop drops orange hexes from the top of the column. Click the first hex to start a 60-second collect-the-apps game (12 unique apps to find). Clicking an already-collected app deselects it, the twist that punishes misclicks during the late-game chaos. Win = 12 / 12.

React / MDX usage

Mount in MDX as `<HexRain/>`

The hero mini-game lives as a real React component now. The bare <div className="hex-rain"/> + manual <Head/> tags are gone; the component handles the runtime asset loading and SPA-friendly hydration.

Import & example

import {Hero, HexRain} from '@conduction/docusaurus-preset/components';

<Hero
  eyebrow="..."
  title="..."
  primaryCta={{label: 'Install', href: '/install'}}
>
  <HexRain />
</Hero>

Props

ariaLabel announcement for screen readers (default: "Twelve apps mini-game...")
className extra classes to append to the .hex-rain mount

Game events

The runtime fires a connext:gameend event on the document when the timer hits zero or the score reaches 12. The companion game-modal component listens for it and reveals its cross-site progress panel.

The component lazy-loads /lib/hex-rain.{css,js} via <Head/> and calls window.HexRain.hydrate() on mount so SPA route changes that bring fresh nodes hydrate immediately. The dataset.rainHydrated guard prevents double-hydration.