OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: UI animation enhancements across all major pages

Browse Source 
P1 - Critical UX feedback:
- Add scale-in + slide-up-in entrance animations to profile popover and notification panel
- Port SmoothedProgressBar to EcommercePage (4 generation tools: clone, detail, tryOn, productSet)
- Add result-reveal stagger animation to ecommerce result grids
- Add heart-pop spring animation to CommunityPage favorite toggle

P2 - Visual polish:
- Add scroll-entrance IntersectionObserver animations for HomePage feature sections and experience section
- Add chat-message-in entrance animation to WorkbenchPage message rows
- Fix prefers-reduced-motion accessibility in WelcomeSplash canvas (skip animation, instant entry)

P3 - CSS consolidation:
- Remove conflicting .page-motion definition from legacy-pages.css (keep translateY version from legacy-components.css)
- Consolidate skeleton-shimmer: remove opacity-pulse keyframe from primitives.css, unify with gradient sweep
- Wire up --ease-spring token for heart-pop animation
- Add :active press states (scale 0.97) to topbar buttons, brand lockup

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Stringadmin
2026-06-02 17:37:51 +08:00
parent 94080f30f7
commit 93a538d51d
13 changed files with 242 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components/primitives.css
+6 -8
View File
@@ -29,7 +29,8 @@
width: 40%;
height: 24px;
border-radius: 8px;
background: var(--surface-elevated, #222);
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
background-size: 220% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
}
@@ -42,7 +43,8 @@
flex: 1;
height: 140px;
border-radius: 14px;
background: var(--surface-elevated, #222);
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
background-size: 220% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
animation-delay: 0.15s;
}
@@ -51,16 +53,12 @@
width: 100%;
height: 200px;
border-radius: 14px;
background: var(--surface-elevated, #222);
background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.1), rgba(255,255,255,0.04));
background-size: 220% 100%;
animation: skeleton-shimmer 1.4s ease infinite;
animation-delay: 0.3s;
}
@keyframes skeleton-shimmer {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
.page-transition-wrap {
width: 100%;
height: 100%;