← Style Guide

3D Lab · 01

Peças que
ganham forma.

Este não é um produto final. É o primeiro teste real da linguagem tridimensional da M4F: leve no celular, controlado pelo scroll e com reação ao toque.

Experimentar ↓
agoraflutua

Experimento tridimensional da M4F: peças coloridas se separam, giram, aproximam e encaixam conforme o scroll.

01
Flutua.

O objeto entra como matéria viva, sem parecer um banner estático.

02
Separa.

As peças se afastam mantendo a leitura do conjunto.

03
Gira.

Profundidade e rotação revelam que a interface realmente ocupa o espaço.

04
Aproxima.

O movimento começa a resolver a forma, sem pressa e sem excesso de efeitos.

05
Encaixa.

A assinatura termina com um objeto inteiro — exatamente a lógica que depois poderá usar um brinquedo real.

O que este teste valida

3D só entra se continuar leve.

WebGL realReact Three Fiber + Three.js

Mobile primeiroDPR limitado e cena curta

Scroll como controlemovimento reversível ao voltar

Toqueo objeto responde ao ponteiro e ao tap

Reduced motionobjeto permanece montado e estático

Fallbacksem WebGL, a página continua utilizável

Quando este comportamento estiver aprovado no celular, substituímos a escultura abstrata por um primeiro brinquedo real e começamos a desenhar a Home imersiva.