Hello, friends! Do you want your own stick that goes ooooiiiiihh?
And when you turn it over it goes aaauuuooohhh?

Installation

Download the javascript file and save it to your site:

🡇noise-tube.js

Usage

Import the script at the top of your page and add a <x-noise-tube> element to your html.

<!-- Include the script at the top of your page. -->
<script src="noise-tube.js"></script>

<!-- Place the custom element wherever you want. -->
<x-noise-tube></x-noise-tube>

Now you have your own fun tube! Click it to flip it over.

Customization

Change the color and size with CSS:

x-noise-tube {
  --tube-height: 100px;
  --slider-height: 10px;
  --noise-tube-scale: 2;
  --cap-color: palegreen;
  --tube-color: mediumorchid;
  --slider-color: mediumpurple;
}

Scripting

Flip your tubes by calling the .flip method with javascript:

document.querySelectorAll("x-noise-tube").forEach(v => v.flip());