Ein Pilot-G2-Kugelschreiber besteht aus 23 Einzelteilen, und auf einer neuen Website fahren alle davon mit dem Scrollen auseinander. Bryan Macomber, Maschinenbauingenieur bei Google und Illustrator aus San Francisco, hat aus Alltagsgegenständen ein Webprojekt gemacht, das sich schwer in eine Schublade stecken lässt: halb technische Dokumentation, halb animiertes Kunstwerk.
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 5 Abschnitte
Das Wichtigste in Kürze
- Die Website mechanical-pencil.com von Bryan Macomber zerlegt Alltagsgegenstände in interaktive CAD-Illustrationen.
- Online stehen vier Objekte: Pilot-G2-Kugelschreiber, Zippo-Feuerzeug, BIC-Druckbleistift und Pez-Spender.
- Framer steuert die scrollgetriebenen Animationen, ein externes JavaScript-Framework kommt nicht zum Einsatz.
- Das Angebot ist kostenlos, läuft im Browser und verlangt keine Anmeldung.
Wie funktioniert das Projekt technisch?
Am Anfang steht das physische Objekt: Macomber zerlegt das Produkt, baut jedes Teil per CAD digital nach, illustriert jede Ansicht von Hand und animiert das Ergebnis schließlich für das Web. Im CAD-Programm entsteht jedes Bauteil als eigener Körper, den der Konstrukteur für eine Explosionsansicht entlang einer Achse verschieben kann; welche Programme sich dafür eignen, zeigt der Vergleich der 3D-CAD-Software.
Am Ende stehen scrollgetriebene Sequenzen, in denen einzelne Bauteile mit dem Mausscrollen auseinanderfahren und sich wieder zusammensetzen. Die Website läuft auf mechanical-pencil.com und ist mit Framer gebaut. Der Baukasten liefert den flüssigen Übergang zwischen Illustrationen und animierten Ebenen, ohne dass ein externes JavaScript-Framework nötig wäre.
Dunkelrot markiert: Erst die Animation macht aus der Zeichnung ein Lernmedium. Quelle: mechanical-pencil.com, Stand Mai 2026.
Was hat das mit Webdesign zu tun?
Das Projekt zeigt, was passiert, sobald jemand technisches Fachwissen direkt ins Medium Website überträgt, statt das Wissen in ein PDF oder eine Präsentation zu stecken. Die scrollgetriebene Animation folgt dem Tempo des Lesers, statt ihm einen Ablauf vorzugeben. Für Webdesigner lohnt der Blick, weil Macomber mit Framer erreicht, was viele mit GSAP oder komplexem Canvas-Code versuchen. Alle anderen haben schlicht Vergnügen daran, 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
Animierte SVGs bieten einen eigenen Weg zu solchen Effekten. Die Grundlagen erklärt unser ausführlicher SVG-Ratgeber, passende Werkzeuge listet die Übersicht zu SVG-Animationstools.
Welche Objekte sind bereits online?
Aktuell umfasst die Sammlung vier Objekte, der neueste Eintrag ist der Pilot G2 Retractable Pen von 1997. Über Instagram hat Macomber angekündigt, die Auswahl weiter auszubauen.
Jedes Objekt bekommt eine eigene Seite mit Explosionsansicht und Bauteilbeschriftung. Quelle: mechanical-pencil.com, Stand Mai 2026.
Neben dem Kugelschreiber stehen ein Zippo-Feuerzeug (Baujahr 1933), ein BIC-Druckbleistift (1988) und ein Pez-Spender (1952) bereit. Jedes Objekt bekommt eine eigene Seite mit vollständiger Explosionsansicht und Bauteilbeschriftung. Beim Kugelschreiber hat Macomber sogar den Spannkegel beschriftet, ein Teil, das die meisten täglich berühren, ohne je bewusst darauf zu achten. Ausprobieren lassen sich alle vier Objekte kostenlos auf mechanical-pencil.com.
Glossar: 6 wichtige Fachbegriffe zum Projekt
CAD
CAD (Computer Aided Design) bezeichnet das rechnergestützte Konstruieren von Bauteilen und Baugruppen. Konstrukteure erstellen dabei digitale Modelle mit exakten Maßen, aus denen Zeichnungen, Stücklisten und Fertigungsdaten entstehen. Für Illustratoren liefert ein CAD-Modell die maßstabsgetreue Vorlage.
Explosionsansicht
Eine Explosionsansicht zeigt eine Baugruppe mit auseinandergezogenen Einzelteilen, die entlang ihrer Montageachsen angeordnet sind. Betrachter erkennen so Reihenfolge und Lage jedes Bauteils. Montageanleitungen, Ersatzteilkataloge und technische Dokumentationen setzen das Darstellungsprinzip seit Jahrzehnten ein.
Framer
Framer ist ein Werkzeug für Design und Webseitenbau, mit dem Gestalter interaktive Seiten ohne eigenen Programmcode veröffentlichen. Animationen, Übergänge und scrollgesteuerte Effekte lassen sich direkt im Editor festlegen. Hosting und Veröffentlichung übernimmt der Dienst gleich mit.
GSAP
GSAP (GreenSock Animation Platform) ist eine JavaScript-Bibliothek für Animationen im Browser. Entwickler steuern damit Bewegungen von HTML-Elementen, SVG-Grafiken und Canvas-Inhalten präzise auf einer Zeitachse. Für scrollgetriebene Effekte bringt die Bibliothek ein eigenes Plugin namens ScrollTrigger mit.
Scroll-Animation
Eine Scroll-Animation koppelt Bewegungen auf einer Webseite an die Scrollposition des Lesers. Statt eines festen Ablaufs bestimmt der Nutzer selbst Tempo und Richtung. Technische Erklärstücke nutzen das Prinzip, um komplexe Abläufe Schritt für Schritt aufzubauen und wieder zurückzuspulen.
SVG
SVG (Scalable Vector Graphics) ist ein offenes Format für Vektorgrafiken im Web. Eine SVG-Datei beschreibt Formen als Code statt als Pixelraster und bleibt deshalb in jeder Größe scharf. Per CSS oder JavaScript lassen sich die einzelnen Elemente einer Grafik gezielt animieren.
FAQ: Alltag aufgeschraubt
Was zeigt mechanical-pencil.com?
Die Website zerlegt Alltagsgegenstände in interaktive CAD-Illustrationen. Beim Scrollen fahren die Bauteile auseinander und setzen sich wieder zusammen, jedes Teil ist beschriftet.
Wer steckt hinter dem Projekt?
Hinter dem Projekt steht Bryan Macomber, Maschinenbauingenieur bei Google und Illustrator aus San Francisco. Macomber baut jedes Objekt per CAD nach, zeichnet die Ansichten von Hand und animiert sie für das Web.
Welche Objekte sind online?
Online stehen vier Objekte: der Pilot-G2-Kugelschreiber von 1997, ein Zippo-Feuerzeug von 1933, ein BIC-Druckbleistift von 1988 und ein Pez-Spender von 1952. Macomber hat angekündigt, die Sammlung auszubauen.
Kostet die Nutzung etwas?
Nein. Die Seite läuft kostenlos im Browser und verlangt keine Anmeldung.
