ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Animation Smorgasbord (#15637)

Browse source 
Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>
This commit is contained in:
Kit Langton 2026-03-02 17:24:32 -05:00 • committed by GitHub
commit 9d7852b5c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
62 changed files with 5224 additions and 703 deletions
Download patch file Download diff file Expand all files Collapse all files

89
packages/ui/src/components/tool-status-title.css Normal file
View file

@ -0,0 +1,89 @@
[data-component="tool-status-title"] {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
text-align: start;
[data-slot="tool-status-suffix"] {
display: inline-flex;
align-items: baseline;
white-space: nowrap;
}
[data-slot="tool-status-prefix"] {
white-space: nowrap;
flex-shrink: 0;
}
[data-slot="tool-status-swap"],
[data-slot="tool-status-tail"] {
display: inline-grid;
overflow: hidden;
justify-items: start;
transition: width var(--tool-motion-spring-ms, 480ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-slot="tool-status-active"],
[data-slot="tool-status-done"] {
grid-area: 1 / 1;
white-space: nowrap;
justify-self: start;
text-align: start;
transition-property: opacity, filter, transform;
transition-duration:
var(--tool-motion-fade-ms, 240ms), calc(var(--tool-motion-fade-ms, 240ms) * 0.8),
calc(var(--tool-motion-fade-ms, 240ms) * 0.8);
transition-timing-function: ease-out, ease-out, ease-out;
}
&[data-ready="false"] {
[data-slot="tool-status-swap"],
[data-slot="tool-status-tail"] {
transition-duration: 0ms;
}
[data-slot="tool-status-active"],
[data-slot="tool-status-done"] {
transition-duration: 0ms;
}
}
[data-slot="tool-status-active"] {
opacity: 0;
filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));
transform: translateY(0.03em);
}
[data-slot="tool-status-done"] {
color: var(--text-strong);
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
&[data-active="true"] {
[data-slot="tool-status-active"] {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
[data-slot="tool-status-done"] {
opacity: 0;
filter: blur(calc(var(--tool-motion-blur, 2px) * 0.45));
transform: translateY(0.03em);
}
}
}
@media (prefers-reduced-motion: reduce) {
[data-component="tool-status-title"] [data-slot="tool-status-swap"],
[data-component="tool-status-title"] [data-slot="tool-status-tail"] {
transition-duration: 0ms;
}
[data-component="tool-status-title"] [data-slot="tool-status-active"],
[data-component="tool-status-title"] [data-slot="tool-status-done"] {
transition-duration: 0ms;
}
}