"Any sufficiently advanced technology is indistinguishable from magic."
- Arthur C. Clarke
Add client-side, head-tracked pointers to your HTML5 projects just...like...✨...that!
IE / Edge
|Edge||last 5+||last 5+||last 3+||last 2+||last 2+|
Table of Contents:
SeeClarke.js is a thin wrapper around PoseNet and TensorFlow.js that calculates head-tracked cursor positions for a variable number of users at once, and is fast enough to work on mid-ranged mobile devices. Currently, SeeClarke only handles the calculations and it's up to you to decide what to do with it, for instance (click links to play with demos):
You can see the visual evolution of this project in this Twitter thread.
🧙 These demos link to CodePens, but are also available in
/demo/for offline testing!
|Basic Cursor Positioning||Page Scrolling|
|Focusing Elements||Panning Google Maps|
|Looking Around Street Views||Looking Around YouTube 360|
The following Node commands are available from the project root:
npm run dev # Runs the project in development mode with live reloadingnpm run build # Builds the project into /publicnpm run test # Runs unit tests
The following is a list of all the platforms and environments that we currently support:
🧙 Clarke: The first thing you'll want to do is get access to the
SeeClarkeclass, so that you can instantiate it. Let's explore 2 options below!
<!-- For the latest version --><!-- For a specific version (in this case, 0.0.3) -->
# In your existing projects rootnpm install --save seeclarke
You'll then be able to import it with:
const SeeClarke =
🧙 Clarke: Now that we have SeeClarke, let's instantiate it with the
newoperator and have it autostart! Head over with Al to the options page and he'll explain the different types of configs for you!
// Instantiate an instance of SeeClarke and autostart itconst seeclarke = autostart: true
Other Platforms Coming Soon
👻 Casper: Heads up! We're also planning support for the following: CLI's (via NodeJS), apps, IoT's, headerless environments, smart watches, game consoles, AR/VR/MR environments, vehicles, smart homes, smart factories, space stations, dreams, and realities!
The following is a list of features that are currently breaking browser support:
|Opera Mini||getUsermedia, WebGL|
The following polyfills are providing support for older browsers:
|getUserMedia||Chrome <= 49
iOS <= 10.3
|/src/polyfills.js||We're basically only supporting the API change from
|CustomEvent||IE, Safari Nightly Builds||