← Live page Footer connection game — 5 concepts All tests
00

The brief, and what all five share

Every one of these is the same idea in five shapes: two things that were apart end up joined, and joining them is the whole interaction. No score to chase, no fail state, no instructions longer than a line. They live in a strip below the real footer, revealed only once you scroll past it — so nobody hunting for a donate link ever meets a game, and the people who scroll to the very bottom get a small reward for it. All five are keyboard-playable, respect reduced-motion, and draw with brand colour on the site's own dot grid, so at a glance they read as a graphic, not an arcade.

01

Two dots, one line

The simplest version, and the one closest to the brand's alone → known arrow. Two lonely dots drift on the grid; drag from one to the other and a line snaps between them, they both light up, and a fresh pair fades in somewhere else. The only counter is how many connections the visitor has made. Drag, click-then-click, or Tab-then-Enter all work.

Why it fits: it is literally the logo mark's promise as a verb. Risk: so simple it may not hold anyone past three pairs — which may be exactly right for a footer.

Join the two dots

0 connections made

02

Light up the room

A grid of dim dots — a room of students who don't know each other. Click any dot and it lights, then passes the light to its neighbours a beat later, which pass it on again. One click can cascade across the whole field if you pick well. Dots fade back to dim after a while, so the board never ends and never has to be reset.

Why it fits: it is the actual Whisper thesis — one student leader lighting nine, who light the school. Risk: needs a tuned decay rate or it either dies instantly or stays fully lit.

Light one. Watch it spread.

0 students reached

03

Matched pairs

Eight dots in two colours, scattered. Draw a line between any two of the same colour and they join and settle into the row at the bottom as a joined pair. Wrong pairing just springs the line back — no penalty, no message. When all four pairs are made the row spells out a single line of copy, then the board reshuffles.

Why it fits: the closest thing to a real puzzle without a fail state, and the completion line is a place to say something. Risk: the most rules of the five, and colour-only matching needs a shape backup for colour-blind players.

Pair the like shapes

0 of 4 pairs

04

The long table

A single row of dots, like chairs along a table, with one gap. Arrow keys or clicks slide a dot into the gap; the aim is to get every dot touching its neighbours with no gaps left. It is a sliding puzzle reduced to one dimension, so it can be solved in a handful of moves and read at 40px tall — the most footer-shaped of the five.

Why it fits: "pull up a chair" is the whole gesture, and a one-row board fits a footer strip perfectly. Risk: reads more as a fidget than a game — which for this placement may be a feature.

Close the gaps at the table

Arrow keys or click

05

Constellation

No goal at all — the ambient option. Dots drift slowly across the strip and any two that pass close enough draw a faint line between themselves for as long as they stay near. Your pointer is a dot too, so moving through the field pulls lines toward you. It plays itself when nobody is there, which makes it the only one of the five that still looks alive in a screenshot.

Why it fits: it is a mood, not a task, so it can never feel out of place under a page about loneliness. Risk: a well-worn effect, and it is the only one with a per-frame animation cost.

Move through the field

Connections form on their own

02a

Ripple

A black room of white outlines. Click anywhere and one rule runs — each dot fills on a delay set by its distance from your click, so the colour leaves as a clean expanding ring. The colour stays: the room has been changed, not briefly lit. Click again and the next colour from the homepage's own ground palette washes through, so the room keeps being remade. Nothing to tune but the beat.

Click anywhere in the room

Next colour

02b

Row and column

A click lights everyone in that dot's row and column — a cross that reaches the walls of the room. The most legible of the set at a glance, and the only one whose result you can predict before you click.

One student reaches a whole row

0 students reached

02c

One conversation at a time

Not a flood but a walk: the light steps from your dot to one neighbour, then to one of its neighbours, leaving a single lit path behind it. Slow, quiet, and the closest of the five to what one gathering actually looks like.

Start a conversation

0 in the chain

02d

Fill the room

The simplest thing that could work: each click lights one dot and it stays lit. When the last dot lights, the strip says one line and the room empties. A progress bar wearing a room's clothes — and the only variant with a real ending.

Nobody gets left out

0 of 90 known

02e

Turn to your neighbour

Click a dot and it leans toward the dot beside it; both light, and a short line joins them. The room pairs off two at a time. Keeps the joining gesture of concept 01 but on the aligned grid, so it reads as a class rather than as a diagram.

Turn to the person beside you

0 pairs talking

06

Placement — the reveal below the footer

How any of the five would actually sit on the page: a real footer, then the strip underneath it, which only slides into view once the footer's bottom edge clears the viewport. Scroll to the end of this section to see the handoff.

page content…
whisper. Contact · Instagram · YouTube

Join the two dots

0 connections made