All vanilla.
Here's some stuff I learnt.
Also reminders for when I wanna change it in the future.
One of my font files had more bytes than a eating contest so I FontForg to remove extra characters (there was a lot of hidden Korean)
I decided to use rgb colour codes as they're made solely of numbers so it was easier to maths them. I mapped how the numbers changed as you go through the colour wheel with fixed brightness & contrast. It broke down into 6 stages, below is the starting position of each stage:
- rgb ( ⬆ ⬇️ ⬇️ )
//next g goes up - rgb ( ⬆ ️ ⬆️ ⬇️ )
//next r goes down - rgb ( ⬇ ⬆ ️ ⬇️ )
//next b goes up - rgb ( ⬇ ⬆ ️ ⬆️ )
//next g goes down - rgb ( ⬇ ⬇️ ️ ⬆️ )
//next r goes up - rgb ( ⬆ ️ ⬇️ ⬆️ )
//next b goes down
Then you pick your top value and bottom value and you can cycle through a colour spectrum at a set brightness. My ⬇️ is 130 & ⬆️ 255, and I only use steps 2-5 to keep it simple.
This is pattern is then applied to different segments of the screen on mouse movement.
Gunna break this one down as it took the longest
Turns out pseudo selectors like active & focus don't work on IOS devices, but this magical line of code does it's thing:
document.addEventListener("touchstart", function() {},false);
Without hover you could click on the tiles to make them animate, but you would often end up clicking on the social media links. To get around this I transition the z-index of the link so that initially it is unclickable, then transitions & fades into usability. Got the idea from this cool kid who likes to transition 👻👻👻
Ghosting through walls
To get z-index to work parent has been set as a flex container:
Some vaguely related thing I found
There's some easter eggs in the making. See if you can find them without looking at the code.