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,85 @@
+---
+title: "pulse-3d-landing — Landing Page 3D"
+created: 2026-05-20
+tags: [projeto, web3d, threejs, design-system, atomic-design]
+projeto: pulse-3d-landing
+---
+
+# 🎨 pulse-3d-landing — Landing Page 3D
+
+## Stack
+- **Vite** + **React 18** + **TypeScript**
+- **@react-three/fiber** + **drei** — Three.js no React
+- **framer-motion** — animações CSS/UI
+- **npm install + build OK** ✅
+
+## Atomic Design
+
+| Nível | Qtd | Componentes |
+|-------|-----|-------------|
+| Átomos | 11 | Button, Badge, Card, Divider, GradientText, FloatingText, LightGlow, ThemeToggle, Typography, FloatingMesh, ParticleField |
+| Moléculas | 3 | FloatingMesh, ParticleField, FeatureCard3d |
+| Organismos | 2 | HeroScene3d, FeaturesScene3d |
+| Templates | 2 | SceneCanvas, ThreePage |
+| Páginas | 1 | App.tsx (Hero + Features + About + CTA) |
+
+## Design Tokens (8 domínios)
+
+```
+space   → 8px grid (0–11)
+font    → Inter + JetBrains Mono (xs → 6xl)
+color   → HSL base + accent (#2563eb) + secondary (#7c3aed)
+shadow  → none → glow/glow2 (accent/secondary glow)
+radius  → none → full (9999px)
+material3d → scene/ambient/directional/point/floating/particle/text3d
+camera3d  → fov 60, scrollRange [0,0,12] → [0,-8,6]
+animation → instant/quick/normal/slow/cinematic + easing
+```
+
+## Seções da Landing
+
+| Seção | Descrição | Elementos 3D |
+|-------|-----------|------------|
+| **Hero** | Título GradientText + CTA bar | Torus flutuante + 2 anéis orbitais + cubo + esfera |
+| **Features** | Grid 6 cards micro-animados | 6 cubos em círculo orbitando |
+| **About** | Filosofia + bullet list | — |
+| **CTA** | Botões + footer | — |
+
+## Micro-interações
+- `HeroScene3d`: scroll move câmera de `z:12→8` e `y:0→-3`
+- `FeaturesScene3d`: grupo gira continuamente + Float em cada cubo
+- `FloatingMesh`: hover → scale 1.12x, giro 2x, glow intensifica
+- `ParticleField`: 3000 partículas com som senoidal vertical
+- `ThemeToggle`: alterna CSS var `--bg` + `--text` + grid invertido
+
+## Dark / Light 3D
+- Dark: `#050510` bg, accent azul elétrico, secondary violeta
+- Light: `#f8fafc` bg → css `filter: invert` no grid
+
+## Acessibilidade
+- `aria-label` em todos os controles
+- `focus-visible` outline 2px accent
+- `scroll-behavior: smooth`
+- WCAG AAA color contrast
+
+## Como rodar
+```bash
+cd /root/Obsidian-Pulse/pulse-3d-landing  # (link simbólico)
+npm install
+npm run dev   # → http://localhost:5173
+npm run build # → dist/
+```
+
+## Repositório
+Código-fonte: `pulse-3d-landing/` no workspace Pulse (committed em Gitea pulse-memory)
+
+## Hotlinks
+- [[MEMORY]] → portal principal do agente Pulse
+- [[Dev-Environment-Overview]] → stack dev Swarm
+- [[Swarm-Stacks-Reference]] → todas as stacks
+
+## Referências
+- Atomic Design: Brad Frost
+- Three.js: https://threejs.org/docs
+- React Three Fiber: https://docs.pmnd.rs/react-three-fiber
+- Framer Motion: https://www.framer.com/motion