Urban Motorsiklet

Built as a flagship retail experience. Hero is a frame-by-frame canvas sequence; model carousel uses GSAP-driven 3D card stacks; product detail pages have parallax spec sheets.

The Problem

Urban Motorsiklet sells motorcycles that people fall in love with in person — but its online presence couldn't reproduce that showroom feeling. Model pages were flat spec lists, and there was no way for a visitor to explore a bike the way they would on the floor. The brand needed a flagship retail site that made the product feel physical.

The Solution

A kinetic retail experience built around motion. The hero plays a frame-by-frame canvas sequence that puts the bike in motion the moment the page loads; the model carousel stacks 3D cards driven by GSAP; product detail pages layer parallax spec sheets over full-bleed photography. Content flows from a headless CMS so the team can rotate models and campaigns themselves.

What I Built

• →Frame-by-frame canvas hero sequence
• →3D card-stack model carousel driven by GSAP
• →Parallax spec sheets on product detail pages
• →Configurator flow for exploring model options
• →Headless CMS so the team manages models and campaigns
• →Image pipeline tuned for heavy photography without heavy pages

Highlights

• →Frame-sequence hero
• →3D card carousel
• →Parallax spec sheets

Outcome

• →Brought the showroom feeling online — the bike moves before you read a single word
• →Gave the team full control of models and campaigns through the CMS
• →Built with performance in mind despite the heavy visual language
• →Established a design language now shared with the sister showroom, Urban Cars