Sanduhr-Countdown-Timer

Auf einen Blick

Warum die Seite mit einer Sanduhr beginnt

Die Entstehungsgeschichte des Sanduhr-Designs, von den Leuten, die es gezeichnet haben.

Die Sanduhr wurde zuerst gezeichnet, weil sie die ehrliche Form eines Countdowns ist. Jedes andere Design auf dieser Seite ist eine Metapher — eine sinkende Sonne, eine kürzer werdende Kerze, ein leer laufendes Becken — aber Sand, der durch einen engen Hals fällt, ist vergehende Zeit, ohne Übersetzung. Damit lag die Latte, die jedes spätere Design schaffen musste: ein Blick von der anderen Seite des Raums, und du weißt, wie lange noch, ohne eine Zahl zu lesen.

Sie hat auch die Latte dafür gelegt, wie der Sand sich verhalten soll, und das hat von allen Designs die meiste Sorgfalt gebraucht. Der Sand in der oberen Kugel ist keine flache Form, die an Höhe verliert: er hält einen Krater, der absichtlich eine Schale ist und kein Trichter, damit der restliche Sand als Band an den Glaswänden lesbar ist. Der Krater sitzt nie genau in der Mitte — er wandert, wie echte Haufen nachgeben — und Lawinen kriechen über seine Fläche, statt still zu liegen. In der unteren Kugel landet die fallende Säule mit einem Spritzer, wirbelt einen feinen Staub aus beleuchteten Körnern auf und baut einen Hügel, dessen Kamm weiter lose Körner die Seiten hinunterschüttet.

Die Körner selbst sind kurze Bewegungsstriche, weil fallende Körner so aussehen sollen, als fielen sie, und nicht als schwebten sie. Ein vorgerenderter weicher Punkt macht den billigen Trick möglich: einen Sprite tausende Male stempeln kostet weit weniger als tausende Verläufe pro Partikel, und genau das hält die Szene auf einem fünf Jahre alten Schul-Laptop flüssig.

Um das Glas herum ist der Raum kaum da: ein fast schwarzer Hintergrund, ein atmender Bernsteinschimmer hinter der Kugel und ein langsames Staubfeld mit drei Tiefenhinweisen — Parallaxe, Größe und Drift — die du ausmachen kannst, wenn die Sanduhr ganz allein stehen soll. Messing war der erste Rahmen, weil warmes Metall auf warmem Sand auf jedem Beamer gut aussieht; Nussbaum und Obsidian kamen dazu für holzgetäfelte Arbeitszimmer und sehr dunkle Heimbüros.

Wie sich die Szene bewegt

• Leerlauf. Die obere Kugel ist voll, die Säule hält still, und der Umgebungsschimmer atmet langsam hinter dem Glas.
• Läuft. Der Strahl beginnt: Körner ziehen durch den Hals, der Krater oben wandert und gibt nach, und der Hügel unten steigt mit einem beleuchteten Kamm. Das Staubfeld driftet mit der Maus, außer die Parallaxe ist aus.
• Das letzte Stück. Die obere Kugel dünnt zu einem Band an der Wand aus; der Sandfaden wird heller und stockt, während sein Bogen immer wieder einknickt, und Körnerklumpen reiten die Säule hinunter.
• Null. Ein weicher gläserner Klang steigt, während die letzten Körner landen. Die Anzeige springt auf +mm:ss als Überzeit, damit die Überzeit sichtbar bleibt, und die Sanduhr wartet, aller Sand unten, bis du sie zurücksetzt.

Mach es zu deinem

Der Regler-Button in der unteren Steuerleiste öffnet Szenen-Einstellungen. Die Auswahl bleibt in deinem Browser und übersteht das Neuladen; nichts wird irgendwohin geschickt.

Zwei gemeinsame Bereiche sitzen bei jedem Design an derselben Stelle. Klang wählt den Endklang (oder „wie das Design“), setzt die Lautstärke und legt ein optionales Ticken auf jede der letzten zehn Sekunden. Anzeige verschiebt die Countdown-Zahl — unten, oben, Mitte, unten links oder unten rechts — und färbt sie um: wie das Design, Warmweiß, Weiß, Gold, Eisblau oder Koralle.

Links zum Kopieren

So klingt es

Bei null steigen drei Sinustöne durch ein weiches gläsernes Arpeggio — das klangliche Gegenstück zu den letzten Körnern, die zur Ruhe kommen. Wie alles bei timer.cool wird der Klang vom Browser in dem Moment synthetisiert, in dem er spielt: keine Audiodateien, nichts zum Herunterladen. Die Klangleiste kann eine Glocke, einen Digital-Piep, einen Holzblock oder einen Alarm einsetzen, ein Ticken auf jede der letzten zehn Sekunden legen, oder du schaltest stumm mit M.

Auf Beamer oder Fernseher

Drück F und alle Bedienelemente verschwinden — Messing und Sand werden der ganze Bildschirm, und genau darum geht es: der Timer ist für den Raum, nicht nur für dich. Solange ein Timer läuft, hält die Seite einen Wake Lock, damit das Display mitten in der Session nicht abdunkelt.

Die Tasten: Leertaste Start/Pause, F Vollbild, R zurücksetzen, M stumm, +/− eine Minute dazugeben oder abziehen, solange er läuft, L wiederholen. Zwei ehrliche Grenzen: Auf einem iPhone schaltet der Klingelschalter Web-Audio stumm, und aggressive Energiesparmodi können den Wake Lock auf manchen Geräten überstimmen.

Für wen die Sanduhr da ist

Fragen