
Magma Uses Moving 3D Buildings to Explain Its Platform
Cuberto combines 3D architecture, scroll-linked motion, and a consistent visual system to explain Magma's digital property platform.
Magma is a Web3 property platform that needs to explain a complex idea. Its audience includes building owners, asset managers, and people who operate properties. Cuberto redesigned the brand and website around moving 3D buildings. These models help introduce digital twins, which are digital versions of physical structures. The website connects that explanation with the experience of scrolling through a page.
The opening view shows a cylindrical museum model against a strong blue background. As visitors scroll, the building rotates or separates into parts. The movement explains how physical buildings relate to verified digital assets. Another animation shows several stakeholders taking part in validation around a table. These scenes turn parts of the platform's explanation into images that change over time.
Cuberto used Blender to prepare building models, camera paths, and object movements. The team exported these assets in GLB and GLTF formats for the website. It connected them with its own Bona framework and animation tools including GSAP. ScrollTrigger links movement to the visitor's position on the page. Lottie animations add other moving elements to the explanation.
The design also uses consistent rules for letters, colors, and layout. Jost is the only typeface, with different weights and italic details. The palette moves from dark tones to cobalt and pale blue. An M symbol inside a ring links the identity with architecture and tokens. Layouts were prepared in Figma for 1920px desktop, 768px tablet, and 375px mobile screens.
Behind the site, a custom WordPress panel handles blog publishing for the team. This separates that publishing work from the main visual experience. The article presents the project as a combination of brand design and technical animation. Its central idea is to explain digital property through moving architectural forms. It describes the design approach, rather than reporting measured changes in user understanding or business results.
핵심 표현
take part in
~에 참여하다
Several people take part in checking the result.
separate into parts
여러 부분으로 나뉘다
The model separates into parts as you scroll.
be linked to
~와 연결되다
The animation is linked to your position on the page.
AI를 사용해 생성되었으며, AI는 실수를 할 수 있습니다.