Starfield
This demo is a test of the interactions between animation-timeline,
scroll-timeline, and the CSS Paint API.
The background image for the page is drawn using a Paint Worklet and the position of the stars is determined using Simplex noise. The stars have a small random probability of not being drawn, which causes a very subtle flickering effect while scrolling the page.
The background color and the star opacity is driven by the position, meaning that the stars fade out and the background turns blue as you scroll to the bottom of the page. This effect could also have been accomplished using gradients, but I wanted to use the same implementation for a fixed-position background as well.
I discovered that CSS custom properties are not smoothly animated, even if the type is well defined
using the @property syntax. Due to this limitation, I've pre-defined the values of the
animation using a loop which generates 1000 animation steps in the range of 0.0 to 1.0 for the
--starfieldProgressValues
CSS variable.
Like a few of the other demos, the use of LAB colors in the paint worklet is not really necessary with the colors chosen, but would lead to smoother gradients if a different palette was used.