---
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