I always apply this trick to the scroll-fade mask. Additionally:
- Add a padding to the mask for sticky regions using the same technique
- Apply the scroll-fade in both directions
- Make the fade effect appear progressively
if youโre dynamically masking a scroll container with css, consider leaving room for the scrollbar instead of masking it too ๐งโ๐ณ
mask-repeat: no-repeat;
mask-size: calc(100% - 10px) 100px;
I will go as far to say, if a project isn't going to be completed in one session with AI, it's not worth doing with AI. Because you will have a miserable time maintaining it. I haven't seen an agent add a feature to an existing project while reducing complexity. It's basically a race against complexity. Either the required complexity of your project runs out first, or the agent's ability to make meaningful changes.