Originals
Liquid focus
One focus ring for the whole page that travels between elements like a drop of mercury: the leading edge races ahead, the trailing edge catches up, and it settles around whatever you landed on. Press Tab — this whole site uses it.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { LiquidFocus } from '@vizzele/react';
// Once, in your root layout:
<LiquidFocus />Props
| Prop | Type | Default | Description |
|---|---|---|---|
offset | number | 4 | Gap between element and ring (px). |
keyboardOnly | boolean | true | Only follow :focus-visible (hidden for mouse clicks). |
Accessibility
- Makes focus easier to follow, not harder: the ring is 2px, high contrast and glows.
- Native outlines are made transparent only while the ring is mounted.
- Windows High Contrast (forced colors): the ring hides and the system outline returns.
- Reduced motion: the ring jumps instead of flowing.