docs(obsidian): vault pulse sync — 5 notas (Home, pulse-3d-landing, pulse-dev, design-tokens, pulse-libs)

2026-05-20 20:23:09 -03:00
parent e1924ad4f2
commit 4067389abe
8 changed files with 381 additions and 0 deletions
@@ -0,0 +1,73 @@
+---
+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} />`