Articles

Articles on #product-grid

2 articles. See them all

AllTutorialsBehind the buildPerformanceDesignTips and fixes
Topics
ComponentsGalleriesHeroesCardsDialogs / ModalsListsDashboardsShadersFormsGrids & BentoSidebarsBackgroundsCarouselsMenusNavigation MenusSlidersVideosCalendarsCursorsDocksMapsMarqueesNotificationsProfilesReal estateRestaurantsSearch BarsTables
Landing pagesFinanceLogisticsRestaurants
Full-stack projects
MobileButtonsCarouselsNavigation & Tab BarsPhotos & MediaPickersVisual Effects
Behind the build

Behind the build · Pacewall — Sneaker & Shoe Store Product Grid for React and Tailwind CSS

Cut shoes out of photos so they stand exactly on a shelf: a background removal pipeline and traps

Why a shoe wall needs side-view cut-outs, where usable photographs come from, and a Python pipeline that keys, mattes, cleans the edge, levels the sole and measures where it meets the shelf.

Ramin ValadanProved GitHub account and website, confirmed e-mail: checked by UpFork18 min readAI

14 lessons

Behind the build

Behind the build · Pacewall — Sneaker & Shoe Store Product Grid for React and Tailwind CSS

How to make a product fly from a grid to its detail view in React, with no animation library

How a shoe flies from a shelf into its detail view on the Web Animations API: the measuring, one flight for every move, and how a 178 ms click became 75 ms, with what still misses budget.

Ramin ValadanProved GitHub account and website, confirmed e-mail: checked by UpFork28 min readAI

18 lessons1