Scroll-linked motion
A reading-progress bar follows the page. The tile turns as it crosses the screen.
Scroll the pageEdit
.scrolly {
display: grid;
place-items: center;
height: 100%;
}
.scrolly__bar {
--k-when: page;
--k-motion: instant;
position: absolute;
inset: 0 0 auto 0;
height: 6px;
background: #2f6bff;
scale: var(--k-progress) 1;
transform-origin: left;
}
.scrolly__tile {
--k-when: scroll;
--k-rotate: -120deg 120deg;
--k-scale: 0.7 1.15;
width: 120px;
height: 120px;
border-radius: 30px;
background: conic-gradient(from 45deg, #2f6bff, #7c5cff, #ff5d6c, #2f6bff);
}