feat(chat): soften the committed-block reveal into a materialize cascade
The 140ms fade read as a pop next to the scroll glide. The reveal now runs 320ms on an ease-out-quint curve with a 10px rise and a touch of blur resolving — paint-only properties throughout, so row measurement is untouched — and blocks committed in the same tick cascade with a 55ms stagger instead of appearing together. Reduced motion still disables the whole thing.
This commit is contained in:
@@ -1378,21 +1378,29 @@ html:not(.dark) .chat-scroll {
|
||||
}
|
||||
}
|
||||
|
||||
/* A block committed mid-stream enters with a short fade-and-rise; the
|
||||
transform is paint-only, so virtualized row measurement is unaffected. */
|
||||
/* A block committed mid-stream materializes: fade, a gentle rise, and a
|
||||
touch of blur resolving. Transform and filter are paint-only, so
|
||||
virtualized row measurement is unaffected. Blocks committed in the same
|
||||
tick cascade via --oc-md-enter-delay set inline by the renderer. */
|
||||
@keyframes oc-md-block-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
transform: translateY(10px);
|
||||
filter: blur(2px);
|
||||
}
|
||||
60% {
|
||||
filter: blur(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.oc-md-block-enter {
|
||||
animation: oc-md-block-enter 140ms ease-out both;
|
||||
animation: oc-md-block-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-delay: var(--oc-md-enter-delay, 0ms);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user