SVG product visual
The bike is rendered as a scalable inline SVG graphic with color-dependent gradients.
Responsive Product Landing Page
Velva One E-Bike
An immersive product page for an electrified urban-mobility concept.
The VELA One demo stages a fictional e-bike through restrained product design, scroll-led storytelling, interactive color variants, and clearly organized performance data. The page explicitly labels the bike as a concept study.
velva-one-e-bike-web-projekt-demo-g.vercel.app
Project overview
A cohesive product story – from first impression to specifications
The one-page narrative moves from the hero through drive, range, weight, and connectivity to four color variants, technical specifications, and a final product call to action. Every section extends the same focused brand idea.
Key features
Product chapters
Drive, 120 km range, 16 kg weight, and app connectivity are presented with a clear focus.
Animated metrics
Performance values are highlighted as visual readouts during scrolling.
Four color variants
Onyx, Alpine White, Deep Sea, and Volt switch the product visualization interactively.
Technical specifications
Range, motor, battery, charge time, frame, brakes, and payload are arranged in a clear grid.
Scroll experience
Parallax, reveal, and horizontal sequences respond to the scroll position and motion preferences.
Technical implementation
Vite, GSAP, and vector-based product presentation
The deployed Vite application assembles the landing page from modular JavaScript sections. GSAP controls ScrollTrigger sequences, Lenis smooths the scrolling experience, and inline SVG keeps the product visual sharp at every size.
- Vite
- JavaScript
- CSS
- GSAP
- Lenis
- Inline SVG
Design decisions
Restraint with an electric accent
Large areas of black, white, and typography form a calm foundation. Bright Volt green highlights the brand and calls to action while adding a sense of technical energy, and the product presentation deliberately avoids photographic distraction.
Responsive implementation
A scalable story across mobile, tablet, and desktop
Navigation, feature chapters, and the specification grid move from single- to multi-column layouts at defined breakpoints. Reduced-motion mode minimizes animation and converts the horizontal color sequence into a linear content flow.
Visual world
Urban e-bike look as inspiration
The demo's product visual deliberately stays a reduced SVG graphic. These reference photos capture the urban e-bike look that inspired the concept idea.
Explore VELA One as a product story
The live demo shows the SVG visual, scroll choreography, color variants, and technical specifications working together.
Open live demo