← Zur WebsiteDesign Lab

Auspacken erlaubt

Kreation
ohne Bremse

Hier ist bewusst zu viellos: Motion, Glare, Tiefe – als Gegenpol zur sachlichen Hauptseite. So sieht "Maximum" aus, wenn Technik zur Show werden darf.

Scroll
Altekin Solutions

Sequenz 01

Bilder über Bilder

Automatischer Crossfade mit Ken-Burns-Puls – reine Show, kein UX-Zwang für Kundenseiten.

BLEND/MASK/CLIP/PATH/TIME/EASE/FLOW/BLEND/BLEND/MASK/CLIP/PATH/TIME/EASE/FLOW/BLEND/

Sequenz · Layer & Touch

Bild unter Widget, Widget unter Bild

Beim Scrollen bauen sich die Ebenen auf – negativer Abstand und Z-Index, damit es auf dem Handy wie ein kleines Spektakel wirkt.

Widget vor dem Bild

Glas, Blur und Rand – die Karte liegt optisch über der Fläche darunter, ohne dass du tippen musst.

Noch eine Schicht

Teilweise über dem Bild, teilweise dahinter – reine Komposition.

Skills im Raster

Next.jsReactTypeScriptTailwindApp RouterSQLiteZodRESTGitUX-Prototyping

Diagonale Kreuzung

Zwei Bilder schneiden sich – Clip-Path statt flacher Collage.

Wort-Takt

Alles darf schichten

Horizontal · Snap · Glow

Wischen oder Scrollen – jede Karte ein anderer visueller Modus.

Tiefe
Marke
Icon
Licht
Form
Sticky 1 / 3

Vollflächig

Bilder füllen den Raum – mit Verlauf, damit Typo lesbar bleibt.

Sticky 2 / 3

Marke im Fokus

Logo und Claim als Held – maximal, weil das Lab es darf.

Sticky 3 / 3

Icon-Moment

Reduktion auf das Zeichen – skalierbar, scharf, neon-ready.

Filmstreifen · Endlosschleife

Organische Form

Border-Radius-Animation trifft Weichzeichner – abstrakt, ohne Stockfoto.

Raster · Wiederholung · Rhythmus

Statement

Hier darf es laut sein.

Die Hauptwebsite bleibt ruhig und verständlich. Dieses Lab ist der Spielplatz: übertriebene Übergänge, Licht, Perspektive – Proof of Craft.

MOTION·GLASS·DEPTH·TYPE·GLOW·SCROLL·LAYER·BLUR·LIGHT·SCALE·MOTION·GLASS·DEPTH·TYPE·GLOW·MOTION·GLASS·DEPTH·TYPE·GLOW·SCROLL·LAYER·BLUR·LIGHT·SCALE·MOTION·GLASS·DEPTH·TYPE·GLOW·

Bento-Übertreibung

Hover für 3D-Tilt – nur Desktop; auf Touch bleibt es statisch genug.

Layer 01

Tiefe statt Fläche

Schatten, Blur und Licht stacken sich – wie bei Keynotes, bei denen jede Folie „atmet“.

Layer 02

Konischer Glanz

Layer 03

Frosted

Glas, Rand, innen Licht.

Layer 04

Accent Pop

Magenta trifft Navy.

Scroll = Fortschritt

Oben die Cyan-Violett-Leiste – minimalistischer Progress, maximal Apple-adjacent.

Genug Spektakel?

Zurück zur sachlichen Darstellung für Kundinnen und Kunden – oder direkt ins Gespräch.