This project came about as i was listening to a podcast, i realised that i was scrolling through instagram not even looking at the screen – just so my hands had something to do.
So i decided to create a little app that lets you scroll through the endless void of colours.
To do this i** mapped trigonometric wave functions onto a HSL color space. As you scroll you should see a continuous spectrum of colours (hopefully). Each of the HSL components has it’s own base, range, and frequency which you can adjust.
There’s a demonstration here where you can play around with the parameters, and see them change in real time. i am working on an export functions so you can directly export them to the scrolling app.
From this mathematical exploration of the HSL colour space, i wanted to make a simple app. Every few 1000 scrolls there should be an ad pop-up, this is done intentionally to try and pull you off your phone and can obviously be removed through a donation.
There is an autoscroll feature, so you can just leave it running at the side of your monitor and have a nice colour changing background. Additionally, you can save the colours you like. my favourite thing to create a nice colour palette is find a colour you like. For example #474BA0, then change the function from sine to cosine, you’ll get a colour that mathematically complements yours.
There are also a few settings that you can adjust so that you move through the colour space how you want to. The full working app is below:
For the nerds, what happens at scroll position 50,000?
const scrollY = 50000;
const effectiveScroll = scrollY % (30000 * Math.PI); // ≈ 50000
// Hue calculation:
const hueWave = (Math.sin(50000 * 0.0001) + 1) / 2; // ≈ 0.766
const hue = 180 + (0.766 - 0.5) * 360; // ≈ 275.8° (purple)
// Saturation calculation:
const satWave = (Math.cos(50000 * 0.0005) + 1) / 2; // ≈ 0.284
const saturation = 70 + (0.284 - 0.5) * 40; // ≈ 61.4%
// Lightness calculation:
const lightWave = (1 - Math.sin(50000 * 0.0004)) / 2; // ≈ 0.635
const lightness = 50 + (0.635 - 0.5) * 20; // ≈ 52.7%
// Result: hsl(276°, 61%, 53%) - a muted purple
**ChatGPT and Claude are an extension of i.
iniphi.co.uk 