@salkomdesignstudio/sds-motion-forge 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +79 -0
  3. package/dist/motion.min.css +1 -0
  4. package/dist/motion.min.js +281 -0
  5. package/package.json +39 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Salkom Design Studio
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,79 @@
1
+ # SDS Motion — Premium UI Animation & Interaction Library
2
+
3
+ SDS Motion is a state-of-the-art, production-ready UI animation utility library designed for modern developers and designers. Inspired by the interaction models of Apple, Linear, Framer, and Raycast, SDS Motion provides a comprehensive ecosystem of physics-based easing systems, spatial interactions, stagger systems, and scroll choreography.
4
+
5
+ Install once, apply anywhere — raw HTML, React, Angular, Vue, or Web Components.
6
+
7
+ ---
8
+
9
+ ## 🌟 Key Features
10
+
11
+ * **Opacity Systems & Decelerations**: Discrete opacity ramps and exponential decay models.
12
+ * **Spring Physics Timing**: Dynamic, physical cubic-bezier curves for organic bounce and snap.
13
+ * **Transform Layering**: Orchestrated 3D rotations, skew, offsets, and blurs for structural depth.
14
+ * **Stagger Systems**: Parent-child staggering hierarchies driven by custom CSS properties and automatic JS indexers.
15
+ * **Cursor-Aware Spatial Interaction**: 3D perspective mouse-tilt card highlights and real-time gloss sheens.
16
+ * **Magnetic Physics**: Snappy spring attraction pulling elements towards the cursor.
17
+ * **Scroll Choreography**: High-performance scroll-driven viewport observation.
18
+ * **Custom Web Components**: Out-of-the-box native elements (`<mf-text-reveal>`, `<mf-magnetic>`, and `<mf-tilt-card>`).
19
+
20
+ ---
21
+
22
+ ## 🚀 Quick Start
23
+
24
+ ### 1. Installation
25
+
26
+ #### Via NPM
27
+ ```bash
28
+ npm install sds-motion
29
+ ```
30
+
31
+ #### Via CDN
32
+ Drop this stylesheet into your `<head>` and script at the bottom of your `<body>`:
33
+ ```html
34
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sds-motion/dist/motion.min.css" />
35
+ <script src="https://cdn.jsdelivr.net/npm/sds-motion/dist/motion.min.js" defer></script>
36
+ ```
37
+
38
+ ---
39
+
40
+ ## 🛠️ Usage Snippets
41
+
42
+ ### A. Raw HTML & Utilities
43
+ Combine animation classes directly with speed, delay, and easing modifiers:
44
+ ```html
45
+ <!-- Entrance fade-up with spring physics, slow speed, and a delay tier -->
46
+ <h1 class="sds-fade-up sds-slow sds-delay-2 sds-spring">
47
+ Welcome to the Future
48
+ </h1>
49
+ ```
50
+
51
+ ### B. Parent-Child Staggering
52
+ Wrap list items or grids in a stagger parent; the engine automatically sequences their reveals:
53
+ ```html
54
+ <ul class="sds-stagger">
55
+ <li class="sds-scroll-fade-up">First Item</li>
56
+ <li class="sds-scroll-fade-up">Second Item</li>
57
+ <li class="sds-scroll-fade-up">Third Item</li>
58
+ </ul>
59
+ ```
60
+
61
+ ### C. Web Components (Native)
62
+ Run premium interactions natively using custom HTML tags bundled inside `motion.min.js`:
63
+ ```html
64
+ <!-- Automatic staggered character reveal -->
65
+ <mf-text-reveal effect="fade-up" speed="slow" delay="100">
66
+ Hello World
67
+ </mf-text-reveal>
68
+
69
+ <!-- Spring physics magnetic button wrapper -->
70
+ <mf-magnetic range="40" spring="0.15">
71
+ <button class="my-button">Hover Me</button>
72
+ </mf-magnetic>
73
+ ```
74
+
75
+ ---
76
+
77
+ ## 📄 License
78
+
79
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
package/dist/motion.min.css ADDED
@@ -0,0 +1 @@
1
+ :root{--sds-primary:#0014D1;--sds-primary-rgb:0,20,209;--sds-primary-dark:#000EA0;--sds-accent:#4d5fff;--sds-accent-rgb:77,95,255;--sds-accent2:#7c87ff;--sds-green:#00d97e;--sds-green-rgb:0,217,126;--ease-spring:cubic-bezier(0.25,1.15,0.45,1);--ease-smooth:cubic-bezier(0.16,1,0.3,1);--ease-reveal:cubic-bezier(0.85,0,0.15,1);--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);--ease-out:cubic-bezier(0.0,0.0,0.2,1);--sds-op-0:0;--sds-op-low:0.15;--sds-op-mid:0.5;--sds-op-high:0.85;--sds-op-100:1;--sds-duration:0.6s;--sds-delay:0s;--sds-easing:var(--ease-smooth)}.sds-slow{--sds-duration:1.2s !important}.sds-normal{--sds-duration:0.6s !important}.sds-fast{--sds-duration:0.3s !important}.sds-instant{--sds-duration:0.05s !important}.sds-delay-1{--sds-delay:0.1s !important}.sds-delay-2{--sds-delay:0.2s !important}.sds-delay-3{--sds-delay:0.3s !important}.sds-delay-4{--sds-delay:0.4s !important}.sds-delay-5{--sds-delay:0.5s !important}.sds-spring{--sds-easing:var(--ease-spring) !important}.sds-smooth{--sds-easing:var(--ease-smooth) !important}.sds-reveal{--sds-easing:var(--ease-reveal) !important}.sds-bounce{--sds-easing:var(--ease-bounce) !important}.sds-infinite{animation-iteration-count:infinite !important}.sds-alternate{animation-direction:alternate !important}.sds-once{animation-iteration-count:1 !important;animation-fill-mode:both !important}.sds-stagger{--sds-stagger-gap:80ms}mf-text-reveal,mf-magnetic,mf-tilt-card{display:inline-block}.sds-fade-up{animation:sdsFadeUp var(--sds-duration,0.65s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-fade-down{animation:sdsFadeDown var(--sds-duration,0.65s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-fade-left{animation:sdsFadeLeft var(--sds-duration,0.65s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-fade-right{animation:sdsFadeRight var(--sds-duration,0.65s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-blur-in{animation:sdsBlurIn var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-soft-blur-in{animation:sdsSoftBlurIn var(--sds-duration,0.75s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-focus-blur-resolve{animation:sdsFocusBlurResolve var(--sds-duration,0.85s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-blur-out-up{animation:sdsBlurOutUp var(--sds-duration,0.55s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-stamp-in{animation:sdsStampIn var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-bounce-in{animation:sdsBounceIn var(--sds-duration,0.75s) var(--ease-bounce) var(--sds-delay,0s) both}.sds-spring-scale-in{animation:sdsSpringScaleIn var(--sds-duration,0.72s) var(--ease-spring) var(--sds-delay,0s) both}.sds-jello{display:inline-block;animation:sdsJello var(--sds-duration,0.75s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-skew-in{animation:sdsSkewIn var(--sds-duration,0.65s) var(--ease-spring) var(--sds-delay,0s) both}.sds-rotate-3d{animation:sdsRotate3d var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both;transform-origin:center bottom}.sds-zoom-blur{animation:sdsZoomBlur var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-flip-y{animation:sdsFlipY var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both;backface-visibility:hidden;transform-style:preserve-3d;transform-origin:center center}.sds-scale-down-fade{animation:sdsScaleDownFade var(--sds-duration,0.62s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-shared-axis-y{animation:sdsSharedAxisY var(--sds-duration,0.62s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-shared-axis-z{animation:sdsSharedAxisZ var(--sds-duration,0.66s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-micro-scale-fade{animation:sdsMicroScaleFade var(--sds-duration,0.52s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-fade-through{animation:sdsFadeThrough var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-short-slide-right{animation:sdsShortSlideRight var(--sds-duration,0.55s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-short-slide-down{animation:sdsShortSlideDown var(--sds-duration,0.55s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-split-reveal{animation:sdsSplitReveal var(--sds-duration,0.65s) var(--ease-reveal) var(--sds-delay,0s) both}.sds-mask-reveal-up{display:inline-block;overflow:hidden;vertical-align:bottom;animation:sdsMaskRevealUp var(--sds-duration,0.65s) var(--ease-reveal) var(--sds-delay,0s) both}.sds-slide-up-reveal{display:block;overflow:hidden}.sds-slide-up-reveal > *{display:block;animation:sdsSlideUpReveal var(--sds-duration,0.65s) var(--ease-reveal) var(--sds-delay,0s) both}.sds-per-character-rise{display:inline-flex;flex-wrap:wrap;gap:0;vertical-align:bottom}.sds-per-character-rise .sds-char{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.2}.sds-per-character-rise .sds-char::after{content:attr(data-char);display:block;animation:sdsPerCharRise var(--sds-duration,0.6s) var(--ease-smooth) calc(var(--sds-delay,0s) + var(--sds-char-index,0) * 38ms) both}.sds-per-word-crossfade{display:inline-flex;flex-wrap:wrap;gap:0.3em}.sds-per-word-crossfade .sds-word:nth-child(odd){animation:sdsPerWordFromRight var(--sds-duration,0.6s) var(--ease-smooth) calc(var(--sds-delay,0s) + var(--sds-word-index,0) * 75ms) both}.sds-per-word-crossfade .sds-word:nth-child(even){animation:sdsPerWordFromLeft var(--sds-duration,0.6s) var(--ease-smooth) calc(var(--sds-delay,0s) + var(--sds-word-index,0) * 75ms) both}.sds-bottom-up-letters{display:inline-flex;flex-wrap:wrap;vertical-align:bottom}.sds-bottom-up-letters .sds-char{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.2}.sds-bottom-up-letters .sds-char::after{content:attr(data-char);display:block;animation:sdsBottomUpChar var(--sds-duration,0.6s) var(--ease-smooth) calc(var(--sds-delay,0s) + var(--sds-char-index,0) * 38ms) both}.sds-top-down-letters{display:inline-flex;flex-wrap:wrap;vertical-align:bottom}.sds-top-down-letters .sds-char{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.2}.sds-top-down-letters .sds-char::after{content:attr(data-char);display:block;animation:sdsTopDownChar var(--sds-duration,0.6s) var(--ease-smooth) calc(var(--sds-delay,0s) + var(--sds-char-index,0) * 38ms) both}.sds-kinetic-center-build{display:inline-flex;flex-wrap:wrap;vertical-align:bottom}.sds-kinetic-center-build .sds-char{display:inline-block;animation:sdsKineticCenter var(--sds-duration,0.65s) var(--ease-spring) calc(var(--sds-delay,0s) + var(--sds-char-index,0) * 45ms) both}.sds-line-by-line-slide{overflow:hidden}.sds-line-by-line-slide > *{display:block;animation:sdsLineSlide var(--sds-duration,0.6s) var(--ease-smooth) both}.sds-line-by-line-slide > *:nth-child(1){animation-delay:calc(var(--sds-delay,0s) + 0ms)}.sds-line-by-line-slide > *:nth-child(2){animation-delay:calc(var(--sds-delay,0s) + 110ms)}.sds-line-by-line-slide > *:nth-child(3){animation-delay:calc(var(--sds-delay,0s) + 220ms)}.sds-line-by-line-slide > *:nth-child(4){animation-delay:calc(var(--sds-delay,0s) + 330ms)}.sds-line-by-line-slide > *:nth-child(5){animation-delay:calc(var(--sds-delay,0s) + 440ms)}.sds-typewriter{display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;border-right:2px solid currentColor;animation:sdsTypewriter var(--sds-duration,0.8s) steps(20,end) var(--sds-delay,0s) both,sdsBlink 0.75s step-end var(--sds-delay,0s) infinite}.sds-glitch{animation:sdsGlitch var(--sds-duration,2s) steps(1) var(--sds-delay,0s) infinite}.sds-color-cycle{animation:sdsColorCycle 3.5s var(--ease-smooth) var(--sds-delay,0s) infinite}.sds-neon-pulse{animation:sdsNeonPulse 2.8s var(--ease-smooth) var(--sds-delay,0s) infinite}.sds-shadow-trail{animation:sdsShadowTrail 3.5s var(--ease-smooth) var(--sds-delay,0s) infinite alternate}.sds-flicker{animation:sdsFlicker 2.4s linear var(--sds-delay,0s) infinite}.sds-shimmer-sweep{background:linear-gradient( 90deg,var(--sds-primary) 0%,var(--sds-accent2) 40%,#d0d4ff 50%,var(--sds-accent2) 60%,var(--sds-primary) 100% );background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:sdsShimmerSweep 3s linear var(--sds-delay,0s) infinite}.sds-gradient-text{background:linear-gradient( 90deg,var(--sds-accent),var(--sds-green),var(--sds-accent2),var(--sds-accent) );background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:sdsGradientShift 4.5s linear var(--sds-delay,0s) infinite}.sds-scramble{animation:sdsScramble var(--sds-duration,0.8s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-letter-spacing{animation:sdsLetterSpacing var(--sds-duration,0.7s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-highlight{background:linear-gradient( to right,rgba(0,20,209,0.15),rgba(0,20,209,0.15) ) no-repeat left bottom;background-size:0% 32%;padding-bottom:2px;animation:sdsHighlight var(--sds-duration,0.65s) var(--ease-reveal) var(--sds-delay,0s) both}.sds-shadow-pop{animation:sdsShadowPop var(--sds-duration,0.55s) var(--ease-smooth) var(--sds-delay,0s) both}.sds-char{display:inline-block}.sds-word{display:inline-block}@keyframes sdsFadeUp{from{opacity:0;transform:translateY(14px)}65%{opacity:0.92}to{opacity:1;transform:translateY(0)}}@keyframes sdsFadeDown{from{opacity:0;transform:translateY(-14px)}65%{opacity:0.92}to{opacity:1;transform:translateY(0)}}@keyframes sdsFadeLeft{from{opacity:0;transform:translateX(14px)}65%{opacity:0.92}to{opacity:1;transform:translateX(0)}}@keyframes sdsFadeRight{from{opacity:0;transform:translateX(-14px)}65%{opacity:0.92}to{opacity:1;transform:translateX(0)}}@keyframes sdsBlurIn{from{opacity:0;filter:blur(10px);transform:scale(0.97)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes sdsSoftBlurIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}@keyframes sdsFocusBlurResolve{from{filter:blur(14px);letter-spacing:8px;opacity:0}to{filter:blur(0);letter-spacing:normal;opacity:1}}@keyframes sdsBlurOutUp{from{transform:translateY(0);filter:blur(0);opacity:1}to{transform:translateY(-16px);filter:blur(6px);opacity:0}}@keyframes sdsStampIn{0%{transform:scale(2.5) rotate(-1deg);opacity:0;filter:blur(8px)}50%{transform:scale(0.94) rotate(0.3deg);opacity:1;filter:blur(0)}68%{transform:scale(1.04)}84%{transform:scale(0.98)}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes sdsBounceIn{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.05);opacity:0.8}70%{transform:scale(0.9);opacity:0.9}90%{transform:scale(1.01);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes sdsSpringScaleIn{0%{transform:scale(0.7);opacity:0}38%{transform:scale(1.06);opacity:0.96}62%{transform:scale(0.985)}80%{transform:scale(1.01)}100%{transform:scale(1);opacity:1}}@keyframes sdsJello{0%,100%{transform:scale3d(1,1,1)}22%{transform:scale3d(1.14,0.86,1)}38%{transform:scale3d(0.88,1.12,1)}55%{transform:scale3d(1.06,0.94,1)}72%{transform:scale3d(0.97,1.03,1)}88%{transform:scale3d(1.01,0.99,1)}}@keyframes sdsSkewIn{from{transform:skewX(-18deg) translateX(-24px);opacity:0}to{transform:skewX(0) translateX(0);opacity:1}}@keyframes sdsRotate3d{from{transform:perspective(800px) rotateX(55deg);opacity:0}to{transform:perspective(800px) rotateX(0);opacity:1}}@keyframes sdsZoomBlur{from{transform:scale(1.25);filter:blur(12px);opacity:0}to{transform:scale(1);filter:blur(0);opacity:1}}@keyframes sdsFlipY{0%{transform:perspective(1100px) rotateY(-78deg) translateZ(20px) scale(0.94);opacity:0}58%{transform:perspective(1100px) rotateY(9deg) translateZ(0) scale(1.01);opacity:0.82}78%{transform:perspective(1100px) rotateY(-3deg) scale(0.998);opacity:0.94}100%{transform:perspective(1100px) rotateY(0deg) translateZ(0) scale(1);opacity:1}}@keyframes sdsScaleDownFade{from{transform:scale(1.065);opacity:0}70%{opacity:0.94}to{transform:scale(1);opacity:1}}@keyframes sdsSharedAxisY{from{transform:translateY(18px) scale(0.96);opacity:0}60%{opacity:0.88}to{transform:translateY(0) scale(1);opacity:1}}@keyframes sdsSharedAxisZ{from{transform:scale(0.9);opacity:0;filter:blur(4px)}62%{opacity:0.9}to{transform:scale(1);opacity:1;filter:blur(0)}}@keyframes sdsMicroScaleFade{from{transform:scale(0.96);opacity:0.2}to{transform:scale(1);opacity:1}}@keyframes sdsFadeThrough{0%{opacity:0;transform:scale(0.97) translateY(5px)}40%{opacity:0.08}100%{opacity:1;transform:scale(1) translateY(0)}}@keyframes sdsShortSlideRight{from{transform:translateX(-12px);opacity:0}72%{opacity:0.92}to{transform:translateX(0);opacity:1}}@keyframes sdsShortSlideDown{from{transform:translateY(-12px);opacity:0}72%{opacity:0.92}to{transform:translateY(0);opacity:1}}@keyframes sdsSplitReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}@keyframes sdsMaskRevealUp{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}@keyframes sdsSlideUpReveal{from{transform:translateY(105%)}to{transform:translateY(0)}}@keyframes sdsPerCharRise{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes sdsPerWordFromRight{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}@keyframes sdsPerWordFromLeft{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}@keyframes sdsBottomUpChar{from{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes sdsTopDownChar{from{transform:translateY(-110%)}to{transform:translateY(0)}}@keyframes sdsKineticCenter{from{transform:scale(0.3) skewX(16deg);opacity:0;filter:blur(4px)}to{transform:scale(1) skewX(0);opacity:1;filter:blur(0)}}@keyframes sdsLineSlide{from{transform:translateY(22px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes sdsTypewriter{from{width:0}to{width:100%}}@keyframes sdsBlink{0%,100%{border-color:currentColor}50%{border-color:transparent}}@keyframes sdsGlitch{0%,88%,100%{transform:translate(0,0);text-shadow:none;filter:none}90%{transform:translate(-1.5px,0);text-shadow:1.5px 0 var(--sds-accent);filter:hue-rotate(8deg)}92%{transform:translate(1.5px,0);text-shadow:-1.5px 0 rgba(220,60,60,0.55);filter:hue-rotate(-8deg)}94%{transform:translate(-1px,0.5px);text-shadow:1px 0 var(--sds-accent2);filter:none}96%{transform:translate(1px,-0.5px);text-shadow:none}98%{transform:translate(0,0);text-shadow:none}}@keyframes sdsScramble{0%{filter:blur(4px);letter-spacing:5px;opacity:0}55%{opacity:0.65;filter:blur(1.5px);letter-spacing:2px}100%{filter:blur(0);letter-spacing:normal;opacity:1}}@keyframes sdsColorCycle{0%{color:inherit}33%{color:var(--sds-accent2)}66%{color:var(--sds-green)}100%{color:inherit}}@keyframes sdsNeonPulse{0%,100%{text-shadow:0 0 4px rgba(77,95,255,0.1),0 0 8px rgba(77,95,255,0.05)}50%{text-shadow:0 0 10px rgba(77,95,255,0.25),0 0 20px rgba(77,95,255,0.1),0 0 40px rgba(77,95,255,0.04)}}@keyframes sdsShadowTrail{0%{text-shadow:-2px 0 rgba(0,20,209,0.45),2px 0 rgba(124,135,255,0.45)}100%{text-shadow:-3px 0 rgba(0,20,209,0.35),3px 0 rgba(0,217,126,0.35)}}@keyframes sdsFlicker{0%,17%,21%,24%,51%,55%,100%{opacity:1}19%,23%,53%{opacity:0.2}}@keyframes sdsShimmerSweep{0%{background-position:-200% center}100%{background-position:200% center}}@keyframes sdsGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes sdsLetterSpacing{from{letter-spacing:8px;opacity:0}to{letter-spacing:normal;opacity:1}}@keyframes sdsHighlight{from{background-size:0% 32%}to{background-size:100% 32%}}@keyframes sdsShadowPop{from{text-shadow:none;transform:translate(0,0);opacity:0}to{text-shadow:3px 3px 0 var(--sds-primary);transform:translate(0,0);opacity:1}}.sds-btn-shimmer{position:relative;overflow:hidden;transition:box-shadow var(--sds-duration) var(--sds-easing)}.sds-btn-shimmer::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);transform:skewX(-20deg);transition:left 0.7s var(--ease-smooth)}.sds-btn-shimmer:hover::after{left:140%}.sds-btn-glow{animation:sdsGlowPulse 2.8s var(--ease-smooth) var(--sds-delay) infinite}.sds-btn-pulse-ring{position:relative}.sds-btn-pulse-ring::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(var(--sds-primary-rgb),0.35);animation:sdsPulseRing 2.2s var(--ease-smooth) infinite}.sds-btn-bounce{animation:sdsBounceBtn 2.4s var(--ease-smooth) var(--sds-delay) infinite alternate}.sds-btn-morph{border-radius:8px;transition:border-radius 0.5s var(--ease-spring),box-shadow 0.4s var(--ease-smooth)}.sds-btn-morph:hover{border-radius:9999px;box-shadow:0 4px 20px rgba(var(--sds-primary-rgb),0.2)}.sds-btn-neon{border:1px solid rgba(var(--sds-accent-rgb),0.35);background:transparent;color:var(--sds-accent2);transition:border-color 0.4s var(--ease-smooth),box-shadow 0.4s var(--ease-smooth),background 0.4s var(--ease-smooth),color 0.4s var(--ease-smooth)}.sds-btn-neon:hover,.sds-btn-neon:focus-visible{border-color:var(--sds-accent);box-shadow:0 0 0 3px rgba(var(--sds-accent-rgb),0.12),0 0 12px rgba(var(--sds-accent-rgb),0.12);background:rgba(var(--sds-accent-rgb),0.06);color:var(--sds-accent);outline:none}.sds-btn-gradient{background:linear-gradient(90deg,var(--sds-primary),var(--sds-accent),var(--sds-primary));background-size:250% auto;animation:sdsShimmer 3.5s linear infinite}.sds-btn-shake{animation:sdsShake var(--sds-duration) var(--ease-smooth) var(--sds-delay) both}.sds-btn-float{transition:transform 0.35s var(--ease-spring),box-shadow 0.35s var(--ease-smooth)}.sds-btn-float:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.06)}.sds-btn-glow-bg{animation:sdsButtonGlow 3s var(--ease-smooth) var(--sds-delay) infinite alternate}.sds-btn-stretch:active{animation:sdsStretchPress 0.35s var(--ease-smooth) both}.sds-btn-border-draw{border:1px solid transparent;background-image:linear-gradient(white,white),linear-gradient(135deg,var(--sds-accent),var(--sds-primary));background-origin:border-box;background-clip:padding-box,border-box;transition:box-shadow 0.35s var(--ease-smooth)}.sds-btn-border-draw:hover{box-shadow:0 0 0 3px rgba(var(--sds-accent-rgb),0.12)}.sds-btn-rubber:hover{animation:sdsRubber 0.6s var(--ease-spring) both}.sds-btn-tilt{transform-style:preserve-3d;perspective:400px;transition:transform 0.12s var(--ease-smooth)}.sds-btn-icon-slide .sds-icon{display:inline-block;transition:transform 0.3s var(--ease-spring)}.sds-btn-icon-slide:hover .sds-icon{transform:translateX(4px)}.sds-btn-confetti:active{animation:sdsConfettiExplode 0.4s var(--ease-spring) both}.sds-btn-heartbeat{animation:sdsHeartbeat 2s var(--ease-smooth) infinite}.sds-btn-underline{position:relative}.sds-btn-underline::after{content:'';position:absolute;bottom:0;left:0;width:0%;height:1.5px;background:currentColor;opacity:0.6;transition:width 0.35s var(--ease-reveal)}.sds-btn-underline:hover::after{width:100%}.sds-btn-swipe{position:relative;overflow:hidden;z-index:1}.sds-btn-swipe::before{content:'';position:absolute;top:0;left:0;width:0%;height:100%;background:var(--sds-primary);transition:width 0.4s var(--ease-reveal);z-index:-1}.sds-btn-swipe:hover::before{width:100%}.sds-btn-depth{transform:translateY(-2px);box-shadow:0 3px 0 var(--sds-primary-dark);transition:transform 0.12s var(--ease-smooth),box-shadow 0.12s var(--ease-smooth)}.sds-btn-depth:active{transform:translateY(1px);box-shadow:0 0px 0 var(--sds-primary-dark)}@keyframes sdsShimmer{0%{background-position:0% center}100%{background-position:250% center}}@keyframes sdsGlowPulse{0%,100%{box-shadow:0 0 0 1px rgba(var(--sds-primary-rgb),0.15),0 4px 12px rgba(var(--sds-primary-rgb),0.1)}50%{box-shadow:0 0 0 3px rgba(var(--sds-primary-rgb),0.12),0 8px 24px rgba(var(--sds-primary-rgb),0.18)}}@keyframes sdsPulseRing{0%{box-shadow:0 0 0 0 rgba(var(--sds-primary-rgb),0.35)}70%{box-shadow:0 0 0 10px rgba(var(--sds-primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--sds-primary-rgb),0)}}@keyframes sdsBounceBtn{from{transform:translateY(0)}to{transform:translateY(-3px)}}@keyframes sdsShake{0%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(4px)}45%{transform:translateX(-3px)}60%{transform:translateX(2px)}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}@keyframes sdsButtonGlow{0%{background:var(--sds-primary);box-shadow:0 2px 10px rgba(var(--sds-primary-rgb),0.2)}100%{background:var(--sds-accent);box-shadow:0 4px 20px rgba(var(--sds-accent-rgb),0.25)}}@keyframes sdsStretchPress{0%{transform:scaleX(1) scaleY(1)}30%{transform:scaleX(0.94) scaleY(1.06)}65%{transform:scaleX(1.04) scaleY(0.96)}100%{transform:scaleX(1) scaleY(1)}}@keyframes sdsRubber{0%{transform:scale3d(1,1,1)}25%{transform:scale3d(1.12,0.88,1)}45%{transform:scale3d(0.92,1.08,1)}65%{transform:scale3d(1.05,0.95,1)}80%{transform:scale3d(0.98,1.02,1)}100%{transform:scale3d(1,1,1)}}@keyframes sdsConfettiExplode{0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)}}@keyframes sdsHeartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.02)}24%{transform:scale(1)}36%{transform:scale(1.015)}60%{transform:scale(1)}}.sds-input-focus-glow{transition:border-color 0.25s var(--ease-smooth),box-shadow 0.25s var(--ease-smooth)}.sds-input-focus-glow:focus{border-color:var(--sds-accent) !important;box-shadow:0 0 0 3px rgba(var(--sds-accent-rgb),0.14) !important;outline:none}.sds-input-border{border:1px solid transparent;transition:border-color 0.25s var(--ease-smooth)}.sds-input-border:focus{border-color:var(--sds-primary) !important;outline:none}.sds-input-slide-in{animation:sdsInputSlideIn var(--sds-duration) var(--ease-smooth) var(--sds-delay) both}.sds-input-glow-blue{animation:sdsInputGlowBlue 2.8s var(--ease-smooth) infinite}.sds-input-shake{animation:sdsInputShake 0.45s var(--ease-smooth) both}.sds-input-success:focus:valid{border-color:var(--sds-green) !important;box-shadow:0 0 0 3px rgba(var(--sds-green-rgb),0.14) !important;transition:border-color 0.25s var(--ease-smooth),box-shadow 0.25s var(--ease-smooth)}.sds-input-placeholder-pulse::placeholder{animation:sdsPlaceholderPulse 2s var(--ease-smooth) infinite alternate}.sds-input-rounded-expand{transition:border-radius 0.3s var(--ease-spring),border-color 0.25s var(--ease-smooth),box-shadow 0.25s var(--ease-smooth)}.sds-input-rounded-expand:focus{border-radius:12px !important;border-color:var(--sds-accent) !important;box-shadow:0 0 0 3px rgba(var(--sds-accent-rgb),0.1) !important;outline:none}.sds-input-neo{box-shadow:2px 2px 0 var(--sds-primary);transition:box-shadow 0.15s var(--ease-smooth),transform 0.15s var(--ease-smooth)}.sds-input-neo:focus{box-shadow:4px 4px 0 var(--sds-primary);transform:translate(-2px,-2px);outline:none}.sds-input-reveal{animation:sdsInputReveal var(--sds-duration) var(--ease-reveal) var(--sds-delay) both}.sds-input-glow-green{border-color:var(--sds-green) !important;box-shadow:0 0 0 3px rgba(var(--sds-green-rgb),0.12) !important;transition:border-color 0.25s,box-shadow 0.25s}.sds-input-bounce{transition:box-shadow 0.3s var(--ease-spring),border-color 0.25s var(--ease-smooth)}.sds-input-bounce:focus{border-color:var(--sds-accent) !important;box-shadow:0 0 0 4px rgba(var(--sds-accent-rgb),0.12) !important;outline:none}.sds-input-accent-left{transition:border-left-width 0.2s var(--ease-spring),border-left-color 0.2s var(--ease-smooth)}.sds-input-accent-left:focus{border-left-width:3px !important;border-left-color:var(--sds-primary) !important;outline:none}.sds-input-frosted{backdrop-filter:blur(8px);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);transition:background 0.25s var(--ease-smooth),border-color 0.25s var(--ease-smooth)}.sds-input-frosted:focus{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22);outline:none}.sds-input-flat-underline{border:none !important;border-bottom:2px solid rgba(var(--sds-primary-rgb),0.3) !important;background:transparent !important;transition:border-bottom-color 0.25s var(--ease-smooth)}.sds-input-flat-underline:focus{border-bottom-color:var(--sds-primary) !important;outline:none}.sds-input-warning{border-color:#f5a623 !important;background:rgba(245,166,35,0.04) !important;box-shadow:0 0 0 3px rgba(245,166,35,0.1) !important}.sds-input-textarea-glow{transition:box-shadow 0.3s var(--ease-smooth),border-color 0.3s var(--ease-smooth)}.sds-input-textarea-glow:focus{box-shadow:0 0 0 3px rgba(var(--sds-primary-rgb),0.12) !important;border-color:var(--sds-accent) !important;outline:none}@keyframes sdsInputSlideIn{from{transform:translateX(-12px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes sdsInputGlowBlue{0%,100%{box-shadow:0 0 0 1px rgba(var(--sds-primary-rgb),0.25)}50%{box-shadow:0 0 0 3px rgba(var(--sds-primary-rgb),0.1)}}@keyframes sdsInputShake{0%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(4px)}45%{transform:translateX(-3px)}60%{transform:translateX(2px)}80%{transform:translateX(-1px)}100%{transform:translateX(0)}}@keyframes sdsPlaceholderPulse{from{opacity:0.75}to{opacity:0.35}}@keyframes sdsInputReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}.sds-card-slide-up{animation:sdsCardSlideUp var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-flip{animation:sdsCardFlip var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-reveal{animation:sdsCardReveal var(--sds-duration) var(--ease-reveal) var(--sds-delay) both}.sds-card-pop{animation:sdsCardPop var(--sds-duration) var(--ease-spring) var(--sds-delay) both}.sds-card-shadow-pop{animation:sdsCardShadowPop var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-slide-left{animation:sdsCardSlideLeft var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-slide-right{animation:sdsCardSlideRight var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-rotate-in{animation:sdsCardRotateIn var(--sds-duration) var(--ease-smooth) var(--sds-delay) both}.sds-card-blur-in{animation:sdsCardBlurIn var(--sds-duration) var(--ease-smooth) var(--sds-delay) both}.sds-card-unfold{animation:sdsCardUnfold var(--sds-duration) var(--ease-reveal) var(--sds-delay) both}.sds-card-wipe{animation:sdsCardWipe var(--sds-duration) var(--ease-reveal) var(--sds-delay) both}.sds-card-bounce-in{animation:sdsCardBounceIn var(--sds-duration) var(--ease-spring) var(--sds-delay) both}.sds-card-depth-in{animation:sdsCardDepthIn var(--sds-duration) var(--ease-smooth) var(--sds-delay) both}.sds-card-slide-down{animation:sdsCardSlideDown var(--sds-duration) var(--sds-easing) var(--sds-delay) both}.sds-card-tilt{animation:sdsCardTilt 5s var(--ease-smooth) var(--sds-delay) infinite alternate}.sds-card-glow-border{animation:sdsCardGlow 3s var(--ease-smooth) var(--sds-delay) infinite}.sds-card-border-light{animation:sdsCardBorderLight 3.5s var(--ease-smooth) var(--sds-delay) infinite}.sds-card-shimmer{background:linear-gradient(90deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.08) 50%,rgba(0,0,0,0.04) 100%);background-size:200% 100%;animation:sdsCardShimmer 1.8s linear infinite}.sds-card-float{animation:sdsCardFloat 4.5s ease-in-out var(--sds-delay) infinite}.sds-card-morph{border-radius:12px;transition:border-radius 0.5s var(--ease-spring),box-shadow 0.4s var(--ease-smooth)}.sds-card-morph:hover{border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,0.08)}.sds-card-neon{animation:sdsCardElevate 3.5s var(--ease-smooth) var(--sds-delay) infinite}.sds-card-press{animation:sdsCardPress 3s var(--ease-smooth) var(--sds-delay) infinite}.sds-card-glitch{animation:sdsCardGlitch 0.5s var(--ease-spring) var(--sds-delay) both}.sds-card-gradient{background:linear-gradient(135deg,var(--sds-primary),var(--sds-accent),var(--sds-primary));background-size:300% 300%;animation:sdsCardGradShift 5s ease infinite}.sds-card-scale{animation:sdsCardScale 4s var(--ease-smooth) var(--sds-delay) infinite alternate}.sds-tilt-3d{position:relative;transform-style:preserve-3d;perspective:1000px;transform:perspective(1000px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg));transition:transform 0.12s var(--ease-smooth)}.sds-tilt-3d-child{transform:translateZ(20px)}.sds-spotlight{position:relative;overflow:hidden}.sds-spotlight::before{content:'';position:absolute;inset:0;background:radial-gradient(350px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,0.07),transparent 80%);pointer-events:none;z-index:3;opacity:0;transition:opacity 0.3s var(--ease-smooth)}.sds-spotlight:hover::before{opacity:1}@keyframes sdsCardSlideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes sdsCardFlip{from{transform:perspective(600px) rotateY(75deg);opacity:0}to{transform:perspective(600px) rotateY(0);opacity:1}}@keyframes sdsCardTilt{0%,100%{transform:perspective(500px) rotateX(0) rotateY(0)}25%{transform:perspective(500px) rotateX(2deg) rotateY(2deg)}75%{transform:perspective(500px) rotateX(-2deg) rotateY(-2deg)}}@keyframes sdsCardGlow{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.06)}50%{box-shadow:0 6px 24px rgba(var(--sds-primary-rgb),0.14)}}@keyframes sdsCardReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0% 0)}}@keyframes sdsCardPop{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}@keyframes sdsCardBorderLight{0%,100%{border-color:rgba(var(--sds-accent-rgb),0.08)}50%{border-color:rgba(var(--sds-accent-rgb),0.3)}}@keyframes sdsCardShadowPop{from{box-shadow:0 0 0 rgba(0,0,0,0)}to{box-shadow:5px 5px 0 var(--sds-primary)}}@keyframes sdsCardSlideLeft{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes sdsCardSlideRight{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes sdsCardRotateIn{from{transform:rotate(-4deg) scale(0.96);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}@keyframes sdsCardBlurIn{from{filter:blur(8px);opacity:0}to{filter:blur(0);opacity:1}}@keyframes sdsCardShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes sdsCardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes sdsCardElevate{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,0.05)}50%{box-shadow:0 8px 24px rgba(0,0,0,0.1)}}@keyframes sdsCardPress{0%,100%{transform:scale(1);box-shadow:0 4px 16px rgba(0,0,0,0.08)}50%{transform:scale(0.98);box-shadow:0 2px 8px rgba(0,0,0,0.06)}}@keyframes sdsCardUnfold{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1)}}@keyframes sdsCardGlitch{0%{transform:scale(0.97) translateY(4px);opacity:0;filter:blur(2px)}100%{transform:scale(1) translateY(0);opacity:1;filter:blur(0)}}@keyframes sdsCardWipe{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}@keyframes sdsCardBounceIn{from{transform:scale(0.88);opacity:0}to{transform:scale(1);opacity:1}}@keyframes sdsCardDepthIn{from{transform:perspective(600px) translateZ(-40px);opacity:0}to{transform:perspective(600px) translateZ(0);opacity:1}}@keyframes sdsCardGradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes sdsCardScale{0%{transform:scale(1)}100%{transform:scale(1.02)}}@keyframes sdsCardSlideDown{from{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}.sds-loader-spin{display:inline-block;animation:sdsSpin 0.9s linear infinite}.sds-loader-dots{display:inline-flex;gap:6px;align-items:center}.sds-loader-dots > *{width:7px;height:7px;border-radius:50%;background:var(--sds-primary);animation:sdsBounceDots 1.4s var(--ease-smooth) infinite}.sds-loader-dots > *:nth-child(2){animation-delay:0.18s}.sds-loader-dots > *:nth-child(3){animation-delay:0.36s}.sds-loader-pulse-dots{display:inline-flex;gap:8px;align-items:center}.sds-loader-pulse-dots > *{width:9px;height:9px;border-radius:50%;background:var(--sds-primary);animation:sdsDotPulse 1.4s var(--ease-smooth) infinite}.sds-loader-pulse-dots > *:nth-child(2){animation-delay:0.2s}.sds-loader-pulse-dots > *:nth-child(3){animation-delay:0.4s}.sds-loader-bars{display:inline-flex;align-items:flex-end;gap:4px;height:28px}.sds-loader-bars > *{width:4px;height:24px;background:var(--sds-primary);border-radius:2px;transform-origin:bottom;animation:sdsBarGrow 1.2s var(--ease-smooth) infinite}.sds-loader-bars > *:nth-child(2){animation-delay:0.12s}.sds-loader-bars > *:nth-child(3){animation-delay:0.24s}.sds-loader-bars > *:nth-child(4){animation-delay:0.18s}.sds-loader-bars > *:nth-child(5){animation-delay:0.06s}.sds-loader-skeleton{width:100%;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.08) 50%,rgba(0,0,0,0.04) 100%);background-size:200% 100%;animation:sdsSkeleton 1.8s linear infinite}.sds-loader-progress{width:100%;height:4px;background:rgba(0,0,0,0.06);border-radius:10px;overflow:hidden}.sds-loader-progress > *{height:100%;background:var(--sds-primary);border-radius:10px;animation:sdsProgressBar 2.2s var(--ease-smooth) infinite alternate}.sds-loader-indeterminate{width:100%;height:3px;background:rgba(0,0,0,0.06);border-radius:10px;overflow:hidden;position:relative}.sds-loader-indeterminate > *{position:absolute;height:100%;width:35%;background:var(--sds-primary);border-radius:10px;animation:sdsProgressIndeterminate 1.6s var(--ease-smooth) infinite}.sds-loader-ping{position:relative;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center}.sds-loader-ping::after{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(var(--sds-primary-rgb),0.15);animation:sdsPingRing 1.8s var(--ease-smooth) infinite}.sds-loader-ping::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--sds-primary);position:relative;z-index:1}.sds-loader-orbit{position:relative;width:32px;height:32px;display:inline-block}.sds-loader-orbit::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1.5px dashed rgba(0,0,0,0.12)}.sds-loader-orbit > *{position:absolute;width:100%;height:100%;animation:sdsSpin 2.2s linear infinite}.sds-loader-orbit > *::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--sds-primary)}.sds-loader-square-flip{width:22px;height:22px;background:var(--sds-primary);border-radius:3px;animation:sdsSquareSpin 2.2s var(--ease-smooth) infinite}.sds-loader-morph{width:26px;height:26px;background:var(--sds-primary);animation:sdsMorphLoader 1.8s var(--ease-spring) infinite}@keyframes sdsSpin{to{transform:rotate(360deg)}}@keyframes sdsBounceDots{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes sdsDotPulse{0%,80%,100%{transform:scale(0.2);opacity:0.3}40%{transform:scale(1);opacity:1}}@keyframes sdsBarGrow{0%,100%{transform:scaleY(0.25)}50%{transform:scaleY(1)}}@keyframes sdsSkeleton{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes sdsProgressBar{from{width:0%}to{width:80%}}@keyframes sdsProgressIndeterminate{from{left:-35%}to{left:110%}}@keyframes sdsPingRing{0%{transform:scale(0.85);opacity:0.8}100%{transform:scale(2);opacity:0}}@keyframes sdsSquareSpin{0%{transform:perspective(80px) rotateX(0) rotateY(0)}50%{transform:perspective(80px) rotateX(180deg) rotateY(0)}100%{transform:perspective(80px) rotateX(180deg) rotateY(180deg)}}@keyframes sdsMorphLoader{0%,100%{border-radius:50%;transform:rotate(0deg)}50%{border-radius:20%;transform:rotate(90deg)}}.sds-scroll-fade-up{opacity:0;transform:translateY(16px);filter:blur(1px);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing),filter var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-fade-up.sds-in-view{opacity:1;transform:translateY(0);filter:blur(0)}.sds-scroll-fade-left{opacity:0;transform:translateX(20px);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-fade-left.sds-in-view{opacity:1;transform:translateX(0)}.sds-scroll-fade-right{opacity:0;transform:translateX(-20px);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-fade-right.sds-in-view{opacity:1;transform:translateX(0)}.sds-scroll-zoom-in{opacity:0;transform:scale(0.92);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-zoom-in.sds-in-view{opacity:1;transform:scale(1)}.sds-scroll-rotate-in{opacity:0;transform:rotate(-4deg) scale(0.96);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-rotate-in.sds-in-view{opacity:1;transform:rotate(0) scale(1)}.sds-scroll-flip-up{opacity:0;transform:perspective(700px) rotateX(25deg);transform-origin:center bottom;transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-flip-up.sds-in-view{opacity:1;transform:perspective(700px) rotateX(0)}.sds-scroll-flip-left{opacity:0;transform:perspective(700px) rotateY(25deg);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-flip-left.sds-in-view{opacity:1;transform:perspective(700px) rotateY(0)}.sds-scroll-spring{opacity:0;transform:scale(0.88);transition:opacity var(--sds-duration) var(--ease-spring),transform var(--sds-duration) var(--ease-spring);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-spring.sds-in-view{opacity:1;transform:scale(1)}.sds-scroll-drop{opacity:0;transform:translateY(-20px);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-drop.sds-in-view{opacity:1;transform:translateY(0)}.sds-scroll-reveal-left{clip-path:inset(0 100% 0 0);transition:clip-path var(--sds-duration) var(--ease-reveal);transition-delay:var(--sds-delay);will-change:clip-path}.sds-scroll-reveal-left.sds-in-view{clip-path:inset(0 0% 0 0)}.sds-scroll-reveal-bottom{clip-path:inset(0 0 100% 0);transition:clip-path var(--sds-duration) var(--ease-reveal);transition-delay:var(--sds-delay);will-change:clip-path}.sds-scroll-reveal-bottom.sds-in-view{clip-path:inset(0 0 0% 0)}.sds-scroll-blur-reveal{opacity:0;filter:blur(8px);transition:opacity var(--sds-duration) var(--sds-easing),filter var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,filter}.sds-scroll-blur-reveal.sds-in-view{opacity:1;filter:blur(0)}.sds-scroll-mask-circle{clip-path:circle(0% at 50% 50%);transition:clip-path var(--sds-duration) var(--ease-reveal);transition-delay:var(--sds-delay);will-change:clip-path}.sds-scroll-mask-circle.sds-in-view{clip-path:circle(150% at 50% 50%)}.sds-scroll-fade-scale{opacity:0;transform:scale(1.06);transition:opacity var(--sds-duration) var(--sds-easing),transform var(--sds-duration) var(--sds-easing);transition-delay:var(--sds-delay);will-change:opacity,transform}.sds-scroll-fade-scale.sds-in-view{opacity:1;transform:scale(1)}.sds-scroll-underline{position:relative}.sds-scroll-underline::after{content:'';position:absolute;bottom:-2px;left:0;width:0%;height:1.5px;background:var(--sds-accent2);transition:width var(--sds-duration) var(--ease-reveal);transition-delay:var(--sds-delay)}.sds-scroll-underline.sds-in-view::after{width:100%}
package/dist/motion.min.js ADDED
@@ -0,0 +1,281 @@
1
+ (function () {
2
+ 'use strict';
3
+ function initObserver() {
4
+ // 1. Process stagger containers to dynamically apply staggered delays
5
+ const staggerGroups = document.querySelectorAll('.sds-stagger');
6
+ staggerGroups.forEach(group => {
7
+ // Find all immediate or relevant children that have sds-scroll- or anim classes
8
+ const children = group.querySelectorAll('[class*="sds-scroll-"], [class*="sds-card-"], [class*="sds-btn-"]');
9
+ const staggerGap = parseInt(group.style.getPropertyValue('--sds-stagger-gap') || '80');
10
+ children.forEach((child, index) => {
11
+ // Set inline variables so CSS can compute the staggered delays dynamically
12
+ child.style.setProperty('--sds-delay', `${index * staggerGap}ms`);
13
+ child.style.setProperty('--sds-stagger-index', index.toString());
14
+ });
15
+ });
16
+ // 2. Setup IntersectionObserver for scroll-driven animations
17
+ const observerOptions = {
18
+ root: null, // relative to viewport
19
+ rootMargin: '0px 0px -8% 0px', // slightly before bottom of screen for cleaner reveals
20
+ threshold: 0.1 // 10% visible
21
+ };
22
+ const scrollObserver = new IntersectionObserver((entries, observer) => {
23
+ entries.forEach(entry => {
24
+ const el = entry.target;
25
+ const isOnce = el.getAttribute('data-sds-once') !== 'false' && !el.classList.contains('sds-repeat');
26
+ if (entry.isIntersecting) {
27
+ el.classList.add('sds-in-view');
28
+ // If once, stop observing this element
29
+ if (isOnce) {
30
+ observer.unobserve(el);
31
+ }
32
+ } else {
33
+ // If repeat is active, remove class when it leaves viewport
34
+ if (!isOnce) {
35
+ el.classList.remove('sds-in-view');
36
+ }
37
+ }
38
+ });
39
+ }, observerOptions);
40
+ // Find all scroll animation targets
41
+ const scrollTargets = document.querySelectorAll('[class*="sds-scroll-"]');
42
+ scrollTargets.forEach(target => scrollObserver.observe(target));
43
+ }
44
+ // Self-booting when DOM is ready
45
+ if (document.readyState === 'loading') {
46
+ document.addEventListener('DOMContentLoaded', initObserver);
47
+ } else {
48
+ initObserver();
49
+ }
50
+ // Export globally under SDSObservations namespace
51
+ window.SDSObservations = {
52
+ init: initObserver
53
+ };
54
+ })();
55
+ (function () {
56
+ 'use strict';
57
+ function initHoverEngine() {
58
+ const tiltElements = document.querySelectorAll('.sds-tilt-3d, .sds-spotlight');
59
+ tiltElements.forEach(el => {
60
+ let isTiltActive = el.classList.contains('sds-tilt-3d');
61
+ let isSpotlightActive = el.classList.contains('sds-spotlight');
62
+ // Maximum degrees of tilt rotation
63
+ const maxTilt = parseFloat(el.getAttribute('data-sds-max-tilt') || '15');
64
+ el.addEventListener('mousemove', e => {
65
+ const rect = el.getBoundingClientRect();
66
+ const width = rect.width;
67
+ const height = rect.height;
68
+ // Mouse coordinate relative to element bounds
69
+ const x = e.clientX - rect.left;
70
+ const y = e.clientY - rect.top;
71
+ if (isSpotlightActive) {
72
+ // Calculate percentage for spotlight radial gradient
73
+ const spotX = (x / width) * 100;
74
+ const spotY = (y / height) * 100;
75
+ el.style.setProperty('--spot-x', `${spotX}%`);
76
+ el.style.setProperty('--spot-y', `${spotY}%`);
77
+ }
78
+ if (isTiltActive) {
79
+ // Normalize coordinates around element center (-0.5 to 0.5)
80
+ const normX = (x / width) - 0.5;
81
+ const normY = (y / height) - 0.5;
82
+ // Calculate degrees. Turning on X-axis relates to vertical movement (normY)
83
+ // Turning on Y-axis relates to horizontal movement (normX)
84
+ const rotateX = -normY * maxTilt;
85
+ const rotateY = normX * maxTilt;
86
+ el.style.setProperty('--rx', rotateX.toFixed(2));
87
+ el.style.setProperty('--ry', rotateY.toFixed(2));
88
+ // Set directional mouse coords for advanced styles
89
+ el.style.setProperty('--mx', (x / width).toFixed(3));
90
+ el.style.setProperty('--my', (y / height).toFixed(3));
91
+ }
92
+ });
93
+ el.addEventListener('mouseleave', () => {
94
+ // Reset angles smoothly on exit
95
+ el.style.setProperty('--rx', '0');
96
+ el.style.setProperty('--ry', '0');
97
+ // Spot shine fades on leave via CSS transition
98
+ el.style.setProperty('--spot-x', '50%');
99
+ el.style.setProperty('--spot-y', '50%');
100
+ });
101
+ });
102
+ }
103
+ // Self-starting hook
104
+ if (document.readyState === 'loading') {
105
+ document.addEventListener('DOMContentLoaded', initHoverEngine);
106
+ } else {
107
+ initHoverEngine();
108
+ }
109
+ window.SDSHoverEngine = {
110
+ init: initHoverEngine
111
+ };
112
+ })();
113
+ (function () {
114
+ 'use strict';
115
+ function initMagneticEngine() {
116
+ const magneticItems = document.querySelectorAll('.sds-magnetic, mf-magnetic');
117
+ magneticItems.forEach(el => {
118
+ // Configurable properties
119
+ const range = parseFloat(el.getAttribute('data-sds-range') || '50');
120
+ const spring = parseFloat(el.getAttribute('data-sds-spring') || '0.12'); // Stiffness
121
+ const damping = parseFloat(el.getAttribute('data-sds-damping') || '0.78'); // Friction
122
+ // Physics variables
123
+ let currentX = 0;
124
+ let currentY = 0;
125
+ let targetX = 0;
126
+ let targetY = 0;
127
+ let vx = 0;
128
+ let vy = 0;
129
+ let isHovered = false;
130
+ let animationFrameId = null;
131
+ // Wrap inner content to apply the offset transforms cleanly
132
+ let child = el.firstElementChild;
133
+ if (!child) return;
134
+ // Ensure child has absolute positioning or transforms are handled correctly
135
+ child.style.transition = 'none'; // Overrides CSS transitions to avoid clash with physics loops
136
+ function updatePhysics() {
137
+ // Spring equations: acceleration = spring * (target - current) - damping * velocity
138
+ const ax = spring * (targetX - currentX) - damping * vx;
139
+ const ay = spring * (targetY - currentY) - damping * vy;
140
+ vx += ax;
141
+ vy += ay;
142
+ currentX += vx;
143
+ currentY += vy;
144
+ // Apply physical transform offset
145
+ child.style.transform = `translate3d(${currentX.toFixed(2)}px, ${currentY.toFixed(2)}px, 0)`;
146
+ // Stop loop if resting and mouse is not hovered to save CPU
147
+ const isResting = Math.abs(vx) < 0.01 && Math.abs(vy) < 0.01 && Math.abs(targetX - currentX) < 0.01 && Math.abs(targetY - currentY) < 0.01;
148
+ if (!isHovered && isResting) {
149
+ child.style.transform = '';
150
+ currentX = 0; currentY = 0;
151
+ vx = 0; vy = 0;
152
+ animationFrameId = null;
153
+ } else {
154
+ animationFrameId = requestAnimationFrame(updatePhysics);
155
+ }
156
+ }
157
+ el.addEventListener('mousemove', e => {
158
+ const rect = el.getBoundingClientRect();
159
+ // Find centers
160
+ const centerX = rect.left + rect.width / 2;
161
+ const centerY = rect.top + rect.height / 2;
162
+ // Distance from cursor to element center
163
+ const distX = e.clientX - centerX;
164
+ const distY = e.clientY - centerY;
165
+ const distance = Math.hypot(distX, distY);
166
+ if (distance < range) {
167
+ isHovered = true;
168
+ // Magnetic pull: pull coordinate fractionally (e.g. 35% of distance)
169
+ targetX = distX * 0.38;
170
+ targetY = distY * 0.38;
171
+ } else {
172
+ isHovered = false;
173
+ targetX = 0;
174
+ targetY = 0;
175
+ }
176
+ if (!animationFrameId) {
177
+ animationFrameId = requestAnimationFrame(updatePhysics);
178
+ }
179
+ });
180
+ el.addEventListener('mouseleave', () => {
181
+ isHovered = false;
182
+ targetX = 0;
183
+ targetY = 0;
184
+ if (!animationFrameId) {
185
+ animationFrameId = requestAnimationFrame(updatePhysics);
186
+ }
187
+ });
188
+ });
189
+ }
190
+ // Self-starting hook
191
+ if (document.readyState === 'loading') {
192
+ document.addEventListener('DOMContentLoaded', initMagneticEngine);
193
+ } else {
194
+ initMagneticEngine();
195
+ }
196
+ window.SDSMagneticEngine = {
197
+ init: initMagneticEngine
198
+ };
199
+ })();
200
+ (function () {
201
+ 'use strict';
202
+ // 1. Text Stagger Reveal Component: <mf-text-reveal>
203
+ class MfTextReveal extends HTMLElement {
204
+ constructor() {
205
+ super();
206
+ }
207
+ connectedCallback() {
208
+ // Capture structural attributes
209
+ const text = this.textContent.trim();
210
+ const effect = this.getAttribute('effect') || 'fade-up'; // e.g. fade-up, blur-in, skew-in
211
+ const splitBy = this.getAttribute('by') || 'char'; // char or word
212
+ const delay = parseInt(this.getAttribute('delay') || '0');
213
+ const stagger = parseInt(this.getAttribute('stagger') || '40');
214
+ const speed = this.getAttribute('speed') || 'normal'; // slow, normal, fast
215
+ const easing = this.getAttribute('easing') || ''; // spring, smooth, bounce, reveal
216
+ this.innerHTML = ''; // Clear raw text node
217
+ // Modifier style mappings
218
+ const speedClass = speed === 'slow' ? 'sds-slow' : (speed === 'fast' ? 'sds-fast' : (speed === 'instant' ? 'sds-instant' : ''));
219
+ const easeClass = easing ? `sds-${easing}` : '';
220
+ if (splitBy === 'char') {
221
+ const chars = text.split('');
222
+ chars.forEach((char, index) => {
223
+ const span = document.createElement('span');
224
+ if (char === ' ') {
225
+ span.innerHTML = '&nbsp;';
226
+ span.style.display = 'inline-block';
227
+ } else {
228
+ span.textContent = char;
229
+ span.className = `sds-${effect} ${speedClass} ${easeClass}`;
230
+ span.style.display = 'inline-block';
231
+ span.style.setProperty('--sds-delay', `${delay + (index * stagger)}ms`);
232
+ }
233
+ this.appendChild(span);
234
+ });
235
+ } else {
236
+ const words = text.split(' ');
237
+ words.forEach((word, index) => {
238
+ const span = document.createElement('span');
239
+ span.textContent = word;
240
+ span.className = `sds-${effect} ${speedClass} ${easeClass}`;
241
+ span.style.display = 'inline-block';
242
+ span.style.setProperty('--sds-delay', `${delay + (index * stagger)}ms`);
243
+ this.appendChild(span);
244
+ // Append trailing space
245
+ if (index < words.length - 1) {
246
+ const space = document.createElement('span');
247
+ space.innerHTML = '&nbsp;';
248
+ space.style.display = 'inline-block';
249
+ this.appendChild(space);
250
+ }
251
+ });
252
+ }
253
+ }
254
+ }
255
+ // 2. Magnetic Spring Component: <mf-magnetic>
256
+ class MfMagnetic extends HTMLElement {
257
+ connectedCallback() {
258
+ this.classList.add('sds-magnetic');
259
+ // Hover behaviors and spring physics calculations are auto-triggered by magnetic.js selector
260
+ }
261
+ }
262
+ // 3. 3D Spotlight Tilt Card: <mf-tilt-card>
263
+ class MfTiltCard extends HTMLElement {
264
+ connectedCallback() {
265
+ this.classList.add('sds-tilt-3d', 'sds-spotlight');
266
+ const maxTilt = this.getAttribute('max-tilt') || '15';
267
+ this.setAttribute('data-sds-max-tilt', maxTilt);
268
+ // Coordinate logic and tilt updates are auto-triggered by hover.js selector
269
+ }
270
+ }
271
+ // Register elements globally
272
+ if (!customElements.get('mf-text-reveal')) {
273
+ customElements.define('mf-text-reveal', MfTextReveal);
274
+ }
275
+ if (!customElements.get('mf-magnetic')) {
276
+ customElements.define('mf-magnetic', MfMagnetic);
277
+ }
278
+ if (!customElements.get('mf-tilt-card')) {
279
+ customElements.define('mf-tilt-card', MfTiltCard);
280
+ }
281
+ })();
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@salkomdesignstudio/sds-motion-forge",
3
+ "version": "1.1.0",
4
+ "description": "Modern UI animation utility library with advanced easings, spring physics, staggers, and spatial Web Components.",
5
+ "main": "dist/motion.min.js",
6
+ "module": "dist/motion.min.js",
7
+ "style": "dist/motion.min.css",
8
+ "files": [
9
+ "dist",
10
+ "README.md",
11
+ "LICENSE"
12
+ ],
13
+ "scripts": {
14
+ "build": "node build.js",
15
+ "start": "node build.js && node server.js"
16
+ },
17
+ "keywords": [
18
+ "css",
19
+ "animation",
20
+ "motion",
21
+ "spring",
22
+ "physics",
23
+ "web-components",
24
+ "transitions",
25
+ "ui",
26
+ "ux",
27
+ "frontend"
28
+ ],
29
+ "author": "Salkom Design Studio",
30
+ "license": "MIT",
31
+ "homepage": "https://github.com/salkomdesignstudio/SDS-Motion-Forge#readme",
32
+ "repository": {
33
+ "type": "git",
34
+ "url": "git+https://github.com/salkomdesignstudio/SDS-Motion-Forge.git"
35
+ },
36
+ "bugs": {
37
+ "url": "https://github.com/salkomdesignstudio/SDS-Motion-Forge/issues"
38
+ }
39
+ }