Skip to content

pi0/clippy

Repository files navigation

Clippy

Add Clippy or his friends to any website for instant nostalgia!

Online Demo

Usage

CDN (no build tools)

You can use ClippyJS directly in the browser using CDN:

<!doctype html>
<html>
  <body>
    <script type="module">
      import { initAgent } from "https://cdn.jsdelivr.net/npm/clippyjs/dist/index.mjs";
      import * as agents from "https://cdn.jsdelivr.net/npm/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, Rover

Each 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

MIT

This project is a fresh rewrite of Clippy.JS.

About

📎 Add Clippy or his friends to any website for instant nostalgia!

Resources

License

Stars

Watchers

Forks

Contributors

Languages