pulse-docs/obsidian-vault/Codex/design-tokens-3d.md

title, created, tags

title	created	tags
Design Tokens 3D — Referência	2026-05-20	design-system tokens threejs codex

🎨 Design Tokens 3D — Referência

Equivalência: 2D ↔ ↔ World 3D

Nível 2D	Equivalente 3D
Cores hex	material.color (THREE.Color)
Espaçamento px	Posições/posição no mundo (units)
Raio border-radius	roundedBoxGeometry.radius
Font-size px	Text.fontSize (unidades 3D)
Box-shadow	pointLight + emissive material

Material Tokens

material3d.floating = {
  roughness: 0.08,    // polido/espelhado
  metalness: 0.75,    // metálico
  emissive: '#1e3a8a',
  emissiveIntensity: 0.3,
}

Scene Tokens

scene: {
  background: '#050510',
  fogNear: 8, fogFar: 40, fogColor: '#050510'
}

Camera Tokens

camera3d = {
  fov: 60,
  position: [0, 0, 12] as [number, number, number],
  scrollRange: { start:[0,0,12], end:[0,-8,6] }
}

Animation Tokens

animation = {
  instant: 0.1, quick: 0.25, normal: 0.4, slow: 0.7, cinematic: 1.2
  easeOut: [0.16, 1, 0.3, 1],   // ease-out-expo
  spring: { type:'spring', stiffness:300, damping:20 }
}

Uso nos átomos 3D

// FloatingMesh recebe todos os material3d tokens como props
<FloatingMesh
  color={tokens.color.accent}
  metalness={tokens.material3d.floating.metalness}
  roughness={tokens.material3d.floating.roughness}
/>

Referência

• Três tipo de luz: pointLight (colorida), directionalLight (sol), ambientLight (ambiente)
• Niebla: <fog attach="fog" args={['#050510', 8, 40]} />
• Performance: <Canvas dpr={[1,2]} shadows antialias={true} />