dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1

smooth out terminal nav drawer motion

Browse source
This commit is contained in:
dirtydishes 2026-05-23 20:05:57 -04:00
parent 7ca0e05a2d
commit d42c088432
4 changed files with 642 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/web/app/globals.css
View file

@ -19,6 +19,9 @@
--blue: oklch(0.72 0.13 247);
--blue-soft: oklch(0.72 0.13 247 / 0.11);
--drawer-width: min(320px, calc(100vw - 28px));
--drawer-enter-duration: 220ms;
--drawer-exit-duration: 180ms;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--topbar-height: 64px;
}
@ -103,6 +106,24 @@ input {
background: linear-gradient(180deg, oklch(0.16 0.012 250 / 0.98), oklch(0.13 0.011 250 / 0.98));
border-right: 1px solid var(--border);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
opacity: 0;
transform: translate3d(calc(-1 * min(22px, 6vw)), 0, 0);
transition:
transform var(--drawer-enter-duration) var(--ease-out-expo),
opacity var(--drawer-enter-duration) var(--ease-out-expo),
box-shadow var(--drawer-enter-duration) var(--ease-out-expo);
will-change: transform, opacity;
}
.terminal-nav-drawer[data-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.terminal-nav-drawer[data-state="closing"] {
transform: translate3d(calc(-1 * min(16px, 4vw)), 0, 0);
transition-duration: var(--drawer-exit-duration), var(--drawer-exit-duration), var(--drawer-exit-duration);
pointer-events: none;
}
.terminal-drawer-backdrop {
@ -112,6 +133,17 @@ input {
border: 0;
background: rgba(3, 5, 8, 0.62);
cursor: pointer;
opacity: 0;
transition: opacity var(--drawer-enter-duration) var(--ease-out-expo);
}
.terminal-drawer-backdrop[data-state="open"] {
opacity: 1;
}
.terminal-drawer-backdrop[data-state="closing"] {
transition-duration: var(--drawer-exit-duration);
pointer-events: none;
}
.terminal-drawer-head {
@ -1992,6 +2024,8 @@ h3 {
@media (prefers-reduced-motion: reduce) {
.skip-link,
.terminal-nav-drawer,
.terminal-drawer-backdrop,
.terminal-nav-link,
.terminal-filter-field::before,
.terminal-filter-field::after,