dfe445349b
- Introduced a new SVG asset for the raven silhouette. - Updated CSS to position and style the raven animation layer. - Implemented `RavenBurstCanvas` and `RavenFlock` components for rendering animated ravens using Three.js. - Enhanced `GateTransitProvider` to manage raven animation state and integrate with existing transition logic. - Added `ravenFx` type and default values for controlling raven animation properties. - Adjusted transform origins and z-index for improved visual alignment during transitions.
33 lines
920 B
TypeScript
33 lines
920 B
TypeScript
import { Suspense, type MutableRefObject, type RefObject } from 'react'
|
|
import { Canvas } from '@react-three/fiber'
|
|
import type { RavenFx } from './ravenFx'
|
|
import { RavenFlock } from './RavenFlock'
|
|
|
|
type RavenBurstCanvasProps = {
|
|
fxRef: MutableRefObject<RavenFx>
|
|
wrapRef: RefObject<HTMLDivElement | null>
|
|
}
|
|
|
|
export function RavenBurstCanvas({ fxRef, wrapRef }: RavenBurstCanvasProps) {
|
|
return (
|
|
<div className="gate-transit__ravens" ref={wrapRef}>
|
|
<Canvas
|
|
dpr={[1, 1.25]}
|
|
gl={{
|
|
alpha: true,
|
|
antialias: false,
|
|
powerPreference: 'high-performance',
|
|
stencil: false,
|
|
depth: true,
|
|
}}
|
|
camera={{ position: [0, 0, 5.2], fov: 42, near: 0.05, far: 40 }}
|
|
style={{ background: 'transparent' }}
|
|
>
|
|
<Suspense fallback={null}>
|
|
<RavenFlock fx={fxRef} />
|
|
</Suspense>
|
|
</Canvas>
|
|
</div>
|
|
)
|
|
}
|