Floating

TxFloating tracks mouse and touch position at the container level. TxFloatingElement applies eased movement by depth, which makes it useful for subtle parallax, guide cards, visual accents, and status panels. Avoid using it as the only mechanism for critical layout.

Basic Usage

Depth easing

Multiple floating elements can share one TxFloating container and use depth to control movement strength.

Demo will load when visible.

<template>
  <TxFloating class="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>

API (Lite)

Property	Type	Default	Description
sensitivity			Overall movement sensitivity
easingFactor			Ratio used to approach the target position on each frame
disabled			Disable animation, stop listeners, and reset child element positions
className			Class forwarded to the container or element
depth			TxFloatingElement movement depth; negative values move in the opposite direction

Interaction Contract

TxFloating listens to window mousemove / touchmove and computes pointer position relative to the container's top-left corner.
Each element target offset is pointerPosition * (depth * sensitivity / 20), then each frame approaches it by easingFactor.
disabled=true stops event listeners and RAF, cancels the current frame, and resets registered elements to translate3d(0px, 0px, 0).
disabled=false restarts event listeners and RAF.
TxFloatingElement registers on mount, re-registers when depth changes, and unregisters on unmount.

Source

View source

packages/tuffex/packages/components/src/floating/index.ts