Webstein Studio – Technischer Showcase

Kapitel 01

013D & Räumliches

Vom echten, KI-generierten 3D-Modell bis zu reinen CSS-Transform-Tricks – räumliche Tiefe direkt im Browser, ganz ohne Plugins.

Ziehen zum Drehen · Scrollen zum Zoomen

Demo 06 · Glanzstück

Echtes 3D, direkt im Browser.

Dieses Objekt existiert nicht. Es wurde per KI als Bild entworfen, in ein texturiertes 3D-Mesh (GLB, PBR-Material) umgerechnet und hier interaktiv eingebettet – frei drehbar, zoombar, mit echtem Schattenwurf.

1 Produktbild per KI generieren
2 Bild → 3D-Mesh mit PBR-Textur
3 Als GLB selbst gehostet & eingebettet

Flip Card07

W. Hover mich

Rückseite

Eine Karte, zwei Gesichter – per rotateY und echter Perspektive im Raum gedreht.

Hover (Desktop) / Tap (Mobil) dreht die Karte um 180°.

3D-Tilt + Glare08

3D

Editorial No. 4

Maus bewegen — die Karte folgt im Raum

Neigung + Lichtreflex folgen der Mausposition.

CSS-Würfel09

W

e

b

s

t

n

Greifen und ziehen – 6 Flächen, null WebGL.

Parallax-Ebenen10

Tiefe

Drei Ebenen auf unterschiedlichen Z-Höhen.

Isometrie-Stapel11

Inhalt

Design

Interface

Hover fächert die Schichten auf – wie ein Website-Aufbau.

Float + Schatten12

Objekt schwebt, der Schatten atmet gegenläufig mit.

Kapitel 02

02Scroll-Animationen

Die Seite als Bühne: Inhalte, die sich beim Scrollen aufbauen, festpinnen, verschieben und verwandeln. Alles GSAP + ScrollTrigger, butterweich.

Frame 001 / 076

Demo 13 — 76 Einzelbilder, an den Scrollbalken gekoppelt Die Seite wird gepinnt, die Sequenz läuft Vor- und zurückscrollen — Sie haben die Kontrolle

Demo 14

Vertikal scrollen, horizontal reisen.

Station 01

Die Sektion steht still.

Der Container wird gepinnt, während Ihr Scrollrad die Panels horizontal durchfährt.

Station 02

Ideal für Prozesse.

Leistungen, Projektphasen, Portfolio-Strecken – alles, was eine Reihenfolge hat, erzählt sich horizontal besonders gut.

Station 03

Volle Richtungs-Kontrolle.

Rückwärts scrollen fährt den Zug zurück. Kein Karussell, kein Autoplay – der Besucher bestimmt das Tempo.

Station 04

Endstation.

Danach löst sich der Pin und die Seite scrollt ganz normal weiter, als wäre nichts gewesen.

Demo 15 · Mehrebenen-Parallax

Ebene 1 · langsam Das Bild
wandert leise.

Ebene 3 · schnell Diese Karte
eilt voraus.

Vier Ebenen, vier Geschwindigkeiten – Tiefe entsteht durch Bewegungs-Differenz. Bild: KI-generiert.

Demo 16 · Scroll-getriggerte Zähler

0⁺

Demos auf dieser Seite

0^%

Handgeschriebener Code

0^s

Ladezeit-Budget

0^€

Lizenzkosten für Frameworks

Demo 17 · Animierte Balken

Performance0

Barrierefreiheit0

SEO0

Demo 18 · Shape-Morph

Organische Form, die sich mit dem Scroll-Fortschritt verflüssigt und dreht.

Demo 19 · Text-Scrub

Jedes Wort dieses Absatzes wird erst beim Scrollen eingefärbt – Lesegeschwindigkeit und Scroll-Tempo verschmelzen zu einem ruhigen, geführten Lesefluss.

Demo 20 · Stapelnde Karten

I

Karte eins bleibt stehen …

Jede Karte pinnt sich unter der Navigation fest, während die nächste von unten heranscrollt.

II

… Karte zwei schiebt sich darüber …

Die vorherige skaliert dabei minimal zurück – ein physisches Gefühl von Papier auf Papier.

III

… und Karte drei schließt den Stapel.

Perfekt für Leistungspakete, Case Studies oder Argumentationsketten mit Dramaturgie.

Demo 21 · Maskierte Bild-Öffnung

Das Bild öffnet sich wie ein Vorhang aus der Mitte – gesteuert über clip-path und Scroll-Position.

Kapitel 03

03Text in Bewegung

Typografie ist das Rückgrat jeder Website – hier lernt sie laufen. Dazu zählen auch der Wort-Reveal im Hero und die kinetische Laufschrift oben.

Gradient-Verlauf22

Warm wie
Terrakotta.

Animierter Farbverlauf, in den Text geclippt.

Typewriter23

Wir bauen

Schreibt, löscht, denkt nach – und beginnt von vorn.

Text-Scramble24

Klick mich an.

Zeichen-Chaos, das sich zur Botschaft sortiert. Klick wechselt den Satz.

