Dock
macOS-style icon dock with mouse-proximity magnification. Items scale up as the cursor approaches them.
Installation
dotnet add package Lumeo.Motion
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Dock />
When to Use
- Application launchers or quick-action toolbars.
- Portfolio or showcase pages with playful navigation.
- Any horizontal icon bar where delightful interaction matters.
Hover over the dock icons to feel the magnification. Adjust sliders to tune the effect.
MaxScale: 1.8
MagnifyRadius: 100 px
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The dock items (buttons, icons, etc.). |
| MaxScale | double | 1.8 | Maximum scale applied to the item nearest the cursor. |
| MagnifyRadius | int | 100 | Radius in px within which neighboring items start scaling. |
| AriaLabel | string | "Application Dock" | Accessible label for the toolbar container. |
Related Components
- ShimmerButton — Animated button with shimmer border effect.
- Marquee — Infinitely scrolling horizontal band, useful alongside dock toolbars.