Package Exports

@edgex-fe/threejs-animation
@edgex-fe/threejs-animation/dist/index.esm.js
@edgex-fe/threejs-animation/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@edgex-fe/threejs-animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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