Float

Backdrop and cables

This component makes its contents float or hover.

<Float
  speed={1} // Animation speed, defaults to 1
  rotationIntensity={1} // XYZ rotation intensity, defaults to 1
  floatIntensity={1} // Up/down float intensity, works like a multiplier with floatingRange,defaults to 1
  floatingRange={[1, 10]} // Range of y-axis values the object will float within, defaults to [-0.1,0.1]
>
  <mesh />
</Float>

If you have your frameloop set to demand, you can set autoInvalidate to true. This will ensure the animation will render while it is enabled.

<Canvas frameloop="demand">
  <Float autoInvalidate>
    <mesh />
  </Float>
</Canvas>

src/core/Float.tsx

Edit this page

Backdrop and cables