3D-Darstellungen
Produkte, Bauteile, Räume oder abstrakte Formen als drehbares Objekt im Browser. Mit Material, Licht und Spiegelung, auf jedem Handy.
Grafikdesign fürs Web
Grafik, die im Browser entsteht. Nicht als Bild, sondern als Erlebnis.
Die Objekte hinter diesem Text sind keine Bilder. Sie werden in diesem Moment von Ihrer Grafikkarte berechnet und reagieren auf Ihre Maus.Ihr Browser stellt gerade keine 3D-Beschleunigung bereit, deshalb sehen Sie hier ein Standbild der Szene. Mit Grafikbeschleunigung werden die Objekte live berechnet und reagieren auf die Maus. Diese Seite zeigt, was ich grafisch in eine Webseite einbauen kann: 3D, Bewegtbild, Partikel, Licht, Schrift in Bewegung. Alles zum Anfassen, alles von Hand programmiert, nichts davon lädt von fremden Servern.
Bewegen Sie die Maus
Läuft auf Handy und Rechner
Keine fremden Server
01 3D zum Anfassen
Ein Objekt, das Sie drehen können
Ziehen Sie das Objekt mit der Maus oder dem Finger. Form und Material lassen sich umschalten: poliertes Metall, Glas, matte Oberfläche. So kann ein Produkt, ein Bauteil oder eine Idee auf Ihrer Seite stehen, statt nur als Foto von einer Seite.
Was dahintersteckt: Die Form wird aus Dreiecken aufgebaut, drei Lichtquellen in den Markenfarben beleuchten sie, eine Studio-Umgebung spiegelt sich in der Oberfläche. Das alles rechnet der Browser selbst, ohne Bibliothek, ohne Plugin. Lässt man das Objekt los, dreht es sich nach kurzer Zeit von allein weiter.
Form
Material
02 Inszenierung beim Scrollen
Eine Seite, in ihre Ebenen zerlegt
Scrollen Sie langsam weiter. Die fertige Seite rechts zieht sich auseinander und zeigt, aus welchen Schichten sie besteht. Solche Scroll-Inszenierungen führen Besucher Schritt für Schritt durch ein Produkt oder einen Ablauf.
Raster und Fläche
Ein Gestaltungsraster, auf dem alles sitzt, und die Farbflächen, die den Ton setzen.
Inhalt
Überschriften, Texte, Karten. Die Ebene, die Google liest und die auch ohne Grafik funktioniert.
Grafik
Formen, Verläufe, Bilder und Illustrationen, die aus Inhalt ein Erlebnis machen.
Bewegung und Interaktion
Was auf Maus, Finger und Scrollen reagiert. Die Ebene, die eine Seite lebendig wirken lässt.
03 Bewegtbild
Bewegtbild, das kein Video ist
Das hier sieht aus wie ein Film, wiegt aber keine 3 Kilobyte: Die Fläche wird in jedem Bild neu von der Grafikkarte berechnet, reagiert auf Ihre Maus und läuft endlos ohne Schnitt. Als Hintergrund für einen Seitenkopf oder in eine Schrift gefüllt. Wechseln Sie Farbwelt und Tempo.
Darstellung
Farbwelt
Echte Videos baue ich ebenfalls ein, dann mit eigenem Player, ohne YouTube und ohne Tracking, mit Vorschaubild und erst geladen, wenn jemand sie sehen will.
04 Partikel
Punkte, die eine Form finden und Ihrer Hand ausweichen
Mehr als zweitausend Punkte suchen sich ihren Platz in einem Wort, einem Logo oder einem Ring. Fahren Sie mit der Maus hindurch: Die Punkte weichen aus und finden zurück. Ein Effekt für Seitenköpfe, Markenmomente und alles, was Aufmerksamkeit verdient.
Maus oder Finger durch die Punkte bewegen
05 Licht und Material
Hologramm, Glas und Flüssigkeit, ohne ein einziges Bild
Drei Oberflächen, die nur aus Code bestehen. Die Karte kippt zur Maus und bricht das Licht wie eine Folie. Das Glas lässt die Farben dahinter verschwommen durch. Die Tropfen verschmelzen, wenn sie sich berühren.
Hologramm-Karte
Kippt zur Maus, der Folienglanz wandert mit. Für Mitgliedskarten, Produkte, Gutscheine.
Glas
Ein Element aus Milchglas vor bewegten Farben. Für Menüs, Hinweise und Überlagerungen.
Flüssig
Flüssigkeit
Formen, die beim Berühren ineinanderfließen. Für Ladezustände, Hintergründe und Markenmomente.
06 Schrift in Bewegung
Schrift, die auf Sie reagiert
Die Schriften auf dieser Seite sind variabel: Jede Strichstärke zwischen hauchdünn und fett steht zur Verfügung. Fahren Sie mit der Maus über die Zeile. Darunter drei weitere Arten, Schrift in Bewegung zu bringen.
Schrift mit Gewicht
Die Buchstaben werden dort fett, wo die Maus ist. Am Handy läuft eine Welle hindurch.
Kontur
Kontur wird Fläche
Beim Berühren füllt sich die Schrift von links mit Farbe.
Zeile für Zeileins Bild,beim Scrollen.
Zeilen steigen auf
Jede Zeile erscheint einzeln, sobald der Abschnitt ins Bild kommt.
Verlauf
Farbe wandert
Ein Farbverlauf, der durch die Buchstaben läuft. Sparsam eingesetzt, ein Blickfang.
07 Illustration
Eine Illustration, die sich selbst zeichnet
Die Zeichnung rechts entsteht beim Einblenden Strich für Strich, danach füllen sich die Flächen. Sie ist eine Vektorgrafik: gestochen scharf auf jedem Bildschirm, nur 17 Kilobyte groß und in den Farben Ihrer Marke änderbar, ohne dass ein Bild neu gezeichnet werden muss.
Auf dieselbe Art entstehen Icons, Diagramme, Karten und Erklärgrafiken für Ihre Seite: als Code, der auf Ihrem Server liegt, nicht als Datei von einer Bilddatenbank. Die Umkreiskarte auf meiner Startseite ist so gebaut, aus echten Geodaten.
08 Mikro-Interaktionen
Die kleinen Momente, die eine Seite hochwertig wirken lassen
Ein Knopf, der sich zur Maus hinzieht. Ein Haken, der sich zeichnet. Ein Schalter, der sich beim Drücken verformt. Einzeln kaum der Rede wert, zusammen der Unterschied zwischen einer Seite, die bedient wird, und einer, die Spaß macht. Alles hier lässt sich anklicken.
Magnetischer Knopf
Kommt der Maus ein Stück entgegen, bevor sie ihn erreicht.
Reaktion mit Funken
Ein Klick, der sich gut anfühlt: Herz springt, Funken fliegen.
0
Fortschritt, der zählt
Ring und Zahl laufen gemeinsam hoch, sobald sie ins Bild kommen.
Schalter mit Gefühl
Der Knopf dehnt sich beim Drücken und rutscht weich hinüber.
Platzhalter wird Inhalt
Während Daten laden, schimmert ein Platzhalter, dann blendet der Inhalt ein.
Senden wird Haken
Der Knopf zieht sich zusammen, wartet kurz und zeichnet den Haken.
09 Was das kostet
Und was das alles an Ladezeit kostet: fast nichts
Grafik dieser Art gilt als schwer. Das stimmt, wenn sie aus Bibliotheken, Videos und fremden Diensten zusammengesteckt wird. Hier ist sie von Hand geschrieben. Jede Szene rechnet nur, solange sie im Bild ist, und steht still, wenn Ihr Gerät Bewegung reduzieren soll.
0fremde Server. Nichts auf dieser Seite wird von Google, YouTube oder einem anderen Dienst geladen.
0Bibliotheken. Die 3D-Szenen, der Bewegtbild-Shader und die Partikel sind eigener Code.
38 KBJavaScript für alle Szenen dieser Seite zusammen, so viel wie ein kleines Foto.
0Cookies. Auch die Vorführungen speichern nichts über Sie.
Die Kilobyte-Angabe ist die Größe der Datei, die diese Szenen antreibt, Stand Oktober 2026. Ob so viel Grafik auf Ihre Seite gehört, ist eine andere Frage: Ein Handwerksbetrieb braucht einen Effekt an der richtigen Stelle, keine zehn.
10 Leistungen
Was ich davon für Ihre Seite baue
Alles auf dieser Seite ist im Browser entstanden, in denselben Techniken, die ich für Kundenseiten einsetze. Die Grafik passt sich Ihrer Marke an: Ihre Farben, Ihre Schrift, Ihr Logo. Was nicht zu mir gehört: Logo-Entwurf und Druck. Dafür empfehle ich Ihnen einen Grafiker, mit dem ich mir die Arbeit teile.
Bewegtbild und Hintergründe
Fließende Flächen, Licht und Farbe als Seitenkopf, berechnet statt abgespielt. Dazu echte Videos mit eigenem Player, ohne fremde Dienste.
Scroll-Inszenierungen
Eine Geschichte, die sich beim Scrollen entfaltet: Produkt zerlegen, Ablauf zeigen, Vorher und Nachher. Besucher bleiben, weil etwas passiert.
Illustration und Icons
Erklärgrafiken, Icons, Diagramme und Karten als Vektorgrafik: scharf, leicht, in Ihren Farben, und wenn gewünscht mit Zeichen-Animation.
Animation und Interaktion
Einblendungen, Übergänge, Knöpfe mit Gefühl, Partikel und Reaktionen auf Maus und Finger. Dosiert, damit die Seite schnell bleibt.
Schrift und Farbe
Variable Schriften, Verläufe, Farbsysteme mit geprüftem Kontrast und ein Dunkelmodus, der zur Marke passt.
Fragen
Häufige Fragen zu Grafik im Web
Macht so etwas die Seite langsam?
Nicht, wenn es so gebaut ist wie hier: ohne Bibliotheken, Szenen laufen nur im Bild, Bilder in modernen Formaten. Ich messe die Ladezeit vor dem Livegang und zeige Ihnen das Ergebnis.
Läuft das auf dem Handy?
Ja. Die 3D-Szenen und der Bewegtbild-Shader rechnen auf dem Handy mit halber Auflösung, die Scroll-Inszenierung bekommt dort eine feste Ansicht. Wer in seinem Gerät „Bewegung reduzieren" eingeschaltet hat, sieht Standbilder.
Braucht mein Betrieb das überhaupt?
Meistens reicht ein Effekt an der richtigen Stelle: ein drehbares Produkt, ein Seitenkopf mit Bewegung, Zahlen, die hochzählen. Ich sage Ihnen im Gespräch, was Ihrer Seite hilft und was nur Spielerei wäre.
Was ist mit Video?
Fertige Videos binde ich mit eigenem Player ein, ohne YouTube, ohne Cookies, mit Vorschaubild und erst geladen, wenn jemand abspielt. Wo es nur um Stimmung geht, ersetze ich das Video oft durch berechnetes Bewegtbild wie oben, das wiegt fast nichts.
Geht das auch in meine bestehende Seite?
In den meisten Fällen ja, auch in WordPress. Ich prüfe vorher, was die Seite technisch mitmacht, und baue den Effekt so ein, dass er den Rest nicht ausbremst.
Nächster Schritt
Welcher Effekt passt zu Ihrer Seite?
Schicken Sie mir die Adresse Ihrer Seite oder beschreiben Sie Ihr Produkt. Sie bekommen einen Vorschlag, was sich grafisch lohnt, und was es kostet.
- Telefon
- +49 172 2819889
- Termine
- nur nach Absprache
Oder direkt schreiben
Das Kontaktformular nimmt Ihre Anfrage entgegen. Keine Speicherung in einer Datenbank, keine Cookies.
Zum Kontaktformular