@edgex-fe/threejs-animation

3D landing page animation with particles, warp boxes, and tunnel effects.

Installation

npm install @edgex-fe/threejs-animation

Peer Dependencies:

npm install react react-dom three @react-three/fiber @react-three/drei @react-three/postprocessing postprocessing

Usage

import { EdgeXMessengerLanding } from '@edgex-fe/threejs-animation';
import { useState } from 'react';

function App() {
  const [trigger, setTrigger] = useState(false);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <EdgeXMessengerLanding
        preset="blue"  // 'blue' | 'pink' | 'orange'
        trigger={trigger}
      />
      <button onClick={() => setTrigger(true)}>Start</button>
    </div>
  );
}

Custom Configuration

<EdgeXMessengerLanding
  theme={{
    backgroundColor: '#09171D',
    colorStart: 'rgb(30,180,244)',
    colorEnd: 'rgb(17,248,209)',
    fogColor: '#09171D',
  }}
  particleConfig={{ count: 1000, speed: 2, maxSpeed: 8 }}
  warpBoxesConfig={{ count: 1000, speed: 3, maxSpeed: 7 }}
  tunnelConfig={{ count: 360, speed: 5, maxSpeed: 25 }}
  trigger={trigger}
/>

License

MIT