Patina Dock
A command dock that wears in where it is used: habits animate less, brighten where you press, show their shortcut and move to the front on commit, and a readout says what changed.
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Replay: day 60 of use
It learned what you reach for.
Props
"use client";
import { useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
/**
* PatinaDock — a command dock that wears in where you use it: habits get faster, brighter and closer, and the dock says what it changed.
*
* Every press is counted on the device and decays with a 14-day half-life.
* Habitual actions stop animating (the press shortens from about 280ms
* toward instant), gain a soft burnish where they are usually pressed, show
* their shortcut, and a static notch marks the usual next action. With
* adapt="full" they also move toward the front, only on commit (600ms
* after the pointer leaves), never under the pointer, with FLIP and an
* announcement. A readout states the change in numbers; "Forget what I
* use" clears it. simulate={{ day, seed }} replays a deterministic log.
*
* Part of the Ultra kit: an adaptive style whose grammar is the viewer. Every
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this component
Interfaces treat the hundredth press like the first: the same animation, the same position, the same hidden shortcut. Patina Dock wears in. Every press is counted on the device and fades with a two-week half-life, so the dock knows your habits and lets them go when you do. Habitual actions stop performing for you: their press animation shortens from about 280ms toward instant, following the rule that what you do many times a day should not animate. They brighten with a soft burnish where you usually press, their shortcut hint appears, and a static notch marks the action that usually comes next. With adapt set to full, habits move toward the front, but only on commit, never under the pointer, and the move is announced. A readout states what changed in plain numbers, and one tap forgets everything. The preview replays sixty days in a slider.
Curator’s note
The Ultra kit's workflow surface. Pro: a stateful usage model (decayed counters, press-point averaging, an order-1 next-action table, hysteresis re-sort on commit with FLIP) that habituates motion per action, plus a deterministic replay for demos.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Aura Dial
componentsA 40px hexagon of the viewer's own six values (contrast, warmth, light, density, motion, focus) that opens into an instrument: pull a corner and every Ultra asset on the page retunes live.
Keylight Field
backgroundsA live studio sweep lit by one soft key light, and the light is the theme control: drag it for warmth and exposure, and every Ultra asset on the page retunes while text stays legible.
Quiet Zone Hero
heroesA first screen of folded silk that parts around every line you read and holds its contrast under it: no scrim, at any light the reader chooses.