@umamichi-ui/chromatic-fringe

以下内容为 Composer 生成，未经过人工检查，请谨慎对待

Pointer-driven chromatic fringe on borders: red/cyan ghost edges whose offset follows a focus point (mouse immediate; touch / coarse pointer eased). Inspired by lens chromatic aberration; kept optically light for Umamichi UI hairlines and control boxes.

Install

npm install @umamichi-ui/chromatic-fringe

Local development:

"@umamichi-ui/chromatic-fringe": "file:../umamichi-ui/chromatic-fringe"

Usage

import '@umamichi-ui/chromatic-fringe';
import { initChromaticFringe } from '@umamichi-ui/chromatic-fringe/init';

initChromaticFringe({
  buttonSelector: '.outline-button, .primary-button, .secondary-button',
  dropdownSelector: '.dropdown-menu-panel.is-open',
  skipClosest: '.app-topbar',
  depths: { button: 0.65, dropdown: 1.35 },
});

Focus depth (--lens-focus-depth)

Global camera focus F on html (registered with @property, transitions by default). Rest / page plane is --lens-focus-depth-rest (F0, default 1). While an open floating menu is present, F eases to --lens-focus-depth-overlay (default 1.35).

Every target with surface depth d uses the same equivalent depth:

d_eff = d + |d - F| - |d - F0|

When F = F0, this collapses to d_eff = d. No per-object “focus plane” flag: place a surface near focus by giving it d ≈ F (e.g. dropdown depth 1.35 matching the overlay focus).

Marked edges

| Attribute | Effect | |---|---| | data-lens-border="bottom" | Bottom hairline + fringe (overflow-x: clip) | | data-lens-border="right" | Right seam + fringe (overflow-x/y: clip) | | data-lens-depth="0.9" | Surface depth d (optional) |

Line color: --chromatic-fringe-line (falls back to --site-header-border, then --site-border).

Box fringe

JS adds .chromatic-fringe-box to matched buttons / open dropdowns. Open floating menus also get .chromatic-fringe-box--overlay (position: fixed). Optional fade of an existing gray border via .chromatic-fringe-box--fade-border and --chromatic-fringe-border.

Page controls (non-overlay boxes) shallow the fringe on :hover, :focus-visible, and :active via --lens-interaction-scale. Tune with:

| Token | Default | |---|---| | --chromatic-fringe-interaction-duration | 140ms | | --chromatic-fringe-interaction-easing | cubic-bezier(0.23, 1, 0.32, 1) | | --chromatic-fringe-interaction-hover | 0.42 | | --chromatic-fringe-interaction-active | 0.16 |

Ghost colors: --chromatic-fringe-red, --chromatic-fringe-cyan.

Respects prefers-reduced-motion: reduce.

License

MIT.