Skip to content

Animation rework#20

Merged
AzertoxHDW merged 3 commits intomainfrom
claude/terminal-style-cards-011dt2HnscfDvU9iFB8ohvY5
Nov 20, 2025
Merged

Animation rework#20
AzertoxHDW merged 3 commits intomainfrom
claude/terminal-style-cards-011dt2HnscfDvU9iFB8ohvY5

Conversation

@AzertoxHDW
Copy link
Owner

No description provided.

Changed all flyAndScale animations across the entire website to make them more eye-catching:
- Switched easing from cubicOut to backOut for a bouncy overshoot effect
- Increased scale effect: start from 0.75-0.8 instead of 0.95-0.98
- Increased y movement: 40-60px instead of 20px for more dramatic entrance
- Extended durations to 600-700ms (from 300-500ms) to make effects more visible
- Increased stagger delays from 100ms to 150ms for better cascading effect

Updated files:
- src/lib/utils.ts - Core animation function with backOut easing
- src/routes/+page.svelte - Home page cards and terminal
- src/routes/projects/+page.svelte - Project cards
- src/routes/about/+page.svelte - About sections
- src/routes/infra/+page.svelte - Infrastructure cards
- src/routes/infra/[machineId]/+page.svelte - Machine detail page
- src/routes/museum/+page.svelte - Museum items
- src/routes/rack/+page.svelte - Rack diagram
Reduced animation durations across all pages for faster, more responsive feel:
- Default duration: 500ms → 400ms
- Header animations: 700ms → 450ms
- Card/item animations: 600ms → 400ms
- Hover animations: 400ms → 300ms
- Stagger delays: 150ms → 120ms (cards), 100ms → 80ms (museum items)

The backOut easing still provides the satisfying bounce effect, but now executes much faster for a snappier user experience.
Enhanced card hover effects across the entire website with smooth transform animations:

Terminal window cards (home page):
- Lift up 4px on hover with subtle scale (1.02x)
- Enhanced shadow with primary color glow
- Smooth 300ms transitions

Project, Infrastructure, and Museum cards:
- Lift up 1px with minimal scale (1.01x)
- Enhanced shadows on hover
- Transition from shadow-only to full transform animations

About page cards:
- Very subtle lift and scale (1.005x)
- Shadow enhancement on hover

All cards now have a polished, modern feel with consistent hover feedback that makes the UI feel more interactive and responsive.
@AzertoxHDW AzertoxHDW merged commit f6b358f into main Nov 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants