shipnotes-components

Ship Notes components

Small interfaces with moving parts, built for Ship Notes. New components are added as their videos come out.

Want one built for your product? DM me on X.

Jelly Stack

Project Stack, but the three cards are jelly. Pull a corner and it stretches, flick it and it whips, tap the card behind and it hops out and splats. Each card is 81 points on springs, and the text bends with the surface.

Jelly Stack: a red glossy card bending like jelly, orange and purple cards stacked behind

Try it live. Full usage in the Jelly Stack instructions. One JavaScript file, no libraries, WebGL with a plain CSS fallback.

Voice Orb

A voice orb for an AI app: 12,000 particles on WebGL that react to live sound from a mic or anything playing on the page. Bass moves the whole sphere, and the highs throw sparks off the edge. Four states: idle, listening, thinking and speaking.

Voice Orb: a pink particle sphere bursting on a bass hit in the speaking state

Try it live. Tap Play beat, or Talk to it for the mic. Full usage in the Voice Orb instructions. One JavaScript file, no libraries, and the audio never leaves your browser.

Project Stack

Three portfolio cards in a stack. Pick a tab and the next card comes forward. Give a project an accent color and its card follows it.

Project Stack: a dark card with a mint planet and ring, two cards stacked behind

Try it live. Full usage in the Project Stack instructions. One JavaScript file, no libraries.

Signal Orb

A status light for an AI app: listening, thinking, searching and done, drawn with 12,000 particles on WebGL. Your app sets the state; the orb rebuilds into the new shape.

Signal Orb: purple particle ribbons in the thinking state

Try it live. Full usage in the Signal Orb instructions. One JavaScript file, no libraries. It uses fewer particles on phones and cuts the count further if frames run slow.

Pull Lamp

A desk lamp that switches the page between light and dark themes. Pull the brass cord, tap it, or use the keyboard.

Pull Lamp: a green desk lamp with a brass pull cord

Try it live, works on a phone too.

Download and try

  1. Download the ZIP, or use Code > Download ZIP above.
  2. Extract the ZIP to a folder on your computer.
  3. Open components/pull-lamp/demo.html in your browser. Keep pull-lamp.js beside it.

No account, package install or build step. The demo works locally without a server. GitHub displays the source; opening the HTML file after extraction runs the demo.

Add it to your site

Follow the Pull Lamp instructions for a complete HTML example. Copy one JavaScript file and connect its themechange event to your page’s colors. The SVG illustration is included in the component. No runtime libraries or image downloads.

Mouse, touch, keyboard and reduced motion are supported. Tested in Chromium on desktop and at a 390px mobile viewport. Safari, Firefox and physical phones have not been tested in this release check.

Follow the builds

Ship Notes on X. Follow along for the next component and its source. Need a custom one for your product? DM me there.

License

The code is MIT licensed. Use it in personal or commercial projects, modify it, and keep the license notice when redistributing it.

This site is open source. Improve this page.