Pulse Agent
74 lines
1.6 KiB
Markdown
74 lines
1.6 KiB
Markdown
---
|
|
title: "Design Tokens 3D — Referência"
|
|
created: 2026-05-20
|
|
tags: [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
|
|
|
|
```ts
|
|
material3d.floating = {
|
|
roughness: 0.08, // polido/espelhado
|
|
metalness: 0.75, // metálico
|
|
emissive: '#1e3a8a',
|
|
emissiveIntensity: 0.3,
|
|
}
|
|
```
|
|
|
|
## Scene Tokens
|
|
|
|
```ts
|
|
scene: {
|
|
background: '#050510',
|
|
fogNear: 8, fogFar: 40, fogColor: '#050510'
|
|
}
|
|
```
|
|
|
|
## Camera Tokens
|
|
|
|
```ts
|
|
camera3d = {
|
|
fov: 60,
|
|
position: [0, 0, 12] as [number, number, number],
|
|
scrollRange: { start:[0,0,12], end:[0,-8,6] }
|
|
}
|
|
```
|
|
|
|
## Animation Tokens
|
|
|
|
```ts
|
|
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
|
|
|
|
```tsx
|
|
// 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} />`
|