pulse-docs/obsidian-vault/Projetos/pulse-3d-landing.md

title, created, tags, projeto

title	created	tags	projeto
pulse-3d-landing — Landing Page 3D	2026-05-20	projeto web3d threejs design-system atomic-design	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

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