starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-08-06 19:58:43 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

feat: add animated transitions and micro-interactions

Browse Source 
Add entrance animations to overlays, modals, chat messages, sidebar
session items, and approval banners:
- overlay-slide-enter: settings and project settings panels
- overlay-backdrop-enter + overlay-panel-enter: modals
- message-enter: chat message fade-up on mount
- session-item-enter: sidebar item slide-in
- banner-slide-enter: approval banner slide-down

All animations use cubic-bezier(0.16, 1, 0.3, 1) for a snappy feel
and stay under 250ms. Respects prefers-reduced-motion.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-29 17:57:05 +02:00
co-authored by Copilot
parent ea58f7d66a
commit 05dded9b37
7 changed files with 95 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/NewSessionModal.tsx
+2 -2
View File
@@ -57,8 +57,8 @@ export function NewSessionModal({
const canCreate = projectId && patternId;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07080e]/90 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
<div className="w-full max-w-md rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
<div className="overlay-backdrop-enter fixed inset-0 z-50 flex items-center justify-center bg-[#07080e]/90 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
<div className="overlay-panel-enter w-full max-w-md rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-1)] shadow-[0_16px_64px_rgba(0,0,0,0.5)]">
{/* Header */}
<div className="flex items-center justify-between border-b border-[var(--color-border)] px-5 py-4">
<h2 id="new-session-title" className="font-display text-[13px] font-semibold text-[var(--color-text-primary)]">New Session</h2>