NextGen JavaScript
The Future of Web Dev
NextGen JavaScript
The Future of Web Dev
Dynamic Cursor Reactions – Svelte Cursorphobic
Add interactive animations with Svelte Cursorphobic. Customize element reactions to cursor movements easily.
Overview:
Svelte Cursorphobic is a lightweight Svelte component designed to make elements react dynamically to the movement of your cursor.
It allows developers to add a fun, interactive element to their web pages. By wrapping any element in the <Cursorphobic> component, the element will move away from the cursor based on specified properties.
Features:
🔨 Simple Integration: Wrap elements in the <Cursorphobic> component.
🛠️ CSS Styling: Position and style elements using regular CSS.
⚙️Customizable Reactions: Adjust range, multiplier, and smoothing properties.
🗝️ Playground: Test different settings live.
Installation:
# Yarn
$ yarn add cursorphobic --dev
# NPM
$ npm install cursorphobic --dev
Basic Usage:
import Cursorphobic from "svelte-cursorphobic";
<Cursorphobic>
<div>I am afraid of cursors!</div>
</Cursorphobic>
Preview:
