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

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

This component makes its contents float or hover.

```js
<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.

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