Web
Design and build
Jeweller, Fürth
A static trilingual site (German, Arabic, English) for a jeweller in Fürth, led by a live Three.js ring you can spin and a stone selector that swaps the gem in real time.
Stack: React, Three.js, Motion, i18n
Problem
A jeweller's site has to feel as precise as the pieces, read properly in German, Arabic and English, and stay light: no heavy bundle, no third-party requests.
What I built
- Three.js ring hero: drag to rotate with inertia, idle sway, scroll rotation and cursor parallax, with three rotation modes.
- Stone selector that swaps the gem in real time with a light burst and a snap to face-on.
- Procedural PMREM studio lighting instead of an HDRI download; a still render shows until WebGL is ready, and the loop pauses offscreen.
- Full RTL for Arabic: mirrored hero, numbers, phone and hours pinned LTR, Amiri and Cairo loaded with unicode-range.
- A live open or closed badge computed in the visitor's timezone.
- Removed EffectComposer after measuring double sRGB encoding and bloom alpha bugs; the glow is CSS mix-blend-mode: screen.
Proof
- Zero third-party requests
- CSS 6.7 kB gzip; JS 109 kB initial plus 123 kB deferred for Three.js
- Audited at 6 widths
Stack
- React
- Three.js
- Motion
- i18n
Share this case