buzzert/Sybil-2
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

web: tool stacking ui

Browse Source
This commit is contained in:
James Magahern
2026-06-12 00:09:44 -07:00
parent d7214c88ad
commit 95796646b1
2 changed files with 217 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
web/src/index.css
View File

@@ -150,13 +150,38 @@ textarea {
transform: translate3d(var(--tool-stack-x, 0), var(--tool-stack-y, 0), var(--tool-stack-z, 0)) scale(var(--tool-stack-scale, 1));
transform-origin: top left;
opacity: var(--tool-stack-opacity, 1);
animation: tool-call-stack-in 360ms cubic-bezier(0.18, 0.95, 0.28, 1) both;
animation-delay: var(--tool-stack-delay, 0ms);
transition:
opacity 180ms ease,
transform 300ms cubic-bezier(0.2, 0.8, 0.22, 1);
will-change: transform, opacity;
}
.tool-call-stack-expanded-card {
animation: tool-call-inline-in 220ms ease-out both;
.tool-call-stack-shell-layout-a {
animation: tool-call-stack-height-a 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tool-call-stack-shell-layout-b {
animation: tool-call-stack-height-b 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tool-call-stack-card-layout-a {
animation: tool-call-stack-layout-a 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tool-call-stack-card-layout-b {
animation: tool-call-stack-layout-b 340ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tool-call-stack-card-surface {
transform-origin: top left;
}
.tool-call-stack-card-glass {
backdrop-filter: blur(10px);
}
.tool-call-stack-card-enter {
animation: tool-call-stack-drop-in 320ms cubic-bezier(0.18, 0.95, 0.28, 1) backwards;
animation-delay: var(--tool-stack-delay, 0ms);
}
@@ -187,33 +212,72 @@ textarea {
outline-offset: 2px;
}
@keyframes tool-call-stack-in {
@keyframes tool-call-stack-height-a {
from {
opacity: 0;
transform: translate3d(0, 0.85rem, -72px) scale(0.96) rotateX(-8deg);
height: var(--tool-stack-from-height);
}
to {
opacity: var(--tool-stack-opacity, 1);
transform: translate3d(var(--tool-stack-x, 0), var(--tool-stack-y, 0), var(--tool-stack-z, 0)) scale(var(--tool-stack-scale, 1)) rotateX(0);
height: var(--tool-stack-to-height);
}
}
@keyframes tool-call-inline-in {
@keyframes tool-call-stack-height-b {
from {
opacity: 0;
transform: translateY(-0.35rem);
height: var(--tool-stack-from-height);
}
to {
height: var(--tool-stack-to-height);
}
}
@keyframes tool-call-stack-layout-a {
from {
opacity: var(--tool-stack-from-opacity, 1);
transform: var(--tool-stack-from-transform);
}
to {
opacity: var(--tool-stack-to-opacity, 1);
transform: var(--tool-stack-to-transform);
}
}
@keyframes tool-call-stack-layout-b {
from {
opacity: var(--tool-stack-from-opacity, 1);
transform: var(--tool-stack-from-transform);
}
to {
opacity: var(--tool-stack-to-opacity, 1);
transform: var(--tool-stack-to-transform);
}
}
@keyframes tool-call-stack-drop-in {
from {
opacity: 0.72;
transform: translate3d(0, -0.65rem, 120px) scale(1.025) rotateX(3deg);
}
to {
opacity: 1;
transform: translateY(0);
transform: translate3d(0, 0, 0) scale(1) rotateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.tool-call-stack-card,
.tool-call-stack-expanded-card {
.tool-call-stack-card {
transition: none;
}
.tool-call-stack-shell-layout-a,
.tool-call-stack-shell-layout-b,
.tool-call-stack-card-layout-a,
.tool-call-stack-card-layout-b,
.tool-call-stack-card-enter {
animation: none;
}
}