This is a silly little JavaScript package to easily embed a widget on your website that lets users spawn oneko-like nekos the follow the pointer!
For an example of a site that includes the widget, see my blog.
You'll need to include the CSS in your page for this to work. Add this somewhere in your HTML <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/SCP-iota/spawn-a-neko@master/style.css" />If you're using a JavaScript bundler like Webpack and already using a plugin to bundle CSS, you can import the CSS directly:
import 'spawn-a-neko/style.css'Include this towards the end of your HTML's <body> element:
<script src="https://cdn.jsdelivr.net/gh/SCP-iota/spawn-a-neko@master/spawn-a-neko.js"></script>
<script>
SpawnANeko.start()
</script><script type="module">
import { start } from "https://cdn.skypack.dev/spawn-a-neko"
start()
</script>If you're using a JavaScript bundler like Webpack, you can get the spawn-a-neko package from NPM and include it in your site's code.
npm install spawn-a-nekoimport { start } from "spawn-a-neko";
window.addEventListener('load', start);require("spawn-a-neko").start();You can customize the colors using custom CSS properties in your own stylesheet. (The values shown here are the defaults.):
<style>
.spawn-a-neko-button, .spawn-a-neko-panel {
/* Primary background color for the button and panel */
--spawn-a-neko-primary-color: #cc0099;
/* Border color of the panel */
--spawn-a-neko-border-color: #660066;
}
.spawn-a-neko-button {
/* Shown on the main button when hovered with the mouse pointer */
--spawn-a-neko-button-hover-color: #990099;
/* Shown on the main button when being pressed */
--spawn-a-neko-button-active-color: #ff00ff;
}
.spawn-a-neko-spawn-button {
/* Background color of the spawn button */
--spawn-a-neko-spawn-button-color: #9900ff;
}
</style>For more control over where the button gets added, you can use the creatButton function and Button class.
const button = SpawnANeko.createButton();
new SpawnANeko.Button(button);
document.body.appendChild(button);import { createButton, Button } from "spawn-a-neko";
const button = createButton();
new Button(button);
document.body.appendChild(button);const { createButton, Button } = require("spawn-a-neko");
const button = createButton();
new Button(button);
document.body.appendChild(button);