How Cuberto Freshly Reimagined 3D Web Design for Real Estate Platform Magma Real estate websites usually feel about as exciting as a dusty Excel spreadsheet, but Cuberto completely flipped the script with their rebranding project for Magma. This Web3 platform simplifies the complex world of digital twins for building owners and property managers. The Alexandria-based design team crafted an interface where architecture moves seamlessly in real time. The homepage kicks off with a cylindrical museum model floating over a vibrant royal blue backdrop (#0F4BFD), paired with a live ticker for the MGM token ($0.001) and an inviting CTA button reading “Experience Real Estate Agility”. With every scroll, the 3D model gracefully rotates or unfolds layer by layer to visually demonstrate how physical buildings transition into verified digital assets.
Under the hood, the project pushes Blender and GSAP to their absolute limits. Cuberto exported all 3D building models, camera angles, and motion paths directly from Blender as GLB and GLTF files, then hooked them up to an in-house Bona framework alongside GSAP, ScrollTrigger, and SmoothScroll. The result is a buttery-smooth scrolling experience without a single stutter. The interface also features sleek Lottie animations showing stakeholders verifying contracts around a holographic table. Plus, a Magma DTT card spotlights a 60% tokenized replica of the Frank Lloyd Wright Museum, illustrating how blockchain smart contracts handle lease agreements, maintenance logs, and service requests.
When it comes to typography, Jost is the sole star of the show—mixing sleek Light headlines, stylish Italic accents, and readable Variable 3+ body text. The palette leans into five rich gradient shades, transitioning from obsidian black (#0F0F17), navy blue (#02268E), and cobalt blue (#0A3CCE and #0F4BFD) to cool ice blue (#ECF2FF). An orbiting “M” logo pulls double duty, representing both a 3D architectural corridor and a sleek token symbol. Layouts were meticulously crafted in Figma across desktop (1920px), tablet (768px), and mobile (375px) breakpoints, while a backend WordPress setup manages blog content seamlessly without impacting front-end performance.
Check out the complete design project on www.behance.net/gallery/196970763/Magma-Website-Design.
Cách Cuberto Làm Mới Giao Diện Web 3D Cho Nền Tảng Bất Động Sản Magma
Trang web bất động sản thường hay bị khô khô như mấy bảng tính Excel, nhưng Cuberto đã làm điều hoàn toàn khác biệt với dự án tái định vị thương hiệu cho Magma. Nền tảng Web3 này giải thích khái niệm bản sao kỹ thuật số (digital twin) cho các chủ tòa nhà và nhà quản lý tài sản. Đội ngũ thiết kế từ Alexandria đã tạo ra một giao diện nơi kiến trúc chuyển động mượt mà theo thời gian thực. Mở đầu trang web là mô hình bảo tàng hình trụ đứng trên nền màu xanh royal blue rực rỡ (#0F4BFD), kèm bảng giá đồng token MGM ($0.001) và nút bấm CTA “Experience Real Estate Agility”. Mỗi thao tác cuộn trang sẽ xoay hoặc tách lớp mô hình để minh họa quá trình chuyển đổi một tòa nhà thực tế thành tài sản số được xác thực.
Về mặt kỹ thuật, dự án này tận dụng tối đa sức mạnh của Blender và GSAP. Cuberto xuất toàn bộ mô hình tòa nhà, góc quay camera và quỹ đạo chuyển động từ Blender dưới dạng tệp GLB và GLTF, sau đó kết nối với bộ khung Bona nội bộ cùng các thư viện GSAP, ScrollTrigger và SmoothScroll. Tương tác cuộn trang nhờ đó mà diễn ra rất mượt mà, không bị giật lag. Giao diện còn tích hợp các hiệu ứng Lottie mô tả cảnh các bên liên quan xác thực hợp đồng quanh một chiếc bàn hologram. Ngoài ra, thẻ Magma DTT minh họa mô hình bản sao của Bảo tàng Frank Lloyd Wright được token hóa 60%, trình bày cách hợp đồng thông minh blockchain xử lý hợp đồng thuê, nhật ký bảo trì và đề xuất dịch vụ.
Phông chữ được chọn dùng duy nhất là Jost — phối hợp giữa tiêu đề nét mảnh (Light), các điểm nhấn chữ nghiêng (Italic) và phần nội dung Variable 3+. Bảng màu gồm 5 tông chuyển sắc từ đen obsidian (#0F0F17), xanh navy (#02268E), xanh cobalt (#0A3CCE và #0F4BFD) đến xanh băng (#ECF2FF). Biểu tượng chữ M nằm trong vòng quỹ đạo vừa thể hiện hành lang kiến trúc 3D, vừa là biểu tượng token. Các bố cục giao diện được cân chỉnh gọn gàng từ màn hình máy tính 1920px, máy tính bảng 768px cho đến điện thoại 375px trên Figma, đồng thời hệ thống WordPress phía sau giúp quản lý bài viết blog mà không làm ảnh hưởng đến hiệu năng thiết kế front-end.
Mọi người có thể xem toàn bộ thiết kế này tại www.behance.net/gallery/196970763/Magma-Website-Design.
