03 of 04
Hirfa Atelier
An invented modest-wear atelier, in English and Arabic.
Open the live page (opens in a new tab) hirfa-atelier.pages.dev
The brief
The brief was for an abaya label. The page shows no person, body, hand or mannequin anywhere: the garments are technical drawings, the fabric is drawn by a script, and every piece is loose, opaque, long-sleeved and floor length.
The one thing
The headline sits on a woven label that holds still while three fabrics change behind it as you scroll. Each piece opens its own page through a View Transition, with its drawing as the shared element.
How it was made
- Astro with an English and an Arabic route, plus 12 detail pages
- Fabric stills and six drape clips drawn by Node scripts
- No animation library: 5.6 KB of script
- A request dialog that shows the message and sends nothing
Measured on launch day
- Lighthouse performance on a phone, median of three runs on the live link
- 98
- Lighthouse accessibility
- 100
- the first screen on a phone
- 263 KB
- checks before launch
- 888