Skip to content

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.

ProUltraminimal

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.

Preview

Replay: day 60 of use

It learned what you reach for.

Search: 0 uses, press 192 → 192 ms

Adapt

Props

60
No runtime dependencies
"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
  // ---------------------------------------------------------------
}
Notes

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.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

New

Aura Dial

components

A 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.

personalizationthemesettings
NewPro

Keylight Field

backgrounds

A 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.

backgroundwebglshader
NewPro

A 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.

herowebglshader