Dock Proximity Scale

Use Dock Proximity Scale for compact icon launchers; use Scale on Press for ordinary button feedback.

Use

Compact icon navigation where hover exploration is part of the interface character.

Avoid

Avoid it when users need precise stable targets or when the UI is primarily touch-driven.

Safer Alternative

Scale on Press

Risk Level

High attention

Timing

100-220ms response to pointer movement; no delayed animation.

Easing

Use spring-like response with damping, or direct distance mapping with light smoothing.

Risk

distractionaccessibility sensitive

Live Demo

What It Is

A row of icons scales based on pointer proximity, creating a magnifying dock effect for compact navigation.

Decision Guidance

Use Dock Proximity Scale for compact icon launchers; use Scale on Press for ordinary button feedback.

Best For

Compact icon navigation where hover exploration is part of the interface character.

Avoid When

Avoid it when users need precise stable targets or when the UI is primarily touch-driven.

Timing

100-220ms response to pointer movement; no delayed animation.

Easing

Use spring-like response with damping, or direct distance mapping with light smoothing.

Risk Tags

distractionaccessibility sensitive

Alternatives

Scale on Press Magnetic Snap Button Gooey Nav Indicator

✓When to Use

Creative toolbars
Launcher-style navigation
Small icon sets where pointer exploration is expected

✕When NOT to Use

Touch-first navigation
Dense admin sidebars
Critical controls that must keep stable hit targets

Configuration Tips

01Keep hit areas stable even as icons scale visually
02Limit the number of dock items
03Disable proximity scaling for coarse pointers

You've Seen It In

macOS DockCreative toolsLauncher interfaces

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a macOS-style icon dock where nearby icons grow as the cursor approaches, while the clickable hit area stays stable.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

'use client';
import { useState } from 'react';

export function DockProximityScale() {
  const [active, setActive] = useState<number | null>(null);
  const items = ['A', 'B', 'C', 'D', 'E'];

  return (
    <div className="flex h-20 items-end gap-3 rounded-2xl border border-stone-200 bg-stone-50 px-4 pb-4" onMouseLeave={() => setActive(null)}>
      {items.map((item, index) => {
        const distance = active === null ? 3 : Math.abs(active - index);
        const scale = distance === 0 ? 1.55 : distance === 1 ? 1.25 : 1;
        return (
          <button key={item} onMouseEnter={() => setActive(index)} className="h-10 w-10 rounded-xl bg-stone-950 text-xs font-semibold text-white transition-transform duration-150 ease-out" style={{ transform: `scale(${scale}) translateY(${scale > 1 ? -6 : 0}px)` }}>
            {item}
          </button>
        );
      })}
    </div>
  );
}

Related Effects

Scale on Press

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Magnetic Snap Button

When the mouse gets close to this button, the entire button (and its text) physically pulls towards the cursor, as if magnetized. It snaps back playfully when the mouse leaves.

Gooey Nav Indicator

A soft blob-like active indicator that morphs between navigation items, making the selected route feel continuous and playful.