ARCHDEVS
3D · E-Commerce · SaaS

MOP — Marine Waterproofing

A dual-application SaaS platform for marine mast protection products — featuring an immersive 3D hero with animated sailboat, particle rain, bloom effects, product configurator, and a full admin dashboard.

Type
E-Commerce + Admin SaaS
3D Engine
Three.js / R3F
Apps
Landing + Dashboard
Status
Production
The Challenge

Marine products deserve an immersive experience.

The Problem

A marine product company needed a customer-facing e-commerce platform with product configuration capabilities and a B2B admin dashboard for operations. No existing system handled order management, dynamic pricing, or client management for this niche.

Our Solution

Two applications sharing one backend: a landing page with an immersive 3D hero (animated sailboat, rain particles, bloom effects), interactive product configurator with real-time pricing, and a Vue-based admin dashboard with analytics, order management, and CRM features.

Key Features

3D meets commerce.

Immersive 3D Hero

GLTF sailboat model with wireframe glow overlay, dynamic water surface, 200+ rain particles with physics, and bloom post-processing.

⟨/⟩

Product Configurator

Mast size selection (S/M/L/XL), custom dimensions, real-time price calculation, and multi-step checkout with Stripe & PayPal.

Performance Optimized

Hardware detection with static WebP fallback, code splitting, geometry optimization (128→64 segments), and delta-time clamping.

Admin Dashboard

Vue 3 + Inertia.js dashboard with 6-month revenue trends, product distribution, top clients, order filtering, and bulk invoice export.

Referral Program

Unique referral codes, commission tracking, earnings dashboard, and debounced server-side validation during checkout.

Fleet Ordering

Single vessel or bulk fleet purchasing with size/quantity selection, multi-currency support (EUR/USD), and order status workflows.

Tech Stack

Dual-app architecture.

Landing (3D)

React 19React Three FiberThree.jsDreiVite 7Tailwind v4

Animation

Framer MotionLenisBloom Post-Processing

Dashboard

Vue 3Inertia.jsVite 7Tailwind v3

Backend

LaravelREST APIMySQL

Payments

StripePayPalMulti-currency

Design

RoundexPoppinsGlass MorphismNavy + Papaya

Have a similar challenge?

Let's build your next platform together.

Get in TouchView More Work