From 1e767d3f85a1dd1231e0364642384798346c764c Mon Sep 17 00:00:00 2001 From: dbpolito Date: Sun, 11 Jan 2026 22:43:56 -0300 Subject: [PATCH 1/4] feat(desktop): Animations --- packages/ui/src/components/message-nav.css | 8 ++++ packages/ui/src/components/message-part.css | 2 + packages/ui/src/components/session-turn.css | 2 + packages/ui/src/styles/animations.css | 48 +++++++++++++++++++++ 4 files changed, 60 insertions(+) diff --git a/packages/ui/src/components/message-nav.css b/packages/ui/src/components/message-nav.css index 465bd66fe5b1..ebd8dc47a479 100644 --- a/packages/ui/src/components/message-nav.css +++ b/packages/ui/src/components/message-nav.css @@ -93,6 +93,14 @@ [data-slot="message-nav-tooltip"] { z-index: 1000; + + &[data-expanded] { + animation: slideInLeft 0.15s ease-out; + } + + &[data-closed] { + animation: slideOutLeft 0.1s ease-in forwards; + } } [data-slot="message-nav-tooltip-content"] { diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index b087b59e17d6..a47d88ef514c 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -114,6 +114,7 @@ [data-component="reasoning-part"] { width: 100%; opacity: 0.5; + animation: fadeUpDim 0.5s ease-out forwards; [data-component="markdown"] { margin-top: 24px; @@ -320,6 +321,7 @@ align-items: center; gap: 8px; color: var(--text-weak); + animation: slideInLeft 0.3s ease-out; [data-slot="icon-svg"] { flex-shrink: 0; diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css index abed69897456..237906197a6d 100644 --- a/packages/ui/src/components/session-turn.css +++ b/packages/ui/src/components/session-turn.css @@ -6,6 +6,7 @@ display: flex; align-items: flex-start; justify-content: flex-start; + animation: fadeUp 0.5s ease-out; [data-slot="session-turn-content"] { flex-grow: 1; @@ -126,6 +127,7 @@ gap: 24px; align-items: flex-start; align-self: stretch; + animation: fadeUp 0.5s ease-out; } [data-slot="session-turn-summary-header"] { diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css index 3480976ddc21..c88032084ecb 100644 --- a/packages/ui/src/styles/animations.css +++ b/packages/ui/src/styles/animations.css @@ -33,6 +33,54 @@ } } +@keyframes fadeUpDim { + from { + opacity: 0; + transform: translateY(5px); + } + to { + opacity: 0.5; + transform: translateY(0); + } +} + +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-10px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideOutLeft { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(-10px); + } +} + +@media (prefers-reduced-motion: reduce) { + [data-component="session-turn"], + [data-slot="session-turn-summary-section"], + [data-component="reasoning-part"], + [data-slot="task-tool-item"], + [data-slot="accordion-content"], + [data-slot="accordion-item"], + [data-slot="collapsible-content"], + [data-slot="message-nav-tooltip"], + [data-slot="message-nav-tooltip"][data-expanded], + [data-slot="message-nav-tooltip"][data-closed] { + animation: none !important; + } +} + .fade-up-text { animation: fadeUp 0.4s ease-out forwards; opacity: 0; From 4be1f2d4bed1653ece896fd5ac4ce7223cb05400 Mon Sep 17 00:00:00 2001 From: dbpolito Date: Sun, 11 Jan 2026 22:44:47 -0300 Subject: [PATCH 2/4] Tweak --- packages/ui/src/styles/animations.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css index c88032084ecb..e367eb32510b 100644 --- a/packages/ui/src/styles/animations.css +++ b/packages/ui/src/styles/animations.css @@ -71,10 +71,6 @@ [data-slot="session-turn-summary-section"], [data-component="reasoning-part"], [data-slot="task-tool-item"], - [data-slot="accordion-content"], - [data-slot="accordion-item"], - [data-slot="collapsible-content"], - [data-slot="message-nav-tooltip"], [data-slot="message-nav-tooltip"][data-expanded], [data-slot="message-nav-tooltip"][data-closed] { animation: none !important; From 8e9f1160f5dcd32373396098e77934b2f7d60c61 Mon Sep 17 00:00:00 2001 From: dbpolito Date: Sun, 11 Jan 2026 22:52:08 -0300 Subject: [PATCH 3/4] Cleanup --- packages/ui/src/styles/animations.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css index e367eb32510b..26b62f418614 100644 --- a/packages/ui/src/styles/animations.css +++ b/packages/ui/src/styles/animations.css @@ -66,17 +66,6 @@ } } -@media (prefers-reduced-motion: reduce) { - [data-component="session-turn"], - [data-slot="session-turn-summary-section"], - [data-component="reasoning-part"], - [data-slot="task-tool-item"], - [data-slot="message-nav-tooltip"][data-expanded], - [data-slot="message-nav-tooltip"][data-closed] { - animation: none !important; - } -} - .fade-up-text { animation: fadeUp 0.4s ease-out forwards; opacity: 0; From 442eafa220cd7cf438906fcbefd33d14ee75b2f6 Mon Sep 17 00:00:00 2001 From: dbpolito Date: Sun, 11 Jan 2026 22:56:25 -0300 Subject: [PATCH 4/4] WIP --- packages/ui/src/components/message-part.css | 1 - packages/ui/src/styles/animations.css | 10 ++++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index a47d88ef514c..5308cc35d251 100644 --- a/packages/ui/src/components/message-part.css +++ b/packages/ui/src/components/message-part.css @@ -113,7 +113,6 @@ [data-component="reasoning-part"] { width: 100%; - opacity: 0.5; animation: fadeUpDim 0.5s ease-out forwards; [data-component="markdown"] { diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css index 26b62f418614..948974adca69 100644 --- a/packages/ui/src/styles/animations.css +++ b/packages/ui/src/styles/animations.css @@ -161,3 +161,13 @@ animation-delay: 3s; } } + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +}