Dock
A row of drawn icon tiles that swell toward the pointer: each tile rides its own spring toward a cosine falloff of its distance from the hand, so the row grows around it and settles back when it leaves.
$149 once · every Pro piece
Customize
The label rises above the largest tile, open items carry a small accent point, and a click hops the tile under a little gravity. Arrow keys walk the row and keyboard focus swells it the same way.
Install
npx shadcn@latest add @obsyde/dockNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Dock } from '@/components/obsyde/ember/dock/Dock';
export function Example() {
return (
<Dock />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/dock/Dock.tsxcomponentember/dock/dock.cssstylesember/dock/DockDemo.tsxdemoember/kit2-kit/kit.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
countTiles | number | 7 |
sizeTile size | number | 48 |
magnifyMagnify | number | 1.75 |
rangeRange | number | 140 |
labelsLabels | boolean | true |