feat(pulse-3d-landing): landing 3D completa — Atomic Design + Three.js + Design Tokens

- Atoms: Button, Badge, Card, GradientText, FloatingText, LightGlow, ThemeToggle, Typography - Molecules: FloatingMesh, ParticleField, FeatureCard3d - Organisms: HeroScene3d, FeaturesScene3d - Templates: SceneCanvas, ThreePage (canvas + overlay 2D) - Pages: App.tsx — Hero + FeaturesOverview + About + CTA wireframes - Design Tokens completo: space/font/color/shadow/radius/material3d/camera3d/animation - Globals CSS: reset, grid, scrollbar, focus-visible, light/dark mode - Vite + React 18 + TypeScript + @react-three/fiber + drei + framer-motion - npm install + dev server OK - node_modules em .gitignore — commit apenas código fonte - Repo standalone: pulse-3d-landing/
2026-05-20 19:52:53 -03:00
parent 1d26482872
commit b49ed7c257
31 changed files with 4955 additions and 1 deletions
@@ -0,0 +1,43 @@
+/** Template: ThreePage
+ *  Junta Canvas 3D (fundo) + overlay React 2D (UI).
+ *  O overlay fica acima do canvas com pointer-events controlados.
+ */
+import { ReactNode, CSSProperties } from 'react'
+import { SceneCanvas } from './SceneCanvas'
+
+function overlayStyle: CSSProperties = {
+  position  : 'absolute',
+  top       : 0,
+  left      : 0,
+  width     : '100%',
+  height    : '100%',
+  pointerEvents: 'none',
+  zIndex    : 10,
+}
+
+interface PageProps {
+  canvasChildren : ReactNode   // dentro do Canvas (3D)
+  overlayChildren: ReactNode   // overlay 2D
+  orbitControls  ?: boolean
+  scrollPages    ?: number
+}
+
+export function ThreePage({
+  canvasChildren,
+  overlayChildren,
+  orbitControls  = false,
+  scrollPages    = 6,
+}: PageProps) {
+  return (
+    <main style={{ position: 'relative', width: '100%', minHeight: '100vh', overflow: 'hidden' }}>
+      <SceneCanvas orbitControls={scrollPages} scrollPages={scrollPages}>
+        {canvasChildren}
+      </SceneCanvas>
+
+      {/* Overlay 2D — pointer-events:auto só nos elementos interativos */}
+      <div style={overlayStyle}>
+        {overlayChildren}
+      </div>
+    </main>
+  )
+}
@@ -0,0 +1,46 @@
+/** Template: SceneCanvas
+ *  Canvas React Three Fiber — orquestra cena, câmera e controles.
+ *  Aceita children como organisms/atoms 3D.
+ */
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls, ScrollControls, Environment, Float } from '@react-three/drei'
+import { ReactNode } from 'react'
+
+interface SceneCanvasProps {
+  children: ReactNode
+  orbitControls?: boolean
+  scrollPages?: number
+  scrollDamping?: number
+  environment?: string | null
+}
+
+export function SceneCanvas({
+  children,
+  orbitControls = false,
+  scrollPages    = 5,
+  scrollDamping  = 0.4,
+  environment    = null,
+}: SceneCanvasProps) {
+  return (
+    <Canvas
+      shadows
+      camera={{ fov: 60, near: 0.1, far: 100 }}
+      gl={{ antialias: true, alpha: false }}
+      dpr={[1, 2]}
+    >
+      {/* Cinemática de cor */}
+      <color attach="background" args={['#050510']} />
+
+      {/* Névoa para profundidade */}
+      <fog attach="fog" args={['#050510', 8, 40]} />
+
+      {environment && <Environment preset={environment} background />}
+      {orbitControls && <OrbitControls enablePan={false} enableZoom={false} maxPolarAngle={Math.PI / 1.8} />}
+
+      {/* Scroll driver — children recebem offset do scroll */}
+      <ScrollControls pages={scrollPages} damping={scrollDamping}>
+        {children}
+      </ScrollControls>
+    </Canvas>
+  )
+}