clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-04-28 08:44:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
parent 78069369e2
commit 9d7852b5c3
62 changed files with 5231 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/ui/src/components/animated-number.css Normal file
View File

@@ -0,0 +1,75 @@
[data-component="animated-number"] {
display: inline-flex;
align-items: baseline;
vertical-align: baseline;
line-height: inherit;
font-variant-numeric: tabular-nums;
[data-slot="animated-number-value"] {
display: inline-flex;
flex-direction: row-reverse;
align-items: baseline;
justify-content: flex-end;
line-height: inherit;
width: var(--animated-number-width, 1ch);
overflow: hidden;
transition: width var(--tool-motion-spring-ms, 560ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-slot="animated-number-digit"] {
display: inline-block;
width: 1ch;
height: 1em;
line-height: 1em;
overflow: hidden;
vertical-align: baseline;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 var(--tool-motion-mask, 18%),
#000 calc(100% - var(--tool-motion-mask, 18%)),
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
#000 var(--tool-motion-mask, 18%),
#000 calc(100% - var(--tool-motion-mask, 18%)),
transparent 100%
);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
[data-slot="animated-number-strip"] {
display: inline-flex;
flex-direction: column;
transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
transition-property: transform;
transition-duration: var(--animated-number-duration, 560ms);
transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
[data-slot="animated-number-strip"][data-animating="false"] {
transition-duration: 0ms;
}
[data-slot="animated-number-cell"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1ch;
height: 1em;
line-height: 1em;
}
}
@media (prefers-reduced-motion: reduce) {
[data-component="animated-number"] [data-slot="animated-number-value"] {
transition-duration: 0ms;
}
[data-component="animated-number"] [data-slot="animated-number-strip"] {
transition-duration: 0ms;
}
}