SmartRing
VERSION2.4.0
LICENSEMIT
CONFIG7 Options
A reactive ring that distorts with velocity and adapts to stuck elements.
Installation
pnpm add @supermousejs/labsUsage
import { SmartRing } from '@supermousejs/labs';
app.use(SmartRing({ size: 24, color: '#f59e0b', enableSkew: true }));Configuration
* Reactive Property| Option | Type | Default | Description |
|---|---|---|---|
| size * | number | 20 | Base diameter. |
| hoverSize * | number | 40 | Diameter when hovering interactive elements. |
| color * | string | '#ffffff' | Border color. |
| fill * | string | 'transparent' | Background fill color. |
| borderWidth * | number | 2 | Border thickness in pixels. |
| mixBlendMode | string | 'difference' | CSS mix-blend-mode applied to the ring element. |
| enableSkew | boolean | false | Distort the ring based on velocity (stretch and rotate). |