---
title: Floating
description: A container that shifts its layers in parallax with the pointer.
category: Primitives
status: beta
since: 0.3.4
tags: [floating, parallax, motion]
syncStatus: reviewed
verified: true
---

## Usage

### Basic
`depth` sets how far a layer moves, `sensitivity` scales all of them, and `easingFactor` sets how quickly they follow.
::::TuffDemoWrapper{demo="FloatingFloatingDemo" code-lang="vue"}
---
code: |
  <template>
    <TxFloating class-name="stage" :sensitivity="0.55" :easing-factor="0.08">
      <TxFloatingElement class-name="status-rail" :depth="-0.06" />
      <TxFloatingElement class-name="status-panel" :depth="0.04">
        Status layers ease by depth as the pointer moves
      </TxFloatingElement>
    </TxFloating>
  </template>
---
::::

### Disable Motion
`disabled` stops the listeners and the animation frame and resets every layer's offset to zero.

```vue
<template>
  <TxFloating :disabled="paused">
    <TxFloatingElement class-name="hero-card" :depth="0.08">
      Content
    </TxFloatingElement>
  </TxFloating>
</template>
```

### Opposite Direction Layers
A negative `depth` moves opposite to a positive one.

```vue
<template>
  <TxFloating class-name="scene" :sensitivity="1.2">
    <TxFloatingElement class-name="background" :depth="-0.04" />
    <TxFloatingElement class-name="foreground" :depth="0.1" />
  </TxFloating>
</template>
```

### Best Practices

- Use it only for decorative parallax, guide cards, or background accents; never make critical layout depend on pointer movement.
- Keep layers few; each one updates on every frame while moving.
- Keep `depth` low for restrained motion; large values make the interface feel detached.
- Give layers their static position with classes; the component only adds a `transform`.
- Keep interactive controls out of fast-moving layers.

## API Reference

### TxFloating

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `''` | Extra class for the container. |
| `sensitivity` | `number` | `1` | Overall movement multiplier. |
| `easingFactor` | `number` | `0.05` | Share of the remaining distance covered each frame. |
| `disabled` | `boolean` | `false` | Stops motion and resets registered layers' transforms. |

#### Slots

| Slot | Description |
|------|-------------|
| `default` | Floating layers and scene content. |

### TxFloatingElement

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `''` | Extra class for the absolutely positioned layer. |
| `depth` | `number` | `1` | Movement depth; negative values move against the pointer. |

#### Slots

| Slot | Description |
|------|-------------|
| `default` | Layer content. |

## Overview

- `TxFloatingElement` registers with `TxFloating` on mount, re-registers when `depth` changes, and unregisters on unmount; outside a `TxFloating` it renders but never moves.
- Pointer coordinates are measured from the container's center; each frame eases layers toward `pointerPosition * (depth * sensitivity / 20)` by `easingFactor`.
- With `disabled` or reduced motion, listeners and the animation frame stop and offsets reset to `translate3d(0px, 0px, 0)`.
- Animation pauses while the container is off-screen; the origin is re-measured after page scroll or resize.

## Technologies

- The animation loop runs only while a layer is still travelling and parks once all settle; window listeners are passive and guarded by `hasWindow()` for SSR.
- Source: `packages/tuffex/packages/components/src/floating/`.

<TuffDocSourceLink />