playground · ui-bibliothek
Effekte, die deine Website kann.
Jede WebGen-Website darf sich hier bedienen, dosiert und passend zur Marke. Effekte sind Werkzeuge, keine Deko.
ziehen · scrollen · pfeiltasten · − / +
Unverbindliches ErstgesprächText & Typo
Auftritt statt Auftauchen.
Hover für eine Zugabe.
Die Headline tanzt in Einzelbuchstaben herein. Gutes Timing macht aus Text einen Moment.
Websites, die man nicht wegklickt.
Hover für einen neuen Durchlauf.
Zeichen rattern, bis die Botschaft steht. Ein Blickfang für Zahlen und Claims.
Websites für Friseure
Ein rotierendes Keyword sagt fünf Zielgruppen in einer Zeile. Perfekt für Startseiten mit breitem Angebot.
SCROLL
IST DIE
NEUE BÜHNE
Der Farbkern wandert beim Ziehen durch die Headline. Statement-Typo für Momente, die hängen bleiben sollen.
Websites, die wow machen. In Tagen statt Wochen, zum Festpreis.
Text fließt endlos auf einer geschwungenen Bahn. Bewegung im Hero, ohne ein einziges Video.
Flächen & Karten
/. liquid glass
Glas, das lebt.
Backdrop-Blur, Sättigung und eine gebogene Reflexion. Dazu ein Glare, der deiner Maus folgt. Beweg den Cursor über die Karte.
Frosted Glass über lebenden Farben. Apple-Gefühl fürs Web, der Glare folgt deiner Maus.
Reagiert
Der Glow folgt dem Cursor am Rand entlang.
Dezent
Ein Hauch Licht statt Lightshow. Premium durch Zurückhaltung.
Überall
Für Preiskarten, Feature-Kacheln und Team-Cards. Adelt jede Fläche.
Ein leuchtender Rand folgt dem Cursor. Für Flächen, die sich wertig anfühlen, nicht laut.
/. showcase
Deine Marke, greifbar
Karten mit Tiefe machen aus einer Fläche ein Objekt. Perfekt für Produkt- und Team-Kacheln.
3D-Kippung plus Glanzlicht macht aus einer Fläche ein Objekt. Stark für Produkt- und Team-Kacheln.
/. premium-rahmen
Licht läuft um die Kante
Null JavaScript, nur CSS. Ideal, um EINE Kachel zur wichtigsten der Seite zu machen.
Ein rotierender Farbrand adelt genau EINE Kachel. Ganz ohne JavaScript, nur CSS.
Interaktion
Alte Website links, neue rechts: Der Regler erzählt das Upgrade ohne ein einziges Wort. Zieh ihn selbst.
Beweg die Maus in die Nähe: Der Button kommt dir entgegen.
Call-to-Actions, die dem Cursor entgegenkommen, werden öfter geklickt. Verspieltheit mit Job.
Klick irgendwo hin
Kleine Funken bestätigen jeden Klick. Persönlichkeit in der kleinsten Interaktion.
Hintergründe
Beweg die Maus: Das Raster weicht aus und leuchtet auf.
Ein Punkteraster weicht dem Cursor aus und leuchtet auf. Dezent, bis man es berührt.
Manche Ideen zeigen sich erst im richtigen Licht.
Beweg den Cursor über die Fläche.
Die Fläche gibt ihren Inhalt erst im Cursor-Licht frei. Dramaturgie für Statement-Sektionen.
Das Bauplan-Raster leuchtet rund um den Cursor auf. Ein lebendiger Hintergrund, ganz im Konzept.
Punkte driften, verbinden sich zu einer Konstellation und weichen dem Cursor aus. Das schafft subtile Tiefe.
Zahlen
0
Lighthouse-Punkte
0
Effekte in dieser Bibliothek
0
px Blueprint-Raster
Hover für einen neuen Lauf.
Kennzahlen zählen sich beim ersten Sichtkontakt hoch. Ein kleiner Erfolgsmoment für Meilensteine und Fakten.
0
performance · lighthouse
Der Performance-Score füllt sich beim Sichtkontakt. WebGen arbeitet für neue Seiten auf den Zielbereich 90+ hin.
besucher · letzte 6 monate
Balken wachsen beim Reinscrollen hoch. So wird Wachstum ohne echtes Chart-Framework sichtbar.
besucherquellen · letzte 30 tage
Horizontales Balkendiagramm: Anteile auf einen Blick, wächst beim Reinscrollen von links.
Retro-Arcade als Pixel-Art-Welt. Anklicken, durchklicken. Und wer den Konami-Code kennt, findet noch mehr.
Holzwerkstatt-Architekten als Infinite Canvas. Anklicken und die echte Seite durchklicken.
Architektur-Studio als Motion-Story. Anklicken und durch die scroll-getriebene Blueprint-Animation fahren.
Kreativagentur im Desktop/OS-Stil. Anklicken und die echte Seite bedienen.
Mein interaktives Portfolio. Anklicken und durchklicken.
Mein Reiseblog: 39 Länder als drehbarer Würfel. Anklicken, drehen, nach Ländern filtern und die Route ansehen.