Need help with tether?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

203 Stars 24 Forks Other 45 Commits 0 Opened issues


Tether is an interactive web application created by @jonobr1 in collaboration with Plaid ( The track is accompanied by a series of graphic shapes that gradually evolve as the music progresses.

Services available


Need anything else?

Contributors list


Tether is an interactive web application created by @jonobr1 in collaboration with Plaid. The track is accompanied by a series of graphic shapes that gradually evolve as the music progresses; you can manipulate what you hear by clicking and dragging your mouse — or, if watching on your smartphone or tablet, touching and dragging on the screen. This repository holds all the assets and source code for the site


Because Tether is a simple website, it's relatively easy to boot up and tinker with on your own machine. Since the application relies on a number of asynchronous requests, you'll need to run a local server. We recommend Python's

. If you have a Mac this is already installed. The steps are as follows:

Local Server

  1. Make sure Python is installed.
  2. Download / Clone this project.
  3. Open a command line interface.
  4. Type
    cd path/to/tether/project
  5. Type
    python -m SimpleHTTPServer

The server will default to port

. Open up a web browser and go to
. You should see the Tether logo load and you have successfully setup your local server!


The styling and layout of Tether like all websites is built on css which you can find in the

folder of the project. However, the project leverages two libraries in order to speed up styling: SCSS and Bourbon. Following these steps will allow you to edit the
file and automatically compile the
. The
is the file actually used on the site, but
affords some nice features like variables when writing css and mixins for css3 polyfill.
  1. Make sure Ruby is installed.
  2. Open a command line interface.
  3. Type
    gem install scss
  4. Type
    gem install bourbon
  5. Type
    cd path/to/tether/project/styles
  6. Type
    bourbon install
  7. Type
    scss --watch .

The final command initializes a script that watches for when

files change and updates their
counterpart. Read up on both SCSS and Bourbon to familiarize yourself with the possibilities.


The bulk of the "content" you see on the site is made with JavaScript. Tether relies on three emerging technologies for the browser: Canvas2d, WebGL, and the Web Audio API. There is a

folder in the project that represent all the different modules and logic. They rely on extrinsic JavaScript files in the
folder. Together these files get compiled into a concatenated
file and a minified

N.B: This project was concepted and developed on an accelerated timeline so the coherence and modularity is tenuous at best. Please don't refer to this project for best practices.

  • src
    • animations.js Singleton object that holds each prototypical animation.
    • animations/
    • bass.js
    • drone.js
    • hats.js
    • high-bass.js
    • whip.js
    • camera.js Camera object for Two.js to conveniently move the scene.
    • effect.js GLSL Fragment Shader for WebGL enabled browsers.
    • effects-view.js Three.js Scene to take Two.js scene as a texture for WebGL enabled browsers.
    • grid.js Class to dictate position of animations.
    • main.js Handles all controllers and view logic.
    • playback.js Class to manage when animations should play.
    • pool.js Class to recycle and keep a hard limit on instantiated animations.
    • sound.js Class to abstract Web Audio API into a friendly api.
    • starfield.js Class to draw stars in the background.
    • trail.js Class to draw user input.
    • views/
    • about.js
    • buy.js
    • embed.js
    • experience.js The "music video" view.
    • lobby.js
    • share.js
    • zui.js Dependency of Camera to do Google Maps style zooming and panning matrix transformations.

To recap in prose:

is executed on page load and dictates which view is visible and active. The views share a lot in common, but don't really have an underlying object or class that they inherit from.
are where the bulk of the logic come from.
is responsible for the page with the Tether logo on it and
is the "music video" portion of the project.
leverages these other files, loading sounds adding additional interaction to the canvases, etc..


In addition to imagery, Tether relies on a compiled JSON data object

to dictate when animations should fire. These values are a blend of midi data, sound processing, and analog recording. Tether also relies on audio files. There are two tracks, one at
and another at
. Lastly, there are
which are multi-second fragments from the stems to be used in

Build Process

At the bottom of

there is a large commented out block of
tags. Uncomment this and comment out the
 line in order to dev. This way you can edit individual files and refresh the page to see changes. However, if you've made changes that you'd like to minify then follow these steps:

  1. Make sure Node.js is installed.
  2. Open up a command line interface.
  3. Type
    cd path/to/tether/project
  4. Type
    npm install node-minify
  5. Type
    node ./utils/build

This will update both the concatenated and minified files in


We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.