Skip to content

3D website and shop · Inside the hoodie

Garzato

Scroll, a squeegee prints the logo, then pick a hoodie and try it on your own photo.

Year
2026
Status
Concept

The problem

Anyone buying sweatshirts and T-shirts online finds almost the same shop every time, with photos on a white background, a size chart and a cart.

You cannot tell whether the cotton is heavy, how the seams are finished or whether the print will survive the wash, which is exactly what sets a well-made garment apart, and you only find out how it fits when you open the parcel. For a small workshop that cuts, sews and prints by hand, a site like that hides the very craft it lives on.

The solution

Garzato is a workshop that invites you to look at a sweatshirt inside out, and the site is also its shop.

At the top the burgundy hoodie, a generated and refined 3D model, floats next to a big uppercase headline. As you scroll the scene holds still, the hoodie turns to face you and a squeegee sweeps across the chest, leaving the logo printed on it, then you slip in through the neck and land on the soft brushed fleece. In the catalogue you filter by type and colour, the cards rearrange with a smooth motion and show the back of the garment on hover. On the product page you turn the 3D hoodie by dragging it and it changes colour with the swatches, sizes come with their own guide and you book on WhatsApp with the message already written, with no cart. Further down there is the photo try-on. You upload a full-length photo, an ochre line measures shoulders and hips, the squeegee prints the hoodie onto the photo and you drag to compare before and after. For now the result is a ready-made sample photo, while the interface is complete and can be connected to a virtual try-on service. I kept burgundy with ochre on a cotton-coloured background, with heavy uppercase headlines.

The site in numbers

Pieces in the catalogue, each in two or three colours
8
Linked pages, from the storefront to the product page
3
Sizes from XS to XXL, with a size guide
6

Technologies

  • React
  • Three.js
  • GLSL
  • GSAP
  • TypeScript
  • Tailwind CSS
  • Vite
  • Lenis
  • Motion
  • 21st.dev
  • Meshy
  • ChatGPT

The screens

On mobile

The same site on a phone, designed for thumbs and small screens.

1 of 4

Garzato on a phone, the burgundy 3D hoodie at the top with the uppercase headline and the catalogue button below
Garzato on a phone, the catalogue with the filter and sort button and the garment cards in two columns, with price and colours
Garzato on a phone, the Cappuccio Pesante product page with the front photo, the gallery dots and the garment name
Garzato on a phone, the photo try-on with the sample person wearing the burgundy hoodie and the booking bar at the bottom

Use the left and right arrow keys to browse the screens.

On desktop

The page scrolls and the scene changes with you. Here are a few moments, from the opening to the contact section.

1 of 7

Garzato, the home page with the burgundy uppercase headline, the catalogue button and the 3D hoodie on the right
Garzato, the hoodie facing front with the logo printed on the chest, floating accessories and the line "Turn it. The good part is inside."
Garzato, the burgundy inside-out section with the uppercase headline and three layered photos of seams, label and cuffs
Garzato, a shoppable look with two people in the screen printing workshop and ochre dots on the garments they wear
Garzato, the catalogue with the filter bar by type and colour and the first four hoodies, each with price and swatches
Garzato, the Cappuccio Pesante product page with the column gallery, price, colours and sizes
Garzato, the photo try-on on a dark background with the tips on the left and the sample person wearing the burgundy hoodie on the right

Use the left and right arrow keys to browse the screens.

Want a site like this for your business?

Let's talk