RainbowTex
Manufacturer website
- Year
- 2024 — 26
- Built with
- TanStack Start, React 19, TypeScript, Vite 7 +5 more ↓
- Links
- Live site ↗
(01) Overview
The website of RainbowTex, a garment manufacturer in Dhaka exporting to more than thirty countries since 2006. It is written for buyers: what the floor makes, how an order runs from tech pack to container, and how to start one.
(02) Features
- 01Silk heroSatin in the four thread colours of the logo, drifting as you scroll and dipping under the mouse.
- 02Collections ringEight product lines on a 3D ring that turns with the scroll; each card opens its collection.
- 03LookbookA page per line, its garments in columns that drift at different speeds, with a full-screen viewer you can swipe or arrow through.
- 04Brief builderBuyers pick their product lines, quantities and a message, and the site writes the enquiry into their email or WhatsApp.
- 05Buyer FAQGrouped questions with a sticky index that follows your place down the page.
(03) Screens
(04) On a phone
Same app, smaller screen.
Captured from the live site at 390 pixels wide — the width of most phones in a hand.
(05) Stack
Nine tools, and the job each one does here.
- FrameworkTanStack StartFile-based routes, every page prerendered to static HTML
- UIReact19Rendered at build time, hydrated in the browser
- LanguageTypeScriptRoutes, the catalogue and the company facts
- BuildVite7The silk shader ships as a chunk of its own
- StylingTailwind CSS4Tokens sampled from the thread colours of the logo
- UIWebGLOne hand-written fragment shader, no 3D library
- UILucideIcons
- HostingDigitalOceanStatic site on App Platform
- HostingCloudflareCDN and cache in front of it
(06) Under the hood
- 01
The silk is one fragment shader on a single full-screen triangle in raw WebGL. It loads once the browser is idle, renders at half resolution (a third on phones, at 30fps), stops when off screen, and draws one still frame for reduced motion.
- 02
There is no animation library. Reveals, pinned scenes, tilt and magnetic buttons run on shared IntersectionObservers and one batched scroll loop that writes CSS variables, and with reduced motion the ring becomes a plain grid.
- 03
Every page gets its own title, canonical, share card and schema.org data — organisation, FAQ, breadcrumbs and collections — built from one file of company facts.
- 04
Images carry their real size and a srcset of smaller widths, so nothing shifts as they load and phones never download the originals.
Next case
Lumora
