A (very) lightweight component that makes elements afraid of your cursor. Used to easily create cute animations that react to your mouse.
Install using Yarn or NPM.
yarn add svelte-cursorphobic --dev npm install svelte-cursorphobic --save-dev Include the component in your app.
import Cursorphobic from "svelte-cursorphobic"The component is nothing but a wrapper to make anything cursorphobic. All you do is wrap an element in the component, and you're done!
<Cursorphobic>
<div>I am afraid of cursors!</div>
</Cursorphobic>
To make multiple elements cursorphobic, you wrap each element inside their own component. Position is done via regular old css. It's just an element, style it however you want!
<div style="..."><Cursorphobic><div /></Cursorphobic></div>
<div style="..."><Cursorphobic><div /></Cursorphobic></div>
<div style="..."><Cursorphobic><div /></Cursorphobic></div>
<div style="..."><Cursorphobic><div /></Cursorphobic></div>
Need a grid like the one at the top of the page? Svelte, along with some basic CSS, does the heavy lifting.
<div class="grid">
{#each { length: 80 } as _}
<Cursorphobic>
<div class="element" />
</Cursorphobic>
{/each}
</div>
.grid {
display: grid;
grid-template-columns: repeat(20, 1fr);
width: fit-content;
} The component has 3 properties to how the element reacts to your cursor.
The range property controls from how far away the component starts reacting to your cursor. (Defaults to 200)
<Cursorphobic range="100">
...
</Cursorphobic>
<Cursorphobic range="300">
...
</Cursorphobic>
The multiplier property controls how heavily an element reacts to your cursor. (Range from 0 to 1, defaults to 0.1)
<Cursorphobic multiplier="0.02">
...
</Cursorphobic>
<Cursorphobic multiplier="0.5">
...
</Cursorphobic>
The smoothing property controls how quickly an element moves relative to changes in your cursor. (Range from 0 to 1, defaults to 0.25)
<Cursorphobic smoothing="0.05">
...
</Cursorphobic>
<Cursorphobic smoothing="1">
...
</Cursorphobic>