Zum Inhalt springen
Sag Hallo
Playground · Effekt-Labor

Playground

Alles hier läuft live im Browser. Spiel damit.

Keine Template-Demo, keine Plugin-Sammlung. Acht Effekte, alle live in deinem Browser gerechnet: Text, Cursor, Shader, Partikel. Zieh an den Reglern.

00: Konfigurator

Bau dir deine Startseite

Vier Entscheidungen, ein Ergebnis: Farbe, Typo, Layout, Bewegung. Jede Änderung baut die Seite rechts komplett neu auf, in genau der Reihenfolge, in der ich auch echte Projekte aufziehe. Am Ende schickst du mir deine Config.

Palette
Typo-Charakter
Layout
Motion-Level

Auf Touch und schmalen Screens baut sie sich immer ruhig auf.

deine-seite.de
WERTHALT™
ArbeitenStudioKontakt

Klare Kante

Große Typo, harte Kanten, keine Ausreden. Eine Startseite, die im ersten Moment sitzt.

Projekt starten

Palette Signal · Typo Laut · Layout Split · Motion Lebendig

Schick mir deine Config

Bereit, such dir was aus

01: Text

SplitText Lab

Vier Wege, denselben Satz aufzuschlagen. Wähl einen Stil und drück Replay. Der Text wird bei jedem Lauf frisch in Zeilen, Wörter oder Zeichen zerlegt.

Wir bauen Websites, die halten.

Stil

Bereit

02: Cursor

Cursor Lab

Drei Cursor-Charaktere. Beweg die Maus über die Fläche: der Ring wird von den Zielen magnetisch angezogen.

Magnet A Magnet B Magnet C

Maus rein, dann geht's los

Modus

Bereit

03: Blend

Blend Modes

Derselbe Schriftzug, sieben Rechenwege. Blend Modes sind Mathematik auf Pixelebene, kein Filter, kein Bild.

Werthalt
Modus

Bereit

04: WebGL

Gradient Flow

Ein Fragment-Shader, live auf deiner GPU: fünf Oktaven Value-Noise, zweifach domain-warped. Schieb die Maus rein, die Farben weichen aus.

Palette
· FPS

Bereit

05: Displacement

Ripple & RGB-Split

Die Fläche ist keine Bilddatei, sie wird beim Laden auf ein Canvas gemalt und als Textur in den Shader geschoben. Fahr drüber: Rot, Grün und Blau laufen auseinander.

Tönung
· FPS

Bereit

06: Three.js

Partikel-Morph

Ein paar tausend Punkte finden sich zu Wörtern zusammen. Die Zielpositionen werden aus gerendertem Text ausgelesen, kein Modell, kein Import. Zieh am Regler und schau dir den Übergang in Zeitlupe an.

Steuerung
· FPS

Lädt …

07: Marquee

Scroll-Velocity

Die Laufschrift hört auf deinen Scroll: schneller scrollen heißt schneller laufen und stärker kippen. Der Wert unten ist die echte Scroll-Geschwindigkeit in Pixeln pro Sekunde.

Kein Template ·Kein Baukasten ·Performance first ·Aus Neustadt ·Kein Template ·Kein Baukasten ·Performance first ·Aus Neustadt ·
Wert ·Halt ·Wert ·Halt ·Wert ·Halt ·Wert ·Halt ·
Richtung
Velocity 0 px/s

Bereit

08: Stapel

Gestapelte Karten

Karten, die sich beim Scrollen übereinanderlegen, die Miniatur des Effekts von der Startseite. Ein einziger Fortschrittswert steuert Position, Skalierung und Helligkeit aller drei Karten.

Karte 01 Design
Karte 02 Entwicklung
Karte 03 Motion
Quelle

Bereit

Genug gespielt?

Sowas gehört auf deine Seite.

Jeder Effekt hier ist ein paar Kilobyte groß und läuft ohne Framework. Erzähl mir von deinem Projekt, ich sag dir ehrlich, was davon Sinn ergibt.

Lass uns reden Studio ansehen