Mobius Studios

Overview

Mobius Motion is a 3D animation services platform showcasing work through interactive, real-time 3D scenes. The goal was a visually rich yet fast experience: crisp case studies, a delightful “Apply Now”/inquiry path, and 3D model showcases that load quickly and feel smooth on desktop and mobile.

I owned the frontend end-to-end—design system, R3F scenes, motion, and performance—plus a lightweight backend for contact/inquiries. The UI is built on Next.js with MUI and GSAP, while 3D is powered by React Three Fiber and three.js (GLTF/GLB pipelines, environment lighting, and camera controls).

My Role

• Designed and implemented the entire frontend UI/UX with Next.js + MUI.
• Built interactive R3F scenes (model viewers, orbit/auto controls, env maps, HDRI lighting).
• Set up a basic Node/Next API route for contact/inquiry emails and lead capture.
• Optimized images/videos and 3D assets (compression, lazy loading, LODs) for smooth performance.
• Implemented mobile-first responsive layouts and touch-friendly 3D interactions.
• Wrote component tests and performed cross-device QA for stability and polish.

Stack

What I Built

Interactive 3D Showcases

• R3F scenes with orbit controls, auto-rotation, and zoom limits.
• Model preloading, progressive loading states, and graceful fallbacks.
• Per-scene lighting presets (HDRI/env maps) for consistent lookdev.

Advanced UI & Case Studies

• Case study pages with rich galleries, video embeds, and scroll-linked motion.
• “Apply Now” / inquiry flow with validation, success states, and inbox routing.
• Global layout with section anchors, sticky headers, and keyboard nav affordances.

Performance & Reliability

• Optimized 3D assets (mesh decimation, texture compression, LOD).
• Lazy hydration and conditional effects to keep main thread light.
• Cross-device profiling (mobile GPU) and interaction smoothness checks.