SVG-Produktvisual
Das Fahrrad wird als skalierbare Inline-SVG-Grafik mit farbabhängigen Verläufen gerendert.
Responsive Produkt-Landingpage
Velva One E-Bike
Eine immersive Produktseite für ein elektrisiertes Urban-Mobility-Konzept.
Die VELA-One-Demo inszeniert ein fiktives E-Bike mit reduziertem Produktdesign, scrollbasierter Dramaturgie, interaktiven Farbvarianten und klar aufbereiteten Leistungsdaten. Die Seite kennzeichnet das Rad ausdrücklich als Konzeptstudie.
velva-one-e-bike-web-projekt-demo-g.vercel.app
Projektüberblick
Vom ersten Blick bis zum Datenblatt als zusammenhängende Produktstory
Die One-Page-Erzählung führt vom Hero über Antrieb, Reichweite, Gewicht und Vernetzung zu vier Farbvarianten, technischen Spezifikationen und einer abschließenden Produktaktion. Jede Sektion erweitert dieselbe klare Markenidee.
Kernfunktionen
Produktkapitel
Antrieb, 120-km-Reichweite, 16-kg-Gewicht und App-Anbindung werden fokussiert erzählt.
Animierte Kennzahlen
Leistungswerte werden beim Scrollen als visuelle Readouts hervorgehoben.
Vier Farbvarianten
Onyx, Alpinweiß, Tiefsee und Volt aktualisieren die Produktdarstellung interaktiv.
Technische Daten
Reichweite, Motor, Akku, Ladezeit, Rahmen, Bremsen und Zuladung stehen in einem klaren Raster.
Scroll-Erlebnis
Parallax-, Reveal- und horizontale Sequenzen reagieren auf Scrollposition und Bewegungseinstellungen.
Technische Umsetzung
Vite, GSAP und vektorbasierte Produktdarstellung
Die ausgelieferte Vite-Anwendung baut die Landingpage aus modularen JavaScript-Sektionen auf. GSAP steuert ScrollTrigger-Sequenzen, Lenis glättet die Scrollinteraktion und das Produktvisual bleibt durch Inline-SVG in jeder Größe scharf.
- Vite
- JavaScript
- CSS
- GSAP
- Lenis
- Inline SVG
Designentscheidungen
Reduktion mit elektrischem Akzent
Schwarz, Weiß und große typografische Flächen bilden die ruhige Basis. Ein leuchtendes Volt-Grün markiert Marke, Aktionen und technische Energie, während die Produktdarstellung bewusst ohne fotografische Ablenkung auskommt.
Responsive Umsetzung
Skalierbare Story auf Mobile, Tablet und Desktop
Navigation, Feature-Kapitel und Spezifikationsraster wechseln über definierte Breakpoints von ein- zu mehrspaltigen Layouts. Für reduzierte Bewegung werden Animationen minimiert und die horizontale Farbsequenz in einen linearen Inhaltsfluss überführt.
Bildwelt
Urbaner E-Bike-Look als Inspiration
Das Produktvisual der Demo bleibt bewusst als reduzierte SVG-Grafik gestaltet. Diese Referenzfotos zeigen den urbanen E-Bike-Look, der als Inspiration hinter der Konzeptidee steht.
VELA One als Produktstory ansehen
Die Live-Demo zeigt das Zusammenspiel aus SVG-Visual, Scroll-Choreografie, Farbvarianten und technischen Spezifikationen.
Live-Demo öffnen