---

title: Float sourcecode: src/core/Float.tsx

<Grid cols={4}> <li> <Codesandbox id="2ij9u" /> </li> </Grid>

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>