Zum Inhalt springen
Motion-Showcase · Live-Demo

Webseiten, die sich
anfühlen wie Software.

Sieben Patterns auf Awwwards-Niveau. Magnetische Buttons, 3D-Tilts, Scroll-Sequenzen. Nicht wild durcheinander, kuratiert.

Patterns ansehen Genau das für meine Webseite
Scrollen
01 / 07

Magnetic
Buttons.

Buttons folgen dem Cursor, kaum wahrnehmbar, aber das Gehirn registriert es als „premium". Apple, Linear, Stripe nutzen dieses Pattern auf jeder Conversion-Stelle.

Bewegen Sie den Cursor über die Buttons rechts.

// HTML
<a href="#" data-magnetic="0.3" class="btn">
  <span class="magnetic-inner">
    Webseite anfragen
  </span></a>
Stark magnetisch (0.4) Subtil magnetisch (0.25)

Auf Touch-Devices automatisch deaktiviert.

02 / 07

3D-Tilt mit Glare.

Karten kippen sanft mit dem Cursor, mit Glanz-Reflektion auf der Oberfläche. Funktioniert auf Pricing-Cards, Portfolio, Service-Übersichten.

Service
Webseite
Festpreis

in 7 Tagen online

Service
Buchung
Festpreis

Termine · Reservierung

Service
KI-OS
Festpreis

Automation · Chatbot

// HTML
<div data-tilt="10" data-tilt-glare>
  ...
</div>
03 / 07

Scroll-Reveal
mit Stagger.

Inhalte erscheinen sanft beim Scrollen. Kinder-Elemente versetzt nacheinander, wie ein gut choreografierter Tanz.

Eins

Erscheint zuerst.

Zwei

120 ms später.

Drei

240 ms später.

Vier

360 ms später.

<div data-reveal="up" data-stagger="120">
  <div data-stagger-item>...</div>
  <div data-stagger-item>...</div>
</div>
04 / 07

Animierte Zahlen.

Statistiken die hochzählen, wenn sie ins Sichtfeld kommen. Verstärkt Wahrnehmung & Glaubwürdigkeit.

Eigener Code
0 %

Ihnen gehört alles, kein Mietmodell

Online in
0 Tagen

ab Vorlage der Inhalte

PageSpeed
0/100

mobile · ladezeit unter 2 s

Kein
0/Mo

kein Wartungsabo nötig

<span data-counter="100" data-suffix=" %" data-duration="2000">0</span>
05 / 07

Sticky-Sequenz.

Eine Sektion bleibt am Bildschirm geklebt, während Sie scrollen, und der Inhalt darüber wechselt. Apple-Keynote-Effekt. Perfekt für Prozess-Schritte oder Story-Telling.

01 · 02 · 03
Tag 1: Erstgespräch

20 Minuten am Telefon. Wir hören zu, fragen das Wichtigste ab, geben sofort einen Festpreis.

Tag 2–6: Wir bauen

Sie bekommen einen Live-Link am 3. Tag. Sie sehen jeden Schritt, keine Black-Box-Phase wie bei klassischen Agenturen.

Tag 7: Online

Domain läuft, Mails ankommen, Google indexiert. Bezahlt wird erst nach der Live-Schaltung.

06 / 07

Worte erscheinen
einzeln. Wie auf
der Bühne.

Jedes Wort versetzt eingeblendet, der Text liest sich nicht, er passiert. Geeignet für Hero-Headlines und Statement-Sektionen. 

<h1 data-text-reveal>
  Ihre Headline hier
</h1>
07 / 07

Cursor-Parallax.

Hintergrund-Elemente bewegen sich subtil mit dem Cursor. Bewegen Sie die Maus, sehen Sie die Lichter rundherum tanzen. 

<div data-parallax="40" class="blob"></div>
Bereit für die eigene Bühne?

Genau das.
Für Ihre Webseite.

Alle Patterns aus diesem Showcase sind Standard auf jeder Webseite, die wir bauen. Ohne Aufpreis. Ohne Plugin-Lizenzen. Ohne 5.000-€-Agenturrechnung.

Kostenloses Erstgespräch 0174 6239811

Fairer Festpreis · in 7 Tagen online · kein Abo