Weinix

There's a strange gap at the intersection of construction and commerce. Recycled-textile bricks, acoustic panels and sustainable tiles are genuinely beautiful — they deserve to be sold the way a luxury watch is sold, or a high-end car configurator lets you spin and customise before you commit. Yet most building-material sites look untouched since 2009: a PDF catalogue, a contact form, a blurry photo of a factory floor. Weinix was built to fix that.

Weinix serves B2B buyers — architects, interior designers, procurement leads — who arrive deadline-driven with a brief in hand and need high-fidelity visuals, hard specs and a frictionless path to inquiry. It also serves D2C buyers — homeowners and small contractors from Instagram or search — who are emotionally driven and buying into an aesthetic. The design had to feel premium enough for the procurement officer while staying warm and tactile enough to close the individual. That tension is the root of nearly every decision below.

A brick is a three-dimensional object with a backlit glow mode and a texture that shifts by variant — a flat product photo does about 40% of the selling. The other 60% is the feeling of handling the material. The /editor route is a Three.js canvas with damped OrbitControls that lets buyers orbit the model freely, inspect any angle and swap textures in real time. It isn't a novelty: a procurement lead can screenshot the configurator straight into a client material board.

The backdrop-blur panels weren't a trend choice — they answer a specific problem. Hero sections use full-viewport video and 3D reveals; flat opaque cards over that kill the dimensional depth you spent GPU cycles creating. Frosted glass preserves the layer beneath, so the eye registers depth without consciously processing it. The result reads as embedded in the brand rather than floating in front of it — editorial, not corporate, which matters for the D2C buyer arriving from a social touchpoint.

The themes aren't a cosmetic toggle — they're contextual. The 3D editor and immersive product pages default dark: the user is in 'studio' mode, ambient light controlled, dark backgrounds make the product pop. The blog and about pages default light: 'reading' mode, where a white background is more legible for long-form and signals editorial credibility. Implemented with Tailwind's dark: variant plus a persisted React context, SSR-safe to prevent flash.

The raw architectural model: 3 million triangles, 101 materials, 89 textures, 250 MB download. On a mid-range Android it loaded in 45 seconds, rendered at 8–12 FPS and thermal-throttled inside 90 seconds — unusable. The target for a smooth mobile walkthrough: 150k–300k triangles, 10–20 materials, 15 compressed textures, under 30 MB, 45+ FPS sustained. Getting there is a pipeline problem, not a coding problem.

A Node script over @gltf-transform/core automates the chain: Draco geometry compression re-encodes vertices as integer residuals (70–90% smaller, decompressed on the GPU for free); invisible nodes are stripped; geometry sharing a material is merged into single draw calls — 101 down to under 50, the single biggest FPS win; textures are embedded at 1024px WebP, cutting texture memory 60–80%. A 250 MB export becomes a 35–45 MB GLB that loads under 4s on 4G and holds 50+ FPS on a 2022 phone.

A Python utility over pygltflib swaps a named embedded texture inside a .glb without re-exporting from Blender — one base GLB, n variants, one swap script, which is what makes the configurator viable. At runtime Three.js caps pixel ratio at 2, frustum-culls off-camera geometry, preloads textures so a swap is a reference change not a network request, and pauses the render loop when the canvas leaves the viewport — cutting battery drain by ~60%.

A Node/Express API over MongoDB and Redis serves two worlds. The Admin CRM manages products, customers, tickets and a 90-day TTL audit trail with full before/after snapshots. The Customer Portal is self-service. The product schema is the most complex in the system — multiple variants each with SKU, pricing tiers, dimensions, sustainability ratings and with/without-backlit image sets, plus per-product analytics, SEO metadata, and first-class story and stance fields because the brand narrative is a core sales asset.

Admin auth uses JWT access/refresh pairs with Redis sessions (IP, user-agent, last-activity), powering 'active sessions' and 'logout all devices'; five failed attempts locks the account for two hours. Customer auth is fully passwordless — a phone number triggers a 6-digit WhatsApp OTP via the HSNS microservice, issuing an independent JWT pair so a compromised customer token can't touch admin routes. Tickets run a state machine that auto-transitions on who replied last, killing the limbo where nobody updates status.

Weinix is Google-indexed but early on authority, so the strategy compounds over time: a submitted sitemap, first-class per-product meta fields, Organization and Product structured data, clean crawlable URLs and deliberate internal linking. The Journal exists partly for this — original material case studies and sustainability guides create long-tail search surface product pages can't, the slow-burn investment toward sitelink generation on 'weinix + category' queries.