UAStart a project
Case study

Shigure

A site for a rainwear brand from the rainiest city in Japan. We wanted the coat to sell itself up close, before anyone reads a spec sheet.

Project
Shigure, rainwear made in Kanazawa
Industry
Fashion · Outerwear
Scope
Web design · Build · Motion · AI film
Built with
HTML · CSS · Canvas · scroll-scrubbed video · Higgsfield
Year
2026
Shigure — Landing page for a small rainwear workshop in Kanazawa. One continuous shot: you scroll, and the camera walks up to the coat, around it, and into the three layers of its cloth.

One shot, from the street into the cloth

The brief

Shigure cuts and tapes three-layer coats by hand in an old teahouse in Higashiyama and tests every one in its own rain room. They needed a landing page that sells five pieces and fittings at the atelier, and explains why a coat costs what it does without turning into a spec sheet.

What we did

The page opens on a woman in the Machi Coat standing in a backlit rain studio, seen through wet glass: drops refract the picture and slide away from the cursor. Scroll, and the lens clears and the film starts. It is one continuous camera move at full 24 frames, scrubbed by the scroll: up to the hood, down the storm flap, into the pocket, along the sleeve to the cuff, round to the back, then a macro dive into the ripstop where drops bead on the weave, and down through the cut edge to the membrane and the kihada lining, with steam rising through. At each stop the move holds and one short caption explains the detail; nothing else sits on the picture. The film ends as she walks away into the light, with the price and a fitting button. Below it, the line-up puts all five pieces on the same model in the same studio, so switching a piece or a colour is an instant dissolve with nothing else moving. The atelier is a list of steps beside a screen: scroll, and each step opens while its scene plays next to it, from cutting the cloth along a steel ruler to dyeing the lining in the yard and sealing the seams on a hot-air taping machine. Then the rain room: the scroll plays the test itself, the nozzles open, the rain turns into a downpour around her and two ordinary cloths leak before ours stops. Six full-screen places around Kanazawa follow, each with the same woman in a different piece, then a year of rain drawn as 365 bars. The fitting request at the end is laid out like a ticket: pick the piece by its photo, a size and one of the next open days. The film, the atelier and rain room scenes and the Kanazawa photos were made in Higgsfield, the film from nine keyframes chained end to start, so there are no cuts; the journal photos are from Unsplash.

The live site

Scroll the site right inside the frame, or open it full screen.
webraw.studio/sites/shigure/Open the site

The first screen

Homepage · Desktop 1440
Shigure: first screen of the homepage

The full page

One long scroll, split into three columns — top to bottom, left to right.

Shigure: full page, part 1 of 3
Shigure: full page, part 2 of 3
Shigure: full page, part 3 of 3

Details

Shigure: The camera walks up to the hood
The camera walks up to the hoodScroll film
Shigure: Through the cut edge: three layers
Through the cut edge: three layersCloth
Shigure: Five pieces, three colours, one studio
Five pieces, three colours, one studioLine-up
Shigure: Open the valves and watch the other cloths leak
Open the valves and watch the other cloths leakRain room

Colour & type

Palette — from the project file

  • Night#06080B
  • Studio#111821
  • Backlight#5F7A9C
  • Kihada#E8B02A
  • Paper#EEEFEB

Typefaces

AaHost GroteskHeadlines, body and numbers. Tight, calm, reads well at 128 px and at 13 px.
時雨Shippori Mincho B1Only for the Japanese names of the pieces and the vertical title on the first screen.
Next case

Alder

Alder — Website for a floating sauna bathhouse on the Oslo fjord. The page cools from 84° to the fjord as you scroll.
Start a project

Let’s launch.

Send a short brief or a link to your current site. You’ll get a clear plan, timeline and quote — no sales call required.

  • Reply within one business day
  • Design, build and launch by one team
  • One week of post-launch support included

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw

Project brief

Takes ~2 min
What do you need?
Budget

Faster in a messenger?Write on Telegram@web_raw