Irgendwann hat jeder schon mal auf einen Kugelschreiber gedrückt und gefragt, wo das Klicken eigentlich herkommt. Bryan Macomber, Maschinenbauingenieur bei Google und Illustrator aus San Francisco, hat daraus ein Webprojekt gemacht, das sich schwer in eine Schublade stecken lässt: halb technische Dokumentation, halb animiertes Kunstwerk.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügenDas Wichtigste in Kürze
- mechanical-pencil.com von Bryan Macomber zerlegt Alltagsgegenstände als interaktive CAD-Illustrationen
- Aktuell vier Objekte: Pilot G2 Kugelschreiber, Zippo-Feuerzeug, BIC-Druckbleistift, Pez-Spender
- Technisch: Framer-basiert, scrollgetriebene Animationen, kein JavaScript-Framework sichtbar
- Kostenlos, browserbasiert, keine Anmeldung
Wie funktioniert das Projekt technisch?
Macombers Prozess beginnt am physischen Objekt. Das Produkt wird zerlegt, per CAD digital nachgebaut, jede Ansicht von Hand illustriert und schließlich für das Web animiert. Das Ergebnis sind scrollgetriebene Sequenzen, bei denen einzelne Bauteile mit dem Mausscrollen auseinanderfahren und wieder zusammensetzen. Die Website läuft auf mechanical-pencil.com und ist auf Framer gebaut, was den flüssigen Übergang zwischen Illustrationen und animierten Ebenen ohne externes JavaScript-Framework ermöglicht.
Was hat das mit Webdesign zu tun?
Das Projekt ist ein gelungenes Beispiel dafür, was passiert, wenn jemand technisches Fachwissen direkt ins Medium Website überträgt, statt es in ein PDF oder eine Präsentation zu stecken. Die scrollgetriebene Animation folgt dem Nutzerverhalten und doziert nicht. Für Webdesigner ist das Projekt interessant, weil Macomber mit Framer erreicht, was viele mit GSAP oder komplexem Canvas-Code versuchen. Für alle anderen ist es schlicht ein Vergnügen, den Pilot G2 auf dem Bildschirm in seine 23 Einzelteile zerfallen zu sehen.
Das Web wird noch zu selten als Lernmedium mit echter Tiefe gebaut. Macomber zeigt, dass eine einzige gut animierte Seite mehr erklärt als ein zwanzigseitiges Handbuch.
— Markus Seyfferth, Chefredakteur Dr. Web
Aktuell umfasst die Sammlung vier Objekte, der neuste Eintrag ist der Pilot G2 Retractable Pen von 1997. Macomber hat über Instagram angekündigt, die Auswahl weiter auszubauen. Wer sich für animierte SVGs als Webdesign-Technik interessiert, findet bei uns einen ausführlichen SVG-Ratgeber sowie eine Übersicht zu SVG-Animationstools.
Welche Objekte sind bereits online?
Neben dem Kugelschreiber sind ein Zippo-Feuerzeug (Baujahr 1933), ein BIC-Druckbleistift (1988) und ein Pez-Spender (1952) verfügbar. Jedes Objekt bekommt eine eigene Seite mit vollständiger Explosionsansicht und Bauteilbeschriftung. Die technische Präzision ist bemerkenswert: Beim Kugelschreiber ist sogar der Spannkegel mit Namen beschriftet, ein Teil, das die meisten täglich berühren, ohne es je bewusst wahrgenommen zu haben.
