A tiny vanilla JS library for UI effects — custom cursors, magnetic buttons, and animated text. No dependencies, no build step, one <script> tag.
I built this while learning JS. It's a collection of effects I kept rewriting across projects, finally put in one place.
<script src="https://unpkg.com/sanzo-js@2.0.0/sanzo.js"></script>Everything's on the global sanzo object.
<script src="https://unpkg.com/sanzo-js@2.0.0/sanzo.js"></script>
<script>
sanzo.mousefollow({ color: "#ff0040", style: 2 });
sanzo.magnetbutton(".magnet");
sanzo.textAnimation("headline", 60, "typewriter", 1500, "hover");
</script>Replaces the default cursor with a smooth trailing element.
sanzo.mousefollow({
width: "30px",
height: "30px",
color: "#ff0040",
style: 2
});| Option | Type | Default | Description |
|---|---|---|---|
width |
string | "20px" |
Cursor width |
height |
string | "20px" |
Cursor height |
color |
string | "#000" |
Accepts any valid CSS color or gradient |
style |
number | 1 |
Style preset: 1, 2, or 3 |
Makes buttons subtly move toward the mouse when it's nearby. Works on any element, best on round or pill-shaped buttons.
sanzo.magnetbutton(".magnet");<button class="magnet">Hover me</button>
<button class="magnet">Me too</button>Pass any CSS selector — all matching elements get the effect.
Animates text inside any element. Three styles, two trigger modes.
sanzo.textAnimation("headline", 80, "scramble", 1200, "hover");
sanzo.textAnimation("subtitle", 40, "typewriter", 1500, "auto");
sanzo.textAnimation("label", 60, "fade", 1000, "hover");<h1 id="headline">Hover over me</h1>
<h2 id="subtitle">I animate on load</h2>
<span id="label">And me on hover</span>| Param | Type | Default | Description |
|---|---|---|---|
id |
string | — | Element ID to animate (required) |
speed |
number | 100 |
Delay between each animation step (ms) |
style |
string | "scramble" |
"scramble", "typewriter", or "fade" |
duration |
number | 1000 |
Total animation length (ms) |
trigger |
string | "hover" |
"hover" triggers on mouseenter, "auto" runs on load |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sanzo.js demo</title>
<style>
body { background: #0a0a0a; color: #fff; cursor: none; font-family: sans-serif; }
.magnet { padding: 0.75rem 2rem; border-radius: 999px; border: none; background: #ff0040; color: #fff; font-size: 1rem; cursor: none; }
</style>
</head>
<body>
<h1 id="title">sanzo.js</h1>
<p id="sub">A tiny JS effects library</p>
<button class="magnet">Get started</button>
<button class="magnet">View source</button>
<script src="https://unpkg.com/sanzo-js@2.0.0/sanzo.js"></script>
<script>
sanzo.mousefollow({ color: "#ff0040", style: 1 });
sanzo.magnetbutton(".magnet");
sanzo.textAnimation("title", 50, "scramble", 1000, "auto");
sanzo.textAnimation("sub", 40, "fade", 1200, "auto");
</script>
</body>
</html>Works in all modern browsers.
| Chrome | Firefox | Safari | Edge |
|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ |
-
sanzo.destroy()to clean up listeners and DOM elements - Touch device support
- Custom easing and delay control
- ES module export
- More cursor styles
- Scroll-triggered text animations
PRs welcome if you want to take a shot at any of these.
- Fork the repo
- Create a branch (
git checkout -b fix/something) - Make your change
- Open a PR with a short description of what and why
For new features, open an issue first so we can figure out if it fits before you spend time on it.
MIT — do whatever you want with it.
Built by Sanzo while learning JS. Still maintaining it.