AstroAnimate Docs — Installation, Components & API

A macOS-inspired, highly interactive navigation dock with hover magnification.

Preview/Playground

Created by

Barsan

Astro

---
import Dock from "@astroanimate/core/Dock";
---

<Dock enhance={false} position="bottom" size="lg">
  <button class="dock-item">
    <span class="dock-label">Finder</span>
    <img src="/icons/finder.png" alt="Finder" />
  </button>
  <button class="dock-item">
    <span class="dock-label">Safari</span>
    <img src="/icons/safari.png" alt="Safari" />
  </button>
  <button class="dock-item">
    <span class="dock-label">Mail</span>
    <img src="/icons/mail.png" alt="Mail" />
  </button>
</Dock>

Installation

bash

npm install @astroanimate/core

Usage

---
import Dock from "@astroanimate/core/Dock";
---

<Dock enhance={true} position="bottom" size="lg">
  <a class="dock-item" href="/docs">Docs</a>
  <a class="dock-item" href="/examples">Examples</a>
</Dock>

Renders a compact, visually engaging floating navigation dock.

Props

Prop	Type	Default	Description
`enhance`	`boolean`	`false`	Enable interactive hover magnification
`magnification`	`number`	`1.8`	Maximum scale factor when hovering
`distance`	`number`	`150`	Proximity (px) to trigger magnification
`position`	`"bottom" \| "top"`	`"bottom"`	Screen position and tooltip alignment
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Base size of the dock and items
`color`	`string`	`"rgba(20, 20, 20, 0.7)"`	Background color of the dock wrapper
`blur`	`string`	`"20px"`	Backdrop blur intensity
`class`	`string`	`""`	Additional CSS classes

Component also accepts standard HTML <nav> attributes.

Use When

Building web applications, dashboards, or portfolios with a desktop-OS aesthetic
Consolidating primary navigation into a compact, visually engaging floating bar

Avoid When

Designing strictly for mobile devices (hover interactions do not translate to touch)
Building highly conservative enterprise interfaces where playful magnification might be distracting

Accessibility

Implements standard ARIA attributes (role="toolbar", aria-label="Application dock")
Fully respects prefers-reduced-motion: reduce by disabling JS tracking and neutralizing all CSS transforms, transitions, and hover scales

Performance

Computes dynamic scaling using a single mousemove event listener on the container, updating localized CSS custom properties
Uses hardware acceleration (translateZ, preserve-3d) and will-change to maintain 60fps rendering during magnification

Credits

Credit to @Barsan

Dock NEW