Pulse Agent
86 lines
2.8 KiB
Markdown
86 lines
2.8 KiB
Markdown
---
|
||
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
|