Wie ich Tom Riddles Tagebuch ins Web gebracht habe
Ich habe das ursprüngliche Hardware-Experiment für das reMarkable Paper Pro in ein Web-MVP für Smartphones und Tablets übertragen: Tinte versinkt im Pergament, KI liest die Handschrift, und die Antwort schreibt sich direkt zurück auf die Seite.
Stellen Sie sich vor, Sie schreiben eine Frage auf ein leeres, altes Pergament. Einen Moment lang passiert nichts. Dann beginnt die Tinte langsam ins Papier einzusinken, bis sie ganz verschwindet. Die Seite wird still, und wenige Sekunden später entsteht aus der Tiefe des Pergaments eine Antwort, Strich für Strich, in eleganter Handschrift.
Keine Tastatur. Keine Chatblasen. Nur Sie, das Papier und ein Tagebuch, das etwas zu geduldig wirkt.
Genau so funktioniert mein Web-MVP von Tom Riddles Tagebuch. Ich habe die ursprüngliche Hardware-Idee für das e-ink Tablet reMarkable Paper Pro genommen und in eine mobile Webanwendung verwandelt, die in einem normalen Browser läuft.
Wo alles begann
Die Inspiration war das Open-Source-Projekt von Maxime Rivest: MaximeRivest/Riddle.
Das ursprüngliche Riddle ist eine Anwendung für das reMarkable Paper Pro, geschrieben vor allem in Rust, C und C++. Sie liest Stylus-Striche direkt aus Low-Level-Eingaben, arbeitet im Takeover-Modus mit dem Display und rendert die Antwort zurück auf die e-ink Fläche, sodass sie wie handgeschriebener Text wirkt.
Es ist ein wunderbar physisches Projekt: Stift, Papier, e-ink und fast keine Benutzeroberfläche. Ich stellte mir eine einfache Frage: Könnte ein ähnliches Gefühl auch ohne spezielle Hardware funktionieren, nur auf einem Smartphone oder Tablet?
Vom reMarkable in den Browser
Die Hardware-Version kann sich auf Stylus-Eingaben, Linux-Events und direkte Displaysteuerung verlassen. Die Web-Version lebt in einer ganz anderen Umgebung: Touchscreens, mobiles Safari, Android Chrome, unterschiedliche Seitenverhältnisse, hochauflösende Displays und Browser-Gesten, die sich gern ins Zeichnen einmischen.
Deshalb habe ich die Web-Adaption neu auf einem einfachen Stack gebaut: Node.js, Express, HTML5, CSS und Vanilla JavaScript. Das Ziel war kein normaler Chatbot im Tagebuch-Kostüm. Ich wollte die zentrale Illusion erhalten: Man schreibt direkt auf die Seite, und die Seite antwortet.
Canvas statt Stift, Gemini statt Augen
Den physischen Stift habe ich durch ein HTML5 Canvas mit Pointer Events ersetzt. Dadurch funktioniert dieselbe Fläche je nach Gerät mit Maus, Finger oder Stylus.
Wenn der Nutzer etwa 2,8 Sekunden lang nicht mehr schreibt, behandelt die App die Seite als abgeschlossen:
- das Canvas wird als PNG exportiert,
- der Server sendet das Bild an Gemini Vision,
- das Modell liest die Handschrift,
- und erzeugt sofort eine Antwort in der Rolle von Tom Riddle.
Der Vorteil: Der Nutzer muss kein Textfeld treffen. Er schreibt wie in ein Notizbuch. OCR und Sprachmodell bleiben hinter der Bühne verborgen.
Tinte, die ins Papier einsinkt
Der wichtigste Teil des Erlebnisses ist nicht der technisch komplizierteste, aber emotional entscheidet er über alles: Die Tinte darf nicht einfach verschwinden. Sie muss einsinken.
Nach dem Schreiben verblassen die Striche deshalb über CSS-Transitions, Transparenz und eine leichte Unschärfe langsam. Die Handschrift verschwindet nicht auf einmal, sondern löst sich in der Papiertextur auf. Dadurch entsteht eine kleine Pause, in der die Seite lebendig wirkt.
Toms Antwort kehrt anschließend mit Dancing Script und einer kleinen Animationsschleife zurück. Der Text erscheint nicht sofort, sondern Zeichen für Zeichen, mit kleinen zufälligen Verzögerungen. Das wirkt eher wie eine Feder als wie ein Drucker.
Mobiler Modus: eine Seite statt zwei
Auf dem Desktop kann das Tagebuch wie ein aufgeschlagenes Buch wirken. Auf dem Smartphone würde ein zweiseitiges Layout schnell unlesbar. Deshalb schaltet die App auf mobilen Geräten in einen Ein-Seiten-Modus.
Die Antwort erscheint direkt über der Zeichenfläche als transparente Ebene. Der Nutzer bleibt in einem Raum: Er schreibt auf die Seite, die Tinte verschwindet, und die Antwort erscheint an derselben Stelle.
Der Präzisionsfehler: Scale Drift
Auf hochauflösenden Displays trat ein unangenehmer Fehler auf. Je weiter der Finger von der linken oberen Ecke entfernt war, desto stärker driftete die Tinte vom tatsächlichen Berührungspunkt weg. Auf den ersten Blick klein. Beim Schreiben fatal.
Die Ursache war der Unterschied zwischen den physischen Pixeln des Canvas und seiner visuellen Größe in CSS. Ich habe das durch eine explizite Umrechnung der Koordinaten behoben:
const rect = canvas.getBoundingClientRect()
const scaleX = canvas.width / rect.width
const scaleY = canvas.height / rect.height
const x = (event.clientX - rect.left) * scaleX
const y = (event.clientY - rect.top) * scaleY
Seitdem sitzt die Tinte auch auf Retina-Displays genau unter der Stiftspitze.
Video-Demo
Eine kurze Demo gibt es auch auf Social Media:
Für den Blog ist es am saubersten, das lokale Video einzubinden und die Social Links als Fallback zu nutzen:
Wohin es weitergehen kann
Dieses MVP ist klein, aber es öffnet eine spannende Frage: Muss ein LLM wirklich immer in einem Chatfenster sitzen?
In AI Studio könnte ein solches Tagebuch Schriftstellern helfen. Der Autor würde nicht mit einem anonymen Assistenten sprechen, sondern mit einer konkreten Figur, die er gerade entwickelt. Die Figur könnte in ihrem eigenen Stil, Rhythmus, ihrer Stimme und visuellen Form antworten. Brainstorming würde sich vom normalen Prompting zu einem Dialog verschieben, der fast literarisch wirkt.
In Hyperprostor könnte dieses Pergament zu einem besonderen UI-Widget werden. Statt ein Formular auszufüllen, könnte der Nutzer eine Mindmap zeichnen, handschriftlich schreiben, Befehle eingeben oder mit einem digitalen Wesen in einer Oberfläche sprechen, die zu dessen Rolle passt.
Und dann kommt die Stimme. Geflüsterte Eingabe über Speech-to-Text könnte Wörter von selbst auf dem Pergament erscheinen lassen. Text-to-Speech könnte Tom Riddle am Ende tatsächlich von der Seite sprechen lassen.
Tom Riddles Tagebuch im Web zeigt, dass künstliche Intelligenz nicht nur in den kalten Blasen moderner Chat-Apps leben muss. Wenn Handschrift, visuelles Verstehen, Animation und eine gut gewählte Modellrolle zusammenkommen, entsteht etwas, das nicht nur nützlich ist. Es fühlt sich ein wenig magisch an.
