fancy-cursor
v0.1.7
Published
<h1 align="center">fancy-cursor</h1> <p align="center"> <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/palette/macchiato.png" width="400" /> </p>
Readme
Introduction
- A remake version of legendary cursor using
typescriptand lastest version ofthree.
Tech Stack
Screenshots
Installation
Using package manager
- Install the package
npm i fancy-cursor
# or
yarn add fancy-cursor
# or
pnpm add fancy-cursor- Play with it
import FancyCursor from 'fancy-cursor';
addEventListener('load', () => {
console.log(
new FancyCursor({
opacityDecrement: 0.85,
sparklesCount: 128,
})
);
});Using CDN
- Put the code below inside the
<head></head>tag, after the styles and replace<version>with an actual version (like0.1.7)
<script type="importmap">
{
"imports": {
"fancy-cursor": "https://cdn.jsdelivr.net/npm/fancy-cursor@<version>/bundle/esm/index.js"
}
}
</script>- Then we can play with it
<script type="module">
import FancyCursor from 'fancy-cursor';
addEventListener('load', () => {
console.log(
new FancyCursor({
opacityDecrement: 0.85,
sparklesCount: 128,
})
);
});
</script>- Full example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fancy Cursor</title>
<script type="importmap">
{
"imports": {
"fancy-cursor": "https://cdn.jsdelivr.net/npm/[email protected]/bundle/esm/index.js"
}
}
</script>
</head>
<body>
<script type="module">
import FancyCursor from 'fancy-cursor';
addEventListener('load', () => {
console.log(
new FancyCursor({
opacityDecrement: 0.85,
sparklesCount: 128,
})
);
});
</script>
</body>
</html>Development
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed or downloaded on your machine:
Cloning the Repository
git clone https://github.com/yuran1811/fancy-cursor.git
cd fancy-cursorInstallation
- Enable
pnpmto build and run the project
corepack enable pnpmInstall the project dependencies:
pnpm installRunning the Project
pnpm devOpen http://localhost:5173 in your browser to view the project.