Floating Dock

High-performance kinetic floating application dock with continuous C1-cosine proximity distribution, multi-directional orientation, and zero layout thrashing.

CLI Installation

React

$pnpm dlxexhumaaddfloating-dock--flavor=react

// 01Workbench

Interactive Specification & Studio

navigation

Preset:

Viewport

Fluid 100%

Exhuma Workspace

120 FPS NATIVE

Active Node

2,840

+12.4% live

Compositor

0.038ms

GPU Direct

Orientation

bottom

36px Base

Continuous Gaussian proximity magnification with zero layout shift and direction-aware popover tooltips.

Parameters

7 Props

direction

baseSize

maxMagnification

influenceRadius

showLabels

panelStyle

hapticFeedback

// 02Usage

Quick Start & Consumer Example

Copy-paste ready implementation for React (.tsx). Automatically updates when you modify parameters in the Workbench above.

AppDockSection.tsx

React (.tsx)

import React from 'react';
import { FloatingDock, type FloatingDockItemData } from '@/components/ui/FloatingDock';
import {
  IconLayoutDashboard as Dashboard,
  IconFolders as Projects,
  IconChartBar as Analytics,
  IconDatabase as Database,
  IconTerminal2 as Terminal,
  IconSettings as Settings,
} from '@tabler/icons-react';

const DOCK_ITEMS: FloatingDockItemData[] = [
  { title: 'Dashboard', icon: <Dashboard className="size-5 text-primary" />, active: true },
  { title: 'Projects', icon: <Projects className="size-5 text-muted-foreground" />, active: false },
  { title: 'Analytics', icon: <Analytics className="size-5 text-muted-foreground" />, active: false },
  { title: 'Database', icon: <Database className="size-5 text-muted-foreground" />, active: false },
  { title: 'Terminal', icon: <Terminal className="size-5 text-muted-foreground" />, active: false },
  { title: 'Settings', icon: <Settings className="size-5 text-muted-foreground" />, active: false },
];

export function AppDockSection() {
  return (
    <section className="flex flex-col items-center justify-center py-12">
      <FloatingDock
        direction="bottom"
        baseSize={36}
        maxMagnification={0.75}
        influenceRadius={60}
        items={DOCK_ITEMS}
      />
    </section>
  );
}

// 03API Contract

Props & Configuration

Exhaustive parameter contract for Floating Dock. Validated in the live Studio workbench above and statically checked across all 13 ecosystem templates.

Prop	Type	Default	Description
direction	select	bottom	Orientation and shelf alignment edge of the dock and tooltip positions.
baseSize	number	36	Default width and height of dock items at rest.
maxMagnification	number	0.75	Maximum scale multiplier at zero distance.
influenceRadius	number	60	Influence spread of the Gaussian proximity curve.
showLabels	boolean	true	Display macOS-style frosted tooltips on icon hover/focus.
panelStyle	select	translucent	Visual backing shelf styling of the dock.
hapticFeedback	boolean	false	Enables subtle tactile micro-haptic tick on apex crossing when supported by the device.

direction

select

Orientation and shelf alignment edge of the dock and tooltip positions.

Default:bottom

baseSize

number

Default width and height of dock items at rest.

Default:36

maxMagnification

number

Maximum scale multiplier at zero distance.

Default:0.75

influenceRadius

number

Influence spread of the Gaussian proximity curve.

Default:60

showLabels

boolean

Display macOS-style frosted tooltips on icon hover/focus.

Default:true

panelStyle

select

Visual backing shelf styling of the dock.

Default:translucent

hapticFeedback

boolean

Enables subtle tactile micro-haptic tick on apex crossing when supported by the device.

Default:false

// 04Source Code

Component Source

Component source definition for React (.tsx). Toggle between the clean wrapper and the standalone ejected engine micro-kernel.

FloatingDock.tsx

import * as React from 'react';
import {
  FloatingDock as CoreFloatingDock,
  DockItem as CoreDockItem,
  DockIcon as CoreDockIcon,
  DockLabel as CoreDockLabel,
  type FloatingDockProps as CoreFloatingDockProps,
  type FloatingDockItemData,
  type DockDirection,
  type DockPanelStyle,
} from '@exhuma/core';
import { clsx } from 'clsx';

export type { FloatingDockItemData, DockDirection, DockPanelStyle };

export interface FloatingDockProps extends CoreFloatingDockProps {
  className?: string;
}