Buchstaben-Welle25

Wellengang

Hover löst eine federnde Welle durch jedes Zeichen aus.

Variable Font26

Gewichtsklasse

Inter ist ein Variable Font: Das Gewicht folgt der Maus von 300 bis 800.

Kontur-Füllung27

Substanz
gewinnt.

Vom Umriss zur Fläche – die Füllung wischt bei Hover von links ein.

Kapitel 04

04Mikro-Interaktionen

Die kleinen Momente, die eine Website hochwertig anfühlen lassen. 16 Miniaturen – jede Karte ein eigener Effekt. Anfassen erwünscht.

Magnetischer Button28

Label-Tausch29

Rahmen-Zeichnung30

Klick-Welle31

Pfeil-Staffel32

Mehr erfahren

Linien-Sweep33

Unterstrichen, aber elegant

Icon-Morph34

Herz-Burst35

Bewertung36

Schalter37

Spotlight-Karte38

Licht folgt der Maus

Bild-Zoom + Caption39

Fassade · Studie 01

Feder-Tooltip40

Fehler-Shake41

Copy-Feedback42

Halten zum Bestätigen43

Kapitel 05

05Übergänge & SVG

Zustandswechsel, die sich nicht nach Umschalten anfühlen, sondern nach Erzählung – plus Vektorgrafik, die sich selbst zeichnet.

Bild-Wipe44

Klick: Der Bildwechsel wischt mit weicher Kante durch.

Selbstzeichnende Linie45

Stroke-Offset-Technik: Die Zeichnung entsteht beim Scrollen ins Bild.

Erfolgs-Choreografie46

Ring läuft, Häkchen zeichnet nach – Feedback mit Timing.

Layout-Morph47

Position eins

Position zwei

Position drei

Position vier

Das Grid selbst wird animiert – kein Neuladen, kein Springen.

Form-Morph48

Hover

Sechseck zu Raute – clip-path morpht zwischen Polygonen.

Seitenübergang49

Zwei Farbvorhänge wischen versetzt über den Viewport – wie beim Wechsel zwischen Unterseiten.

Läuft über der ganzen Seite, Sie bleiben aber hier.

Kapitel 06

06Interaktive Spielereien

Elemente, die zurückspielen: greifen, ziehen, vergleichen, stupsen. Physik und Reaktionsfreude direkt im Browser.

Frei verschiebbar50

Greif mich.Mit Schwung loslassen erlaubt.

Mich auch.Leichte Rotation beim Ziehen.

Und mich.Bleibt brav im Rahmen.

Pointer-Events + Trägheit, funktioniert mit Maus und Touch.

Vorher / Nachher51

Vorher Nachher

Griff ziehen – perfekt für Redesigns oder Handwerker-Referenzen.

Partikel-Netz52

120 Punkte, verbunden nach Nähe – die Maus drückt das Netz beiseite.

Tinten-Spur53

Maus hier bewegen

Eine nachziehende Lichtspur aus Canvas-Kreisen, die verglüht.

Feder-Physik54

W.

Der Punkt hängt an einer simulierten Feder: Er überschwingt, pendelt aus und folgt mit Masse-Gefühl.

Kapitel 07

07UI-Komponenten

Bausteine für echte Projekte – Accordion, Tabs, Ladezustände. Unspektakulär? Von wegen: Genau hier entscheidet sich Qualität.

Accordion55

Dieses Accordion animiert echte Grid-Zeilen (0fr → 1fr). Dadurch stimmt das Timing bei jeder Textlänge.

Buttons statt Divs, Fokus-Ringe, Tastatur-Bedienung – Eleganz darf Zugänglichkeit nie kosten.

Morpht zum Minus, indem der vertikale Balken kollabiert und der horizontale sich terrakotta färbt.

Tabs mit Indikator56

Die Unterstreichung gleitet zum aktiven Tab, der Inhalt hebt sich sanft ein – kein hartes Umschalten.

Farb- und Typo-System dieser Seite: Bone, Ink, Terrakotta. Instrument Serif für Haltung, Inter für Klarheit.

Indikator-Position wird per Transform berechnet – GPU-beschleunigt und flüssig bei jeder Tab-Breite.

Skeleton-Screen57

L.

Luca Steinhaus
Webstein Studio

Ladezustände sind die erste Sekunde jeder Nutzererfahrung. Ein Schimmern statt eines Spinners fühlt sich schneller an, als es ist.

Loader-Quartett58

W.

Vier Wartezeichen – vom Punkt-Puls bis zum atmenden Monogramm.

Fortschritts-Ring59

0%

Projektfortschritt

Zahl und Ring zählen synchron hoch, sobald sie sichtbar werden.

Prozess-Stepper60

1

2

✓

BriefingZiele, Inhalte, Stilrichtung – der Anfang jedes Projekts.

Toast-Benachrichtigung61

Gleitet unten rechts herein, zählt den eigenen Countdown herunter, räumt sich selbst weg.

Ein Blick unter die Haube.

Sieben Kapitel, ein Spielplatz.