chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: spring bounce hover animation on dashboard cards

Browse Source 
card-interactive utility now bounces on hover (translateY(-4px) with
cubic-bezier(0.34, 1.56, 0.64, 1) spring easing). Applies to stat
cards, session items, and onboarding checklist. Knowledge Base and
Team Summary inner items also bounce individually.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-22 23:03:12 +00:00
parent e41810ee01
commit 25241e5351
3 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/components/dashboard/KnowledgeBaseCards.tsx
View File

@@ -38,7 +38,10 @@ export function KnowledgeBaseCards() {
<button
key={item.label}
onClick={() => navigate(item.href)}
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
>
<item.icon size={20} style={{ color: item.color }} />
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>

5
frontend/src/components/dashboard/TeamSummary.tsx
View File

@@ -43,7 +43,10 @@ export function TeamSummary() {
<button
key={item.label}
onClick={() => navigate(item.href)}
className="flex flex-col items-center gap-2 py-5 hover:bg-[rgba(255,255,255,0.02)] transition-colors"
className="flex flex-col items-center gap-2 py-5 rounded-lg hover:bg-card-hover transition-all duration-350"
style={{ transition: 'transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms ease' }}
onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)' }}
onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)' }}
>
<item.icon size={20} style={{ color: item.color }} />
<p className="font-heading text-xl font-extrabold text-foreground">{item.value}</p>

6
frontend/src/index.css
View File

@@ -166,9 +166,13 @@
background: var(--color-bg-card);
border: 1px solid var(--color-border-default);
border-radius: 8px;
transition: border-color 200ms ease;
transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 200ms ease,
box-shadow 200ms ease;
&:hover {
transform: translateY(-4px);
border-color: var(--color-border-hover);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
}