Add comprehensive library expansion with new components and demos
- Add new libraries: ui-accessibility, ui-animations, ui-backgrounds, ui-code-display, ui-data-utils, ui-font-manager, hcl-studio - Add extensive layout components: gallery-grid, infinite-scroll-container, kanban-board, masonry, split-view, sticky-layout - Add comprehensive demo components for all new features - Update project configuration and dependencies - Expand component exports and routing structure - Add UI landing pages planning document 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
142
projects/ui-animations/src/styles/animations/_emphasis.scss
Normal file
142
projects/ui-animations/src/styles/animations/_emphasis.scss
Normal file
@@ -0,0 +1,142 @@
|
||||
// Emphasis Animations
|
||||
// Attention-grabbing animations for highlighting elements
|
||||
|
||||
// Bounce
|
||||
@keyframes bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translateY(-24px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bounce {
|
||||
animation: bounce 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Shake
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Pulse
|
||||
@keyframes pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 0.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// Flash
|
||||
@keyframes flash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
|
||||
.animate-flash {
|
||||
animation: flash 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Wobble
|
||||
@keyframes wobble {
|
||||
0% { transform: translateX(0%); }
|
||||
15% { transform: translateX(-25%) rotate(-5deg); }
|
||||
30% { transform: translateX(20%) rotate(3deg); }
|
||||
45% { transform: translateX(-15%) rotate(-3deg); }
|
||||
60% { transform: translateX(10%) rotate(2deg); }
|
||||
75% { transform: translateX(-5%) rotate(-1deg); }
|
||||
100% { transform: translateX(0%); }
|
||||
}
|
||||
|
||||
.animate-wobble {
|
||||
animation: wobble 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Swing
|
||||
@keyframes swing {
|
||||
20% { transform: rotate(15deg); }
|
||||
40% { transform: rotate(-10deg); }
|
||||
60% { transform: rotate(5deg); }
|
||||
80% { transform: rotate(-5deg); }
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
.animate-swing {
|
||||
animation: swing 0.6s ease-in-out;
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
// Rubber Band
|
||||
@keyframes rubberBand {
|
||||
0% { transform: scaleX(1); }
|
||||
30% { transform: scaleX(1.25) scaleY(0.75); }
|
||||
40% { transform: scaleX(0.75) scaleY(1.25); }
|
||||
50% { transform: scaleX(1.15) scaleY(0.85); }
|
||||
65% { transform: scaleX(0.95) scaleY(1.05); }
|
||||
75% { transform: scaleX(1.05) scaleY(0.95); }
|
||||
100% { transform: scaleX(1) scaleY(1); }
|
||||
}
|
||||
|
||||
.animate-rubber-band {
|
||||
animation: rubberBand 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Tada
|
||||
@keyframes tada {
|
||||
0% { transform: scaleX(1) scaleY(1); }
|
||||
10%, 20% { transform: scaleX(0.9) scaleY(0.9) rotate(-3deg); }
|
||||
30%, 50%, 70%, 90% { transform: scaleX(1.1) scaleY(1.1) rotate(3deg); }
|
||||
40%, 60%, 80% { transform: scaleX(1.1) scaleY(1.1) rotate(-3deg); }
|
||||
100% { transform: scaleX(1) scaleY(1) rotate(0); }
|
||||
}
|
||||
|
||||
.animate-tada {
|
||||
animation: tada 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
// Heartbeat
|
||||
@keyframes heartbeat {
|
||||
0% { transform: scale(1); }
|
||||
14% { transform: scale(1.3); }
|
||||
28% { transform: scale(1); }
|
||||
42% { transform: scale(1.3); }
|
||||
70% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.animate-heartbeat {
|
||||
animation: heartbeat 0.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// Jello
|
||||
@keyframes jello {
|
||||
11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
|
||||
22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
|
||||
33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
|
||||
44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
|
||||
55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
|
||||
66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
|
||||
77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
|
||||
88.8% { transform: skewX(0.09765625deg) skewY(0.09765625deg); }
|
||||
100% { transform: skewX(0) skewY(0); }
|
||||
}
|
||||
|
||||
.animate-jello {
|
||||
animation: jello 0.6s ease-in-out;
|
||||
transform-origin: center;
|
||||
}
|
||||
151
projects/ui-animations/src/styles/animations/_entrances.scss
Normal file
151
projects/ui-animations/src/styles/animations/_entrances.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
// Entrance Animations
|
||||
// Elements appearing/entering the view
|
||||
|
||||
|
||||
// Fade In
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Fade In Up
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Fade In Down
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fadeInDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Fade In Left
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-left {
|
||||
animation: fadeInLeft 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Fade In Right
|
||||
@keyframes fadeInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(24px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-right {
|
||||
animation: fadeInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Slide In Up
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-in-up {
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Slide In Down
|
||||
@keyframes slideInDown {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-in-down {
|
||||
animation: slideInDown 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Zoom In
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-zoom-in {
|
||||
animation: zoomIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
// Scale Up
|
||||
@keyframes scaleUp {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-scale-up {
|
||||
animation: scaleUp 0.15s ease-out;
|
||||
}
|
||||
|
||||
// Rotate In
|
||||
@keyframes rotateIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: rotate(-200deg);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-rotate-in {
|
||||
animation: rotateIn 0.3s ease-out;
|
||||
}
|
||||
151
projects/ui-animations/src/styles/animations/_exits.scss
Normal file
151
projects/ui-animations/src/styles/animations/_exits.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
// Exit Animations
|
||||
// Elements disappearing/leaving the view
|
||||
|
||||
|
||||
// Fade Out
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
.animate-fade-out {
|
||||
animation: fadeOut 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Fade Out Up
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(-24px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-out-up {
|
||||
animation: fadeOutUp 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Fade Out Down
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-out-down {
|
||||
animation: fadeOutDown 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Fade Out Left
|
||||
@keyframes fadeOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(-24px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-out-left {
|
||||
animation: fadeOutLeft 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Fade Out Right
|
||||
@keyframes fadeOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(24px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-out-right {
|
||||
animation: fadeOutRight 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Slide Out Up
|
||||
@keyframes slideOutUp {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-out-up {
|
||||
animation: slideOutUp 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Slide Out Down
|
||||
@keyframes slideOutDown {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-out-down {
|
||||
animation: slideOutDown 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Zoom Out
|
||||
@keyframes zoomOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-zoom-out {
|
||||
animation: zoomOut 0.3s ease-in;
|
||||
}
|
||||
|
||||
// Scale Down
|
||||
@keyframes scaleDown {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-scale-down {
|
||||
animation: scaleDown 0.15s ease-in;
|
||||
}
|
||||
|
||||
// Rotate Out
|
||||
@keyframes rotateOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-rotate-out {
|
||||
animation: rotateOut 0.3s ease-in;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
// Base Transitions
|
||||
// Smooth transitions for common properties
|
||||
|
||||
// Transition utilities
|
||||
.transition-all {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-opacity {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-transform {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition: color, background-color, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
// Transition durations
|
||||
.transition-fast {
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
||||
.transition-normal {
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
|
||||
.transition-slow {
|
||||
transition-duration: 0.6s;
|
||||
}
|
||||
|
||||
// Transition timing functions
|
||||
.transition-linear {
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.transition-ease-in {
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
|
||||
.transition-ease-out {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.transition-ease-in-out {
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.transition-bounce {
|
||||
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
Reference in New Issue
Block a user