looker-on

Just a small demo of how one can package css on npm

Usage no npm install needed!

<script type="module">
  import lookerOn from 'https://cdn.skypack.dev/looker-on';
</script>

README

looker-on

Since many people think npm is all about javascript, here is a package which renders pair of SVG eyes, styled with CSS and hosted on npm.

how to use this?

With npm do:

npm install looker-on

Then create instance of looker and attach it to dom:

// your index.js file
var Looker = require('looker-on');
new Looker(document.body);

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <script src='bundle.js'></script>
</body>

</html>

style.css and bundle.js are produced by parcelify and browserify:

parcelify index.js -c style.css
browserify index.js > bundle.js

Now you can open index.html and observe two eyes observing you.

bonus

You can make these eyes track position of the mouse cursor by changing index.js to

// your index.js file
var Looker = require('looker-on');
var observer = new Looker(document.body);
document.body.addEventListener('mousemove', function (e) {
  observer.lookAt(e.clientX, e.clientY);
}, false);

is it worth the effort?

Yes. With almost 100k packages on npm, this is well worth the effort of familiarizing yourself with tools.

license

MIT