clippyjs
v0.1.0
Published
Add Clippy or his friends to any website for instant nostalgia.
Downloads
2,034
Readme
Clippy
Add Clippy or his friends to any website for instant nostalgia!
Usage
CDN (no build tools)
You can use ClippyJS directly in the browser with a <script type="module"> tag and unpkg:
<!doctype html>
<html>
<body>
<script type="module">
import { initAgent } from "https://unpkg.com/clippyjs/dist/index.mjs";
import * as agents from "https://unpkg.com/clippyjs/dist/agents/index.mjs";
const agent = await initAgent(agents.Clippy);
agent.show();
agent.speak("Hello! I'm Clippy, your virtual assistant.");
</script>
</body>
</html>npm package
Install and import an agent:
import { initAgent } from "clippyjs";
import { Clippy } from "clippyjs/agents";
// Load and show the agent
const agent = await initAgent(Clippy);
agent.show();Available agents
You can import agents individually or all at once:
// Import all agents
import * as agents from "clippyjs/agents";
// Or import individually
import { Clippy } from "clippyjs/agents";
// Also available: Bonzi, F1, Genie, Genius, Links, Merlin, Peedy, Rocky, RoverEach agent can also be imported from its own subpath:
import Merlin from "clippyjs/agents/merlin";API
All agent actions are queued and executed sequentially, so you can chain them.
// Play a specific animation
agent.play("Searching");
// Play a random animation
agent.animate();
// List all available animations
agent.animations();
// => ["MoveLeft", "Congratulate", "Hide", "Pleased", "Acknowledge", ...]
// Show a speech balloon
agent.speak("When all else fails, bind some paper together. My name is Clippy.");
// Move to a given point, using animation if available
agent.moveTo(100, 100);
// Gesture at a given point (if a gesture animation is available)
agent.gestureAt(200, 200);
// Stop the current action in the queue
agent.stopCurrent();
// Stop all actions and return to idle
agent.stop();
// Hide the agent
agent.hide();
// Pause and resume animations
agent.pause();
agent.resume();
// Remove the agent from the DOM
agent.dispose();License
This project is a fresh rewrite of Clippy.JS.
- Clippy.JS by Smore
- Cinnamon Software for developing Double Agent, the program used to unpack Clippy and his friends
- Microsoft, for creating Clippy :)