Magnet

A wrapper that pulls its child toward the pointer once it comes within a radius of the child's edge, on a loose spring, growing slightly as it is drawn in.

$149 once · every Pro piece

Customize

Strength

Radius (px)

Inner lag

Scale

The inner content trails the frame on a softer spring and sits a little further toward the pointer, so the label lags and catches up. When the pointer leaves, the child snaps back with one overshoot.

Install

npx shadcn@latest add @obsyde/magnet

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Magnet } from '@/components/obsyde/ember/magnet/Magnet';

export function Example() {
  return (
    <Magnet />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/magnet/Magnet.tsxcomponent
ember/magnet/magnet-demo.cssstyles
ember/magnet/magnet.cssstyles
ember/magnet/MagnetDemo.tsxdemo
ember/icon-button/icon-button.cssshared
ember/icon-button/IconButton.tsxshared
ember/shared/ember.cssshared
ember/actions-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/button/button.cssshared
ember/button/Button.tsxshared
ember/shared/chart-kit.tsshared
ember/effects-kit/kit.tsshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`strength`Strength	`number`	`0.3`
`radius`Radius (px)	`number`	`72`
`parallax`Inner lag	`number`	`0.3`
`scale`Scale	`number`	`1.04`