Filings
A background field of short strokes that behave like iron filings.
$149 once · every Pro piece
Customize
At rest they are still brushed grain. The pointer is a magnet whose axis follows its direction of travel: filings swing into its field on individual springs, overshoot and settle. A click flips polarity and sends a ring of turning filings outward.
Install
npx shadcn@latest add @obsyde/filingsNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Filings } from '@/components/obsyde/ember/filings/Filings';
export function Example() {
return (
<Filings />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/filings/Filings.tsxcomponentember/filings/filings-demo.cssstylesember/filings/filings.cssstylesember/filings/FilingsDemo.tsxdemoember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
spacingSpacing | number | 14 |
lengthLength | number | 7 |
reachReach | number | 220 |