⚡ PULSE 3D
CARREGANDO CENA 3D
 Pulse-3d-landing · Imersivo

Pulse 3D
Landing Page · Design Tokens · Three.js

Landing page disruptiva, imersiva e 100% componentizada em 3D dinâmico. Atomic Design · Design Tokens · React Three Fiber · Framer Motion.

Scroll para explorar
✦ Funcionalidades

6 Pilares do
Design System

Cada componente desenhado para ser reutilizável, testável e escalável — do átomo ao deploy.

⚛️

Atomic Design

11 Átomos · 3 Moléculas · 2 Organismos · 2 Templates · 1 Página. Cada nível isolado, testável.

🎨

Design Tokens

8 domínios: space / font / color / shadow / radius / material3d / camera3d / animation — 100% dinâmicos.

🎬

Scrollytelling

Scroll move a câmera 3D — experiência cinemática onde o usuário dirige a narrativa.

Micro-interações

Botões vivos com glow pulsante, hover 3D scale, partículas orgânicas — cada átomo responde.

WCAG / A11y

Acessibilidade por padrão: semântica, focos visíveis, skip-links, ARIA labels, contraste AAA.

🚀

Core Web Vitals

Hot path otimizado. Code splitting, LCP < 2.5s, INP < 200ms, CLS < 0.1 — por padrão.

Tecnologias usadas

A stack que alimenta a experiência 3D

React 18 TypeScript Vite Three.js @react-three/fiber @react-three/drei Framer Motion S.O.L.I.D. Atomic Design CSS Custom Properties WCAG 2.1 AA Core Web Vitals
✦ Atomic Design

De átomos a
organismos vivos

A hierarquia de componentes em ação — cada nível herda os tokens dos níveis abaixo.

⚛️ Atoms — 11
ButtonBadge CardGradientText FloatingTextLightGlow FloatingMeshParticleField ThemeToggleDivider Typography
🔗 Molecules — 3
FloatingMeshParticleField FeatureCard3d
🦠 Organisms — 2
HeroScene3dFeaturesScene3d
📐 Templates — 2
SceneCanvasThreePage
📄 Page — 1
App.tsx Hero + Features + About + CTA ~ 500 lines
11
Átomos
8
Domínios de Tokens
3D
Cena Interativa
WCAG
AAA Acessível

Transforme seu produto em
uma experiência 3D

Do primeiro átomo ao deploy em produção. Design systems vivos que escalam com seu time.