KG Kicks – Animated Sneaker E-Commerce Template
Emmanuel Imanishimwe
Not gonna lie… KG Kicks turned into an animation playground 😎
KG Kicks is a responsive e-commerce template for a Rwandan sneaker marketplace, where sneaker enthusiasts can discover and purchase their favorite kicks. Designed in Figma, built with React and TypeScript.
I experimented with all kinds of custom animations across the site, from product cards to hover effects, sliders, and transitions. The goal? Make browsing sneakers feel alive, smooth, and fun without breaking performance.
Some sections started as Bolt builds — I had the agent generate them in the cloud, exported the code, and reworked it into the React app. The agent gets you moving; the hand-tuning makes it production-grade.
The storefront
The homepage hero. A purchase toast pops in while the headline settles.
Best seller of the week. The toggle flips the whole section between men's and women's picks.
New arrivals as numbered cards. Each one animates on hover.
Featured products with ratings and quick actions.
Product lines for men and women, plus the brands the shop carries.
Browsing and filtering
Shop by category: running, walking, casual, accessories.
Collection cards for sneakers, football, and volleyball gear.
A collection page with its hero, sub-categories, and product counts.
Search overlays the page, so you never lose your place.
Sorting and filtering by newest, most popular, price, size, color, and material.
Product showcases
The "Built for speed" section. Dark theme, step-tracker cards floating in.
A product spotlight ringed by an animated arc of dots.
Floating product cards with quick stats, one of the most playful sections to build.
The rest of the story
The about section, with discount and purchase cards floating over lifestyle shots.
The quality story in a staggered grid.
The benefits grid: materials, delivery, discounts, support.
Why choose the shop, above the category picker.
The customer-first section flowing into the football and volleyball banners.
Football and volleyball banners in split color blocks.
Customer opinions on the dark theme, with a dotted globe accent.
"You may also like" recommendations under every product.
Cart and order summary. Promo codes, delivery dates, payment methods.
The brand slider, logos gliding past on a loop.
Newsletter signup and footer.
It was a lot of trial and error, but seeing everything come together — interactive, fast, and playful — was super satisfying.
Explore it live: https://kgkicks.vercel.app
Like this project
Posted Mar 11, 2024
A beautiful, animated and responsive sneakers ecommerce website template, where sneaker enthusiasts can discover and purchase their favorite kicks.