export const FloatingDock = React.forwardRef<HTMLDivElement, FloatingDockProps>(
  (
    {
      direction = 'bottom',
      baseSize = 36,
      maxMagnification = 0.75,
      influenceRadius = 60,
      showLabels = true,
      panelStyle = 'translucent',
      className,
      items,
      children,
      ...props
    },
    _ref
  ) => {
    return (
      <CoreFloatingDock
        ref={_ref}
        direction={direction as DockDirection}
        baseSize={baseSize}
        maxMagnification={maxMagnification}
        influenceRadius={influenceRadius}
        showLabels={showLabels}
        panelStyle={panelStyle as DockPanelStyle}
        className={clsx(className)}
        items={items}
        {...props}
      >
        {children}
      </CoreFloatingDock>
    );
  }
);
FloatingDock.displayName = 'FloatingDock';

export const DockItem = CoreDockItem;
export const DockIcon = CoreDockIcon;
export const DockLabel = CoreDockLabel;

// 05Architecture

Lifecycle Safety & Performance

Engineered for high-frequency user interactions with zero memory leaks.

Teardown

Deterministic Cleanup

All pointer event listeners, scroll handlers, and resize observers are cleanly destroyed on component unmount, preventing lingering background processes.

Compositor

GPU Compositor Acceleration

Transform and opacity modifications run directly on the GPU compositor thread using will-change: transform without triggering browser layout recalculations.

// 06a11y

Accessibility Considerations

Fully compliant with WCAG guidelines and respects user motion preferences.

Motion

prefers-reduced-motion Support

When a user has prefers-reduced-motion: reduce enabled in their operating system, Exhuma components automatically disable 3D gyroscope tilt and spring animations, rendering static accessible content.

import React from 'react'; import { FloatingDock, type FloatingDockItemData } from '@/components/ui/FloatingDock'; import { IconLayoutDashboard as Dashboard, IconFolders as Projects, IconChartBar as Analytics, IconDatabase as Database, IconTerminal2 as Terminal, IconSettings as Settings, } from '@tabler/icons-react'; const DOCK_ITEMS: FloatingDockItemData[] = [ { title: 'Dashboard', icon: <Dashboard className="size-5 text-primary" />, active: true }, { title: 'Projects', icon: <Projects className="size-5 text-muted-foreground" />, active: false }, { title: 'Analytics', icon: <Analytics className="size-5 text-muted-foreground" />, active: false }, { title: 'Database', icon: <Database className="size-5 text-muted-foreground" />, active: false }, { title: 'Terminal', icon: <Terminal className="size-5 text-muted-foreground" />, active: false }, { title: 'Settings', icon: <Settings className="size-5 text-muted-foreground" />, active: false }, ]; export function AppDockSection() { return ( <section className="flex flex-col items-center justify-center py-12"> <FloatingDock direction="bottom" baseSize={36} maxMagnification={0.75} influenceRadius={60} items={DOCK_ITEMS} /> </section> ); }

Prop

Type

Default

Description

direction

select

bottom

Orientation and shelf alignment edge of the dock and tooltip positions.

baseSize

number

Default width and height of dock items at rest.

maxMagnification

number

0.75

Maximum scale multiplier at zero distance.

influenceRadius

number

Influence spread of the Gaussian proximity curve.

showLabels

boolean

true

Display macOS-style frosted tooltips on icon hover/focus.

panelStyle

select

translucent

Visual backing shelf styling of the dock.

hapticFeedback

boolean

false

Enables subtle tactile micro-haptic tick on apex crossing when supported by the device.

import * as React from 'react'; import { FloatingDock as CoreFloatingDock, DockItem as CoreDockItem, DockIcon as CoreDockIcon, DockLabel as CoreDockLabel, type FloatingDockProps as CoreFloatingDockProps, type FloatingDockItemData, type DockDirection, type DockPanelStyle, } from '@exhuma/core'; import { clsx } from 'clsx'; export type { FloatingDockItemData, DockDirection, DockPanelStyle }; export interface FloatingDockProps extends CoreFloatingDockProps { className?: string; } export const FloatingDock = React.forwardRef<HTMLDivElement, FloatingDockProps>( ( { direction = 'bottom', baseSize = 36, maxMagnification = 0.75, influenceRadius = 60, showLabels = true, panelStyle = 'translucent', className, items, children, ...props }, _ref ) => { return ( <CoreFloatingDock ref={_ref} direction={direction as DockDirection} baseSize={baseSize} maxMagnification={maxMagnification} influenceRadius={influenceRadius} showLabels={showLabels} panelStyle={panelStyle as DockPanelStyle} className={clsx(className)} items={items} {...props} > {children} </CoreFloatingDock> ); } ); FloatingDock.displayName = 'FloatingDock'; export const DockItem = CoreDockItem; export const DockIcon = CoreDockIcon; export const DockLabel = CoreDockLabel;