Pulse Agent
b49ed7c257
- 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/
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
/** 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>
|
|
)
|
|
}
|