Reveal on scroll
Items fade in and rise, one after another, as they enter the viewport.
.reveal {
display: grid;
gap: 10px;
align-content: center;
height: 100%;
padding: 28px;
}
.reveal__item {
--k-when: view once;
--k-opacity: 0 1;
--k-y: 28px 0;
--k-stagger: 90ms;
--k-motion: soft;
display: flex;
gap: 14px;
align-items: center;
padding: 14px 16px;
border-radius: 14px;
background: #fff;
box-shadow: 0 8px 24px -16px rgb(12 19 36 / 0.4);
}
.reveal__item b {
width: 28px;
height: 28px;
border-radius: 8px;
background: var(--c);
}
.reveal__item span {
flex: 1;
height: 10px;
border-radius: 5px;
background: #e3e8f2;
}