{ "$schema": "./motion.registry.schema.json", "name": "@salkomdesignstudio/sds-motion-forge", "generatedFrom": "src/motion.css (postcss-import inlined)", "version": "5.0.0", "tokens": { "duration": [ "instant", "fast", "base", "slow", "slower", "dramatic" ], "easing": [ "standard", "decelerate", "accelerate", "emphasized", "spring", "bounce" ], "distance": [ "sm", "md", "lg" ] }, "classes": [ { "name": "sds-alt", "displayName": "Alt", "category": "modifiers", "kind": "modifier", "description": "Alt — playback modifier.", "selectors": [ ".sds-alt, .sds-alt > *" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-arc-orbit", "displayName": "Arc Orbit", "category": "text", "kind": "effect", "description": "Each child orbits in with stagger delay", "selectors": [ ".sds-arc-orbit > *", ".sds-arc-orbit > *:nth-child(1)", ".sds-arc-orbit > *:nth-child(2)", ".sds-arc-orbit > *:nth-child(3)", ".sds-arc-orbit > *:nth-child(4)", ".sds-arc-orbit > *:nth-child(5)", ".sds-arc-orbit > *:nth-child(6)", ".sds-arc-orbit > *:nth-child(7)", ".sds-arc-orbit > *:nth-child(8)", ".sds-arc-orbit > *:nth-child(9)", ".sds-arc-orbit > *:nth-child(10)", ".sds-arc-orbit > *:nth-child(11)", ".sds-arc-orbit > *:nth-child(12)" ], "keyframes": [ "sds-charOrbit" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-aurora-text", "displayName": "Aurora Text", "category": "text", "kind": "effect", "description": "Six-colour gradient clip sweeps through text", "selectors": [ ".sds-aurora-text" ], "keyframes": [ "sds-auroraFlow" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-blur-focus", "displayName": "Blur Focus", "category": "text", "kind": "effect", "description": "Sharpens from heavy blur with tracking", "selectors": [ ".sds-blur-focus" ], "keyframes": [ "sds-blurFocus" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-bounce-drop-in", "displayName": "Bounce Drop In", "category": "text", "kind": "effect", "description": "Drops in with a squashy bounce", "selectors": [ ".sds-bounce-drop-in" ], "keyframes": [ "sds-bounceDrop" ], "tokensUsed": [ "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-bounce-in-up", "displayName": "Bounce In Up", "category": "text", "kind": "effect", "description": "Multi-step elastic Y-axis bounce entrance", "selectors": [ ".sds-bounce-in-up" ], "keyframes": [ "sds-bounceInUp" ], "tokensUsed": [ "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-bounce-loop", "displayName": "Bounce Loop", "category": "text", "kind": "effect", "description": "Bounces continuously (loop)", "selectors": [ ".sds-bounce-loop" ], "keyframes": [ "sds-bounceLoop" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-amp", "displayName": "Amp", "category": "buttons", "kind": "effect", "description": "Amp — button animation.", "selectors": [ ".sds-btn-amp" ], "keyframes": [ "sds-btnAmp" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-aurora", "displayName": "Aurora", "category": "buttons", "kind": "effect", "description": "Aurora — button animation.", "selectors": [ ".sds-btn-aurora" ], "keyframes": [ "sds-btnAurora" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-beacon", "displayName": "Beacon", "category": "buttons", "kind": "effect", "description": "One ring ping every couple of seconds with true rest between — rhythm, not noise", "selectors": [ ".sds-btn-beacon", ".sds-btn-beacon::after" ], "keyframes": [ "sds-btnBeacon" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-decelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-blinds", "displayName": "Blinds", "category": "buttons", "kind": "effect", "description": "A slatted cover wipes away in four steps, revealing the button like opening blinds", "selectors": [ ".sds-btn-blinds", ".sds-btn-blinds::after" ], "keyframes": [ "sds-btnBlindsHost", "sds-btnBlinds" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-border-flow", "displayName": "Border Flow", "category": "buttons", "kind": "effect", "description": "Border Flow — button animation.", "selectors": [ ".sds-btn-border-flow" ], "keyframes": [ "sds-btnBorderFlow" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-bounce", "displayName": "Bounce", "category": "buttons", "kind": "effect", "description": "Bounce — button animation.", "selectors": [ ".sds-btn-bounce" ], "keyframes": [ "sds-btnBounce" ], "tokensUsed": [ "--sds-duration-slow", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-breath-hold", "displayName": "Breath Hold", "category": "buttons", "kind": "effect", "description": "Inhale, hold at the top, quick exhale — asymmetric breathing that draws the eye", "selectors": [ ".sds-btn-breath-hold" ], "keyframes": [ "sds-btnBreathHold" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-burst", "displayName": "Burst", "category": "buttons", "kind": "effect", "description": "Burst — button animation.", "selectors": [ ".sds-btn-burst" ], "keyframes": [ "sds-btnBurst" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset", "outline-width", "transform" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset", "outline-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-charge", "displayName": "Charge", "category": "buttons", "kind": "effect", "description": "Charge — button animation.", "selectors": [ ".sds-btn-charge" ], "keyframes": [ "sds-btnCharge" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-crystal", "displayName": "Crystal", "category": "buttons", "kind": "effect", "description": "Crystal — button animation.", "selectors": [ ".sds-btn-crystal" ], "keyframes": [ "sds-btnCrystal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-depth-press", "displayName": "Depth Press", "category": "buttons", "kind": "effect", "description": "Depth Press — button animation.", "selectors": [ ".sds-btn-depth-press" ], "keyframes": [ "sds-btnDepthPress" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-dissolve", "displayName": "Dissolve", "category": "buttons", "kind": "effect", "description": "Dissolve — button animation.", "selectors": [ ".sds-btn-dissolve" ], "keyframes": [ "sds-btnDissolve" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-corners", "displayName": "Draw Corners", "category": "buttons", "kind": "effect", "description": "Four corner brackets pop in from outside and snap onto the corners with spring", "selectors": [ ".sds-btn-draw-corners", ".sds-btn-draw-corners::before, .sds-btn-draw-corners::after", ".sds-btn-draw-corners::before", ".sds-btn-draw-corners::after" ], "keyframes": [ "sds-btnDrawCornersA", "sds-btnDrawCornersB" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-cross", "displayName": "Draw Cross", "category": "buttons", "kind": "effect", "description": "Two diagonal light lines sweep across in opposite directions, crossing mid-button", "selectors": [ ".sds-btn-draw-cross", ".sds-btn-draw-cross::before, .sds-btn-draw-cross::after", ".sds-btn-draw-cross::before", ".sds-btn-draw-cross::after" ], "keyframes": [ "sds-btnDrawCrossA", "sds-btnDrawCrossB" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-dash", "displayName": "Draw Dash", "category": "buttons", "kind": "effect", "description": "A dashed frame appears segment-by-segment, dims, then solidifies bright before resetting", "selectors": [ ".sds-btn-draw-dash", ".sds-btn-draw-dash::before" ], "keyframes": [ "sds-btnDrawDash" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-perimeter", "displayName": "Draw Perimeter", "category": "buttons", "kind": "effect", "description": "Border draws itself around the button, clicks at full frame, then fades for the next pass", "selectors": [ ".sds-btn-draw-perimeter", ".sds-btn-draw-perimeter::before" ], "keyframes": [ "sds-btnDrawPerimeter" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-pulse-frame", "displayName": "Draw Pulse Frame", "category": "buttons", "kind": "effect", "description": "Frame draws once, then breathes outward with fading echoes", "selectors": [ ".sds-btn-draw-pulse-frame", ".sds-btn-draw-pulse-frame::before" ], "keyframes": [ "sds-btnDrawPulseFrame" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-draw-underline-orbit", "displayName": "Underline Orbit", "category": "buttons", "kind": "effect", "description": "Underline draws under the label, then swings a full orbit and parks back home", "selectors": [ ".sds-btn-draw-underline-orbit", ".sds-btn-draw-underline-orbit::before" ], "keyframes": [ "sds-btnDrawUnderlineOrbit" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-emphasized" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-edge", "displayName": "Edge Trace", "category": "buttons", "kind": "effect", "description": "Border traces the perimeter sequentially", "selectors": [ ".sds-btn-edge" ], "keyframes": [ "sds-edgeTrace" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-size" ], "animatedPaintProps": [ "background-size" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-ember", "displayName": "Ember", "category": "buttons", "kind": "effect", "description": "Heat shimmer: micro-skew, warm hue drift, and an ember glow that brightens on the exhale", "selectors": [ ".sds-btn-ember" ], "keyframes": [ "sds-btnEmber" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-energy", "displayName": "Energy Ripple", "category": "buttons", "kind": "effect", "description": "Double box-shadow ripple propagates out", "selectors": [ ".sds-btn-energy" ], "keyframes": [ "sds-energyRipple" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-corner", "displayName": "Fill Corner", "category": "buttons", "kind": "effect", "description": "Tint unfolds diagonally from the top-left corner with a −0.5° settle", "selectors": [ ".sds-btn-fill-corner", ".sds-btn-fill-corner::before" ], "keyframes": [ "sds-btnFillCornerHost", "sds-btnFillCorner" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-decelerate", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-drain", "displayName": "Fill Drain", "category": "buttons", "kind": "effect", "description": "Fill drains to the floor, pauses empty, then refills — a patient three-act loop", "selectors": [ ".sds-btn-fill-drain", ".sds-btn-fill-drain::before" ], "keyframes": [ "sds-btnFillDrain" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-iris", "displayName": "Fill Iris", "category": "buttons", "kind": "effect", "description": "Tint blooms from the center as an iris while the button breathes 0.985→1 on a spring", "selectors": [ ".sds-btn-fill-iris", ".sds-btn-fill-iris::before" ], "keyframes": [ "sds-btnFillIrisHost", "sds-btnFillIris" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-decelerate", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-rise", "displayName": "Fill Rise", "category": "buttons", "kind": "effect", "description": "Liquid sheet rises from the floor with a wobbling top edge, levels off, then ebbs away", "selectors": [ ".sds-btn-fill-rise", ".sds-btn-fill-rise::before" ], "keyframes": [ "sds-btnFillRise" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-decelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-split", "displayName": "Fill Split", "category": "buttons", "kind": "effect", "description": "Two half-fills race from opposite edges and seal mid-button with a decaying flare", "selectors": [ ".sds-btn-fill-split", ".sds-btn-fill-split::before, .sds-btn-fill-split::after", ".sds-btn-fill-split::before", ".sds-btn-fill-split::after" ], "keyframes": [ "sds-btnFillSplitL", "sds-btnFillSplitR" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-sweep", "displayName": "Fill Sweep", "category": "buttons", "kind": "effect", "description": "Skewed tint sweeps across with a brightness kiss, holds, then exits with momentum", "selectors": [ ".sds-btn-fill-sweep", ".sds-btn-fill-sweep::before" ], "keyframes": [ "sds-btnFillSweep" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fill-wave", "displayName": "Fill Wave", "category": "buttons", "kind": "effect", "description": "A tilted wave climbs in and levels flat while the label bobs once above it", "selectors": [ ".sds-btn-fill-wave", ".sds-btn-fill-wave::before", ".sds-btn-fill-wave > *" ], "keyframes": [ "sds-btnFillWave", "sds-btnFillWaveLabel" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-decelerate", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-fire", "displayName": "Fire", "category": "buttons", "kind": "effect", "description": "Fire — button animation.", "selectors": [ ".sds-btn-fire" ], "keyframes": [ "sds-btnFire" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-flare", "displayName": "Flare", "category": "buttons", "kind": "effect", "description": "Flare — button animation.", "selectors": [ ".sds-btn-flare" ], "keyframes": [ "sds-btnFlare" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-float", "displayName": "Float", "category": "buttons", "kind": "effect", "description": "Float — button animation.", "selectors": [ ".sds-btn-float" ], "keyframes": [ "sds-btnFloat" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-flux", "displayName": "Flux", "category": "buttons", "kind": "effect", "description": "Flux — button animation.", "selectors": [ ".sds-btn-flux" ], "keyframes": [ "sds-btnFlux" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-glow-core", "displayName": "Glow Core", "category": "buttons", "kind": "effect", "description": "Glow Core — button animation.", "selectors": [ ".sds-btn-glow-core" ], "keyframes": [ "sds-btnGlowCore" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-glow-surge", "displayName": "Glow Surge", "category": "buttons", "kind": "effect", "description": "Subtle outer glow that breathes", "selectors": [ ".sds-btn-glow-surge" ], "keyframes": [ "sds-glowSurge" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-gradient-shift", "displayName": "Gradient Shift", "category": "buttons", "kind": "effect", "description": "Gradient Shift — button animation.", "selectors": [ ".sds-btn-gradient-shift" ], "keyframes": [ "sds-btnGradShift" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-gravity", "displayName": "Gravity", "category": "buttons", "kind": "effect", "description": "Gravity — button animation.", "selectors": [ ".sds-btn-gravity" ], "keyframes": [ "sds-btnGravity" ], "tokensUsed": [ "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-gravity-pull", "displayName": "Gravity Pull", "category": "buttons", "kind": "effect", "description": "Gravity Pull — button animation.", "selectors": [ ".sds-btn-gravity-pull" ], "keyframes": [ "sds-btnGravityPull" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-guillotine", "displayName": "Guillotine", "category": "buttons", "kind": "effect", "description": "The top half drops onto the emerging bottom half with a landing squash", "selectors": [ ".sds-btn-guillotine" ], "keyframes": [ "sds-btnGuillotine" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-halo-breathe", "displayName": "Halo Breathe", "category": "buttons", "kind": "effect", "description": "A soft halo grows and recedes with brightness in sync — calm, steady presence", "selectors": [ ".sds-btn-halo-breathe" ], "keyframes": [ "sds-btnHaloBreathe" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-halo-flicker-on", "displayName": "Halo Flicker On", "category": "buttons", "kind": "effect", "description": "Powers on through three stepped flickers, then the halo blooms and holds", "selectors": [ ".sds-btn-halo-flicker-on" ], "keyframes": [ "sds-btnHaloFlickerOn" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-halo-split", "displayName": "Halo Split", "category": "buttons", "kind": "effect", "description": "The glow splits into two lobes that drift apart, dissolve, and re-merge each cycle", "selectors": [ ".sds-btn-halo-split", ".sds-btn-halo-split::before, .sds-btn-halo-split::after", ".sds-btn-halo-split::before", ".sds-btn-halo-split::after" ], "keyframes": [ "sds-btnHaloSplitL", "sds-btnHaloSplitR" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-heartbeat", "displayName": "Heartbeat", "category": "buttons", "kind": "effect", "description": "Heartbeat — button animation.", "selectors": [ ".sds-btn-heartbeat" ], "keyframes": [ "sds-btnHeartbeat" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-hologram", "displayName": "Hologram", "category": "buttons", "kind": "effect", "description": "Hologram — button animation.", "selectors": [ ".sds-btn-hologram" ], "keyframes": [ "sds-btnHologram" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-ice", "displayName": "Ice", "category": "buttons", "kind": "effect", "description": "Ice — button animation.", "selectors": [ ".sds-btn-ice" ], "keyframes": [ "sds-btnIce" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-icon-launch", "displayName": "Icon Launch", "category": "buttons", "kind": "effect", "description": "The icon winds up, rockets forward with motion blur, and glides back as the label leans after it", "selectors": [ ".sds-btn-icon-launch > *:first-child", ".sds-btn-icon-launch > *:last-child" ], "keyframes": [ "sds-btnIconLaunch", "sds-btnIconLaunchLabel" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-icon-spin-settle", "displayName": "Icon Spin Settle", "category": "buttons", "kind": "effect", "description": "The icon overshoots a full spin (380°→360°) while the label squeezes in sympathy", "selectors": [ ".sds-btn-icon-spin-settle > *:first-child", ".sds-btn-icon-spin-settle > *:last-child" ], "keyframes": [ "sds-btnIconSpinSettle", "sds-btnIconSpinLabel" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-kinetic", "displayName": "Kinetic", "category": "buttons", "kind": "effect", "description": "Kinetic — button animation.", "selectors": [ ".sds-btn-kinetic" ], "keyframes": [ "sds-btnKinetic" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-label-slide", "displayName": "Label Slide", "category": "buttons", "kind": "effect", "description": "The label slides up and out, then returns from below with a soft overshoot — a quiet refresh tick", "selectors": [ ".sds-btn-label-slide", ".sds-btn-label-slide > *" ], "keyframes": [ "sds-btnLabelSlide" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-label-typewrite", "displayName": "Label Typewrite", "category": "buttons", "kind": "effect", "description": "Label pieces type in on a stepped cascade, hold, then clear for the next pass", "selectors": [ ".sds-btn-label-typewrite > *", ".sds-btn-label-typewrite > *:nth-child(2)", ".sds-btn-label-typewrite > *:nth-child(3)", ".sds-btn-label-typewrite > *:nth-child(4)", ".sds-btn-label-typewrite > *:nth-child(5)", ".sds-btn-label-typewrite > *:nth-child(6)", ".sds-btn-label-typewrite > *:nth-child(7)", ".sds-btn-label-typewrite > *:nth-child(8)" ], "keyframes": [ "sds-btnLabelTypewrite" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-label-wave", "displayName": "Label Wave", "category": "buttons", "kind": "effect", "description": "Label pieces ripple a 2px wave left to right with tiny rotations", "selectors": [ ".sds-btn-label-wave > *", ".sds-btn-label-wave > *:nth-child(2)", ".sds-btn-label-wave > *:nth-child(3)", ".sds-btn-label-wave > *:nth-child(4)", ".sds-btn-label-wave > *:nth-child(5)", ".sds-btn-label-wave > *:nth-child(6)" ], "keyframes": [ "sds-btnLabelWave" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-lift", "displayName": "Lift Shadow", "category": "buttons", "kind": "effect", "description": "Lifts with a growing depth shadow", "selectors": [ ".sds-btn-lift" ], "keyframes": [ "sds-liftShadow" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-liquid", "displayName": "Liquid Fill", "category": "buttons", "kind": "effect", "description": "Background fills from right to left", "selectors": [ ".sds-btn-liquid" ], "keyframes": [ "sds-liquidFill" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-magnetic", "displayName": "Magnetic Pulse", "category": "buttons", "kind": "effect", "description": "Outward pulse ring on a loop", "selectors": [ ".sds-btn-magnetic" ], "keyframes": [ "sds-magnetPulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-magnetic-trail", "displayName": "Magnetic Trail", "category": "buttons", "kind": "effect", "description": "Magnetic Trail — button animation.", "selectors": [ ".sds-btn-magnetic-trail" ], "keyframes": [ "sds-btnMagTrail" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-momentum", "displayName": "Momentum", "category": "buttons", "kind": "effect", "description": "Momentum — button animation.", "selectors": [ ".sds-btn-momentum" ], "keyframes": [ "sds-btnMomentum" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-morph", "displayName": "Morph Pill", "category": "buttons", "kind": "effect", "description": "Border-radius morphs between rect/pill", "selectors": [ ".sds-btn-morph" ], "keyframes": [ "sds-morphPill" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-neon", "displayName": "Neon Sign", "category": "buttons", "kind": "effect", "description": "Neon box-shadow with a flicker glitch", "selectors": [ ".sds-btn-neon", ".sds-btn-neon, .sds-btn-plasma, .sds-btn-aurora, .sds-btn-float, .sds-btn-tilt, .sds-btn-rotate" ], "keyframes": [ "sds-neonSign" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-neon-trace", "displayName": "Neon Trace", "category": "buttons", "kind": "effect", "description": "Neon Trace — button animation.", "selectors": [ ".sds-btn-neon-trace" ], "keyframes": [ "sds-btnNeonTrace" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-night-sweep", "displayName": "Night Sweep", "category": "buttons", "kind": "effect", "description": "A dark veil wipes off to reveal the lit button, rests, then falls again", "selectors": [ ".sds-btn-night-sweep", ".sds-btn-night-sweep::after" ], "keyframes": [ "sds-btnNightSweep" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-nudge", "displayName": "Nudge", "category": "buttons", "kind": "effect", "description": "The trailing chevron nudges forward twice with decaying amplitude — the go-on gesture", "selectors": [ ".sds-btn-nudge > *:last-child" ], "keyframes": [ "sds-btnNudge" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-outline-grow", "displayName": "Outline Grow", "category": "buttons", "kind": "effect", "description": "Outline Grow — button animation.", "selectors": [ ".sds-btn-outline-grow" ], "keyframes": [ "sds-btnOutlineGrow" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset", "outline-width" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset", "outline-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-plasma", "displayName": "Plasma Glow", "category": "buttons", "kind": "effect", "description": "Plasma-like glow shifts through colours", "selectors": [ ".sds-btn-plasma" ], "keyframes": [ "sds-plasmaGlow" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press", "displayName": "Press Depth", "category": "buttons", "kind": "effect", "description": "Presses down as if physically clicked", "selectors": [ ".sds-btn-press" ], "keyframes": [ "sds-pressDepth" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-coin", "displayName": "Press Coin", "category": "buttons", "kind": "effect", "description": "Tips 12° like a pressed coin edge while its shaded side deepens, then rights itself", "selectors": [ ".sds-btn-press-coin", ".sds-btn-press-coin::after" ], "keyframes": [ "sds-btnPressCoin", "sds-btnPressCoinShade" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-drop", "displayName": "Press Drop", "category": "buttons", "kind": "effect", "description": "Falls in from above, lands with a squash and a single dust ring", "selectors": [ ".sds-btn-press-drop", ".sds-btn-press-drop::after" ], "keyframes": [ "sds-btnPressDrop", "sds-btnPressDropDust" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-decelerate", "--sds-ease-emphasized" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-elastic", "displayName": "Press Elastic", "category": "buttons", "kind": "effect", "description": "Horizontal tug stretches it wide then tall, snapping back through a three-bounce decay", "selectors": [ ".sds-btn-press-elastic" ], "keyframes": [ "sds-btnPressElastic" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-pop", "displayName": "Press Pop", "category": "buttons", "kind": "effect", "description": "Anticipation dip, pop past full size, settle — the label leads the button by a beat", "selectors": [ ".sds-btn-press-pop", ".sds-btn-press-pop > *" ], "keyframes": [ "sds-btnPressPop", "sds-btnPressPopLabel" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-seesaw", "displayName": "Press Seesaw", "category": "buttons", "kind": "effect", "description": "Alternating corner tilts decay to rest, like a key that hasn't seated yet", "selectors": [ ".sds-btn-press-seesaw" ], "keyframes": [ "sds-btnPressSeesaw" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-press-spring", "displayName": "Press Spring", "category": "buttons", "kind": "effect", "description": "Drops 3px with a squash, then rebounds through a two-step spring — the press you can feel", "selectors": [ ".sds-btn-press-spring" ], "keyframes": [ "sds-btnPressSpring" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-prism-edge", "displayName": "Prism Edge", "category": "buttons", "kind": "effect", "description": "A spectral border cycles hue while sweeping emphasis around the frame", "selectors": [ ".sds-btn-prism-edge", ".sds-btn-prism-edge::before" ], "keyframes": [ "sds-btnPrismEdge" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-pulse-border", "displayName": "Pulse Border", "category": "buttons", "kind": "effect", "description": "Pulse Border — button animation.", "selectors": [ ".sds-btn-pulse-border" ], "keyframes": [ "sds-btnPulseBorder" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "border-width", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [ "border-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-quantum", "displayName": "Quantum Stamp", "category": "buttons", "kind": "effect", "description": "Scale-in with elastic overshoot", "selectors": [ ".sds-btn-quantum" ], "keyframes": [ "sds-elasticStamp" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-radar", "displayName": "Radar", "category": "buttons", "kind": "effect", "description": "Radar — button animation.", "selectors": [ ".sds-btn-radar" ], "keyframes": [ "sds-btnRadar" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-recoil", "displayName": "Recoil", "category": "buttons", "kind": "effect", "description": "Recoil — button animation.", "selectors": [ ".sds-btn-recoil" ], "keyframes": [ "sds-btnRecoil" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-ripple", "displayName": "Ripple", "category": "buttons", "kind": "effect", "description": "Ripple — button animation.", "selectors": [ ".sds-btn-ripple" ], "keyframes": [ "sds-btnRipple" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-rotate", "displayName": "Rotate", "category": "buttons", "kind": "effect", "description": "Rotate — button animation.", "selectors": [ ".sds-btn-rotate" ], "keyframes": [ "sds-btnRotate" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-scan", "displayName": "Scan", "category": "buttons", "kind": "effect", "description": "Scan — button animation.", "selectors": [ ".sds-btn-scan" ], "keyframes": [ "sds-btnScan" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-sheen-double", "displayName": "Sheen Double", "category": "buttons", "kind": "effect", "description": "Two sheens cross from opposite ends, flaring where they meet mid-button", "selectors": [ ".sds-btn-sheen-double", ".sds-btn-sheen-double::before, .sds-btn-sheen-double::after", ".sds-btn-sheen-double::before", ".sds-btn-sheen-double::after" ], "keyframes": [ "sds-btnSheenDoubleA", "sds-btnSheenDoubleB" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-sheen-pass", "displayName": "Sheen Pass", "category": "buttons", "kind": "effect", "description": "A glossy bar sweeps across at a skew with a brightness kiss at center", "selectors": [ ".sds-btn-sheen-pass", ".sds-btn-sheen-pass::before" ], "keyframes": [ "sds-btnSheenPass" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-shimmer", "displayName": "Shimmer", "category": "buttons", "kind": "effect", "description": "Shimmer — button animation.", "selectors": [ ".sds-btn-shimmer" ], "keyframes": [ "sds-btnShimmer" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-shock", "displayName": "Shockwave", "category": "buttons", "kind": "effect", "description": "Outline rings expand outward in a pulse", "selectors": [ ".sds-btn-shock" ], "keyframes": [ "sds-shockwave" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset", "outline-width" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset", "outline-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-shutter-snap", "displayName": "Shutter Snap", "category": "buttons", "kind": "effect", "description": "A diamond iris pinches almost closed, holds, then snaps open with overshoot", "selectors": [ ".sds-btn-shutter-snap" ], "keyframes": [ "sds-btnShutterSnap" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-slice-hover", "displayName": "Slice Hover", "category": "buttons", "kind": "effect", "description": "Top and bottom halves shear apart for two frames like a shutter glitch, then realign", "selectors": [ ".sds-btn-slice-hover" ], "keyframes": [ "sds-btnSliceHover" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-slice-reveal", "displayName": "Slice Reveal", "category": "buttons", "kind": "effect", "description": "Assembles as top and bottom edges arrive out of phase, sealing with a brightness flash", "selectors": [ ".sds-btn-slice-reveal" ], "keyframes": [ "sds-btnSliceReveal" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-spark-orbit", "displayName": "Spark Orbit", "category": "buttons", "kind": "effect", "description": "A glowing spark rides the button's outline in a full lap, dimming on the far side", "selectors": [ ".sds-btn-spark-orbit", ".sds-btn-spark-orbit::before" ], "keyframes": [ "sds-btnSparkOrbit" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary", "--sds-primary-glow" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-split", "displayName": "Split", "category": "buttons", "kind": "effect", "description": "Split — button animation.", "selectors": [ ".sds-btn-split" ], "keyframes": [ "sds-btnSplit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-spotlight-pan", "displayName": "Spotlight Pan", "category": "buttons", "kind": "effect", "description": "A soft radial spotlight pans corner to corner; the label brightens as it passes", "selectors": [ ".sds-btn-spotlight-pan", ".sds-btn-spotlight-pan::before" ], "keyframes": [ "sds-btnSpotlightPan" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-stretch", "displayName": "Stretch", "category": "buttons", "kind": "effect", "description": "Stretch — button animation.", "selectors": [ ".sds-btn-stretch" ], "keyframes": [ "sds-btnStretch" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-surge-charge", "displayName": "Surge Charge", "category": "buttons", "kind": "effect", "description": "Gathers (dims), surges bright with a halo flare, then calms — a three-act energy cycle", "selectors": [ ".sds-btn-surge-charge" ], "keyframes": [ "sds-btnSurgeCharge" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-swap-flip", "displayName": "Swap Flip", "category": "buttons", "kind": "effect", "description": "Icon and label trade a crossing gesture — passing each other with a dip, then re-seating", "selectors": [ ".sds-btn-swap-flip > *:first-child", ".sds-btn-swap-flip > *:last-child" ], "keyframes": [ "sds-btnSwapFlipA", "sds-btnSwapFlipB" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-swipe", "displayName": "Swipe", "category": "buttons", "kind": "effect", "description": "Swipe — button animation.", "selectors": [ ".sds-btn-swipe" ], "keyframes": [ "sds-btnSwipe" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tick-tock", "displayName": "Tick Tock", "category": "buttons", "kind": "effect", "description": "Metronome micro-rotation with an end-of-bar accent scale", "selectors": [ ".sds-btn-tick-tock" ], "keyframes": [ "sds-btnTickTock" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tilt", "displayName": "Tilt", "category": "buttons", "kind": "effect", "description": "Tilt — button animation.", "selectors": [ ".sds-btn-tilt" ], "keyframes": [ "sds-btnTilt" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tilt-float", "displayName": "Tilt Float", "category": "buttons", "kind": "effect", "description": "Levitates with a Y-bob, a 1.2° roll, and a drop-shadow that breathes with the height", "selectors": [ ".sds-btn-tilt-float" ], "keyframes": [ "sds-btnTiltFloat" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tilt-orbit", "displayName": "Tilt Orbit", "category": "buttons", "kind": "effect", "description": "The button leans through a slow elliptical orbit on two phase-shifted axes", "selectors": [ ".sds-btn-tilt-orbit" ], "keyframes": [ "sds-btnTiltOrbit" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tilt-pendulum", "displayName": "Tilt Pendulum", "category": "buttons", "kind": "effect", "description": "Hangs from its top edge and swings with natural decay, re-energizing each cycle", "selectors": [ ".sds-btn-tilt-pendulum" ], "keyframes": [ "sds-btnTiltPendulum" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-tilt-scan", "displayName": "Tilt Scan", "category": "buttons", "kind": "effect", "description": "Leans corner-to-corner with brief holds, as if scanning for the cursor", "selectors": [ ".sds-btn-tilt-scan" ], "keyframes": [ "sds-btnTiltScan" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-volt", "displayName": "Volt Strike", "category": "buttons", "kind": "effect", "description": "High-voltage border pulse", "selectors": [ ".sds-btn-volt" ], "keyframes": [ "sds-voltagePulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-warp", "displayName": "Warp", "category": "buttons", "kind": "effect", "description": "Warp — button animation.", "selectors": [ ".sds-btn-warp" ], "keyframes": [ "sds-btnWarp" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-btn-wink", "displayName": "Wink", "category": "buttons", "kind": "effect", "description": "A corner highlight blinks twice every few seconds, then keeps a straight face", "selectors": [ ".sds-btn-wink", ".sds-btn-wink::before" ], "keyframes": [ "sds-btnWink" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-accordion-in", "displayName": "Accordion In", "category": "cards", "kind": "effect", "description": "Children unfold sequentially from scaleY(0) at the top — like opening accordion panels.", "selectors": [ ".sds-card-accordion-in", ".sds-card-accordion-in > *", ".sds-card-accordion-in > *:nth-child(1)", ".sds-card-accordion-in > *:nth-child(2)", ".sds-card-accordion-in > *:nth-child(3)", ".sds-card-accordion-in > *:nth-child(4)" ], "keyframes": [ "sds-accordionIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-aurora", "displayName": "Aurora", "category": "cards", "kind": "effect", "description": "Aurora — card animation.", "selectors": [ ".sds-card-aurora" ], "keyframes": [ "sds-cardAurora" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-bloom", "displayName": "Bloom", "category": "cards", "kind": "effect", "description": "Bloom — card animation.", "selectors": [ ".sds-card-bloom" ], "keyframes": [ "sds-cardBloom" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-border-beam", "displayName": "Border Beam", "category": "cards", "kind": "effect", "description": "Single light bead orbits the card border continuously via CSS Motion Path (offset-path: border-box).", "selectors": [ ".sds-card-border-beam", ".sds-card-border-beam::before" ], "keyframes": [ "sds-borderBeamOrbit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-border-tide", "displayName": "Border Tide", "category": "cards", "kind": "effect", "description": "Twin light beads 180° apart chase each other around the border — tidal wave pattern.", "selectors": [ ".sds-card-border-tide", ".sds-card-border-tide::before", ".sds-card-border-tide::after" ], "keyframes": [ "sds-borderBeamOrbit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-bounce-in", "displayName": "Bounce In", "category": "cards", "kind": "effect", "description": "Entrance from below with spring overshoot — 5-stage oscillation settles at rest.", "selectors": [ ".sds-card-bounce-in" ], "keyframes": [ "sds-bounceIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-breath", "displayName": "Breath", "category": "cards", "kind": "effect", "description": "Breath — card animation.", "selectors": [ ".sds-card-breath" ], "keyframes": [ "sds-cardBreath" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-burst", "displayName": "Burst", "category": "cards", "kind": "effect", "description": "Burst — card animation.", "selectors": [ ".sds-card-burst" ], "keyframes": [ "sds-cardBurst" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-carousel-step", "displayName": "Carousel Step", "category": "cards", "kind": "effect", "description": "Cycles through four yaw poses (0°, −30°, −60°, −90°) with held pauses — mimics a rotating carousel.", "selectors": [ ".sds-card-carousel-step" ], "keyframes": [ "sds-carouselStep" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-cascade", "displayName": "Cascade", "category": "cards", "kind": "effect", "description": "Cascade — card animation.", "selectors": [ ".sds-card-cascade > *", ".sds-card-cascade > *:nth-child(1)", ".sds-card-cascade > *:nth-child(2)", ".sds-card-cascade > *:nth-child(3)", ".sds-card-cascade > *:nth-child(4)", ".sds-card-cascade > *:nth-child(5)", ".sds-card-cascade > *:nth-child(6)" ], "keyframes": [ "sds-cardCascadeChild" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-checker", "displayName": "Checker", "category": "cards", "kind": "effect", "description": "Four quadrant children scale in as two alternating diagonal pairs. Requires 4 child elements.", "selectors": [ ".sds-card-checker", ".sds-card-checker > *", ".sds-card-checker > *:nth-child(1), .sds-card-checker > *:nth-child(4)", ".sds-card-checker > *:nth-child(2), .sds-card-checker > *:nth-child(3)" ], "keyframes": [ "sds-checkerPop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-cinematic", "displayName": "Cinematic Reveal", "category": "cards", "kind": "effect", "description": "Wipes open from center via clip-path", "selectors": [ ".sds-card-cinematic" ], "keyframes": [ "sds-cinematicReveal" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-content-flood", "displayName": "Content Flood", "category": "cards", "kind": "effect", "description": "Diagonal clip-path floods from the top-left corner, filling the card in two sweeping phases.", "selectors": [ ".sds-card-content-flood" ], "keyframes": [ "sds-contentFlood" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-corner-charge", "displayName": "Corner Charge", "category": "cards", "kind": "effect", "description": "Diagonal corner pairs (top-right + bottom-left) flash in alternating rhythm — energy charge effect.", "selectors": [ ".sds-card-corner-charge", ".sds-card-corner-charge::before", ".sds-card-corner-charge::after" ], "keyframes": [ "sds-cornerChargeKf" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-crystal-pulse", "displayName": "Crystal Pulse", "category": "cards", "kind": "effect", "description": "Brightness + contrast + scale pulse — card catches light like a crystal facet.", "selectors": [ ".sds-card-crystal-pulse" ], "keyframes": [ "sds-crystalPulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-curtain-fall", "displayName": "Curtain Fall", "category": "cards", "kind": "effect", "description": "A dark curtain drops from above, holds, then retracts to reveal the card — theatre-stage entrance.", "selectors": [ ".sds-card-curtain-fall", ".sds-card-curtain-fall::before" ], "keyframes": [ "sds-curtainFallKf" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-deal-arc", "displayName": "Deal Arc", "category": "cards", "kind": "effect", "description": "Entrance: card arcs in from upper-left with −18° rotation — classic card-deal motion.", "selectors": [ ".sds-card-deal-arc" ], "keyframes": [ "sds-dealArc" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-deck-cycle", "displayName": "Deck Cycle", "category": "cards", "kind": "effect", "description": "Perspective yaw cycle — card tips 22° and returns, mimicking thumbing through a deck.", "selectors": [ ".sds-card-deck-cycle" ], "keyframes": [ "sds-deckCycle" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-deck-peek", "displayName": "Deck Peek", "category": "cards", "kind": "effect", "description": "Two ghost cards peek from behind the main card with staggered offset-rotate on a loop.", "selectors": [ ".sds-card-deck-peek", ".sds-card-deck-peek::before", ".sds-card-deck-peek::after" ], "keyframes": [ "sds-deckPeekB", "sds-deckPeekA" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-deep-float", "displayName": "Deep Float", "category": "cards", "kind": "effect", "description": "Deep Float — card animation.", "selectors": [ ".sds-card-deep-float" ], "keyframes": [ "sds-cardDeepFloat" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-depth", "displayName": "Depth", "category": "cards", "kind": "effect", "description": "Depth — card animation.", "selectors": [ ".sds-card-depth" ], "keyframes": [ "sds-parallaxDepth" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": "sds-card-parallax", "sinceVersion": "4.0.3" }, { "name": "sds-card-diagonal-wipe", "displayName": "Diagonal Wipe", "category": "cards", "kind": "effect", "description": "Polygon clip sweeps diagonally from left; a 2 px brightness seam rides the clip edge at reveal.", "selectors": [ ".sds-card-diagonal-wipe" ], "keyframes": [ "sds-diagWipe" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-dive", "displayName": "Dive", "category": "cards", "kind": "effect", "description": "Entrance from overhead: rotateX 65° + upward translate, blur clears on two-stage deceleration brake.", "selectors": [ ".sds-card-dive" ], "keyframes": [ "sds-cardDive" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-door-peek", "displayName": "Door Peek", "category": "cards", "kind": "effect", "description": "Card pivots open −18° on its left hinge, holds, then swings shut — like a door ajar.", "selectors": [ ".sds-card-door-peek" ], "keyframes": [ "sds-doorPeek" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-drift", "displayName": "Drift", "category": "cards", "kind": "effect", "description": "Drift — card animation.", "selectors": [ ".sds-card-drift" ], "keyframes": [ "sds-cardDrift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-edge-scan", "displayName": "Edge Scan", "category": "cards", "kind": "effect", "description": "Gloss scan line sweeps across top then bottom edge in sequence — scanner/lidar aesthetic.", "selectors": [ ".sds-card-edge-scan", ".sds-card-edge-scan::before", ".sds-card-edge-scan::after" ], "keyframes": [ "sds-edgeScanKf" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-elastic-drop", "displayName": "Elastic Drop", "category": "cards", "kind": "effect", "description": "Drops from 55 px above with 3-cycle scaleY oscillation — bungee-cord physics.", "selectors": [ ".sds-card-elastic-drop" ], "keyframes": [ "sds-elasticDrop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-electric", "displayName": "Electric", "category": "cards", "kind": "effect", "description": "Electric — card animation.", "selectors": [ ".sds-card-electric" ], "keyframes": [ "sds-cardElectric" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-expand", "displayName": "Expand", "category": "cards", "kind": "effect", "description": "Expand — card animation.", "selectors": [ ".sds-card-expand" ], "keyframes": [ "sds-cardExpand" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-fan-spread", "displayName": "Fan Spread", "category": "cards", "kind": "effect", "description": "Children rotate out from their shared bottom-left corner with stagger — playing-card fan open.", "selectors": [ ".sds-card-fan-spread > *", ".sds-card-fan-spread > *:nth-child(1)", ".sds-card-fan-spread > *:nth-child(2)", ".sds-card-fan-spread > *:nth-child(3)", ".sds-card-fan-spread > *:nth-child(4)" ], "keyframes": [ "sds-fanSpread1", "sds-fanSpread2", "sds-fanSpread3", "sds-fanSpread4" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-flip", "displayName": "Flip", "category": "cards", "kind": "effect", "description": "Flip — card animation.", "selectors": [ ".sds-card-flip" ], "keyframes": [ "sds-sliceUp" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": "sds-card-slice", "sinceVersion": "4.0.3" }, { "name": "sds-card-flip-loop", "displayName": "Flip Loop", "category": "cards", "kind": "effect", "description": "Full 360° Y-axis rotation; brightness dips to 35% at the 90° and 270° edges, elastic overshoot on landing.", "selectors": [ ".sds-card-flip-loop" ], "keyframes": [ "sds-flipLoop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-flip-reveal", "displayName": "Flip Reveal", "category": "cards", "kind": "effect", "description": "Flip Reveal — card animation.", "selectors": [ ".sds-card-flip-reveal" ], "keyframes": [ "sds-cardFlipReveal" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-float", "displayName": "Ambient Float", "category": "cards", "kind": "effect", "description": "Gentle floating with shadow growth", "selectors": [ ".sds-card-float", ".sds-card-float, .sds-card-holo, .sds-card-magnetic, .sds-card-tilt, .sds-card-drift, .sds-card-levitate, .sds-card-deep-float" ], "keyframes": [ "sds-ambientFloat" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-float-gimbal", "displayName": "Float Gimbal", "category": "cards", "kind": "effect", "description": "Gentle levitation loop with micro counter-rotations on both axes — stabiliser-gimbal quality.", "selectors": [ ".sds-card-float-gimbal" ], "keyframes": [ "sds-floatGimbal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-fold", "displayName": "Fold", "category": "cards", "kind": "effect", "description": "Fold — card animation.", "selectors": [ ".sds-card-fold" ], "keyframes": [ "sds-cardFold" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-force", "displayName": "Force", "category": "cards", "kind": "effect", "description": "Force — card animation.", "selectors": [ ".sds-card-force" ], "keyframes": [ "sds-cardForce" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-frame-breathe", "displayName": "Frame Breathe", "category": "cards", "kind": "effect", "description": "The card's border ring pulses opacity and blur in a slow 2.4 s breath cycle.", "selectors": [ ".sds-card-frame-breathe", ".sds-card-frame-breathe::before" ], "keyframes": [ "sds-frameBreathKf" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-frame-draw", "displayName": "Frame Draw", "category": "cards", "kind": "effect", "description": "The card's border ring is drawn in left to right via clip-path — drawn-on feel.", "selectors": [ ".sds-card-frame-draw", ".sds-card-frame-draw::before" ], "keyframes": [ "sds-frameDrawKf" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-free-fall", "displayName": "Free Fall", "category": "cards", "kind": "effect", "description": "Gravity-curve fall from 64 px above; blur clears on a two-stage deceleration.", "selectors": [ ".sds-card-free-fall" ], "keyframes": [ "sds-freeFall" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-glass", "displayName": "Glass", "category": "cards", "kind": "effect", "description": "Glass — card animation.", "selectors": [ ".sds-card-glass" ], "keyframes": [ "sds-cardGlass" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "-webkit-backdrop-filter", "backdrop-filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-glass-frost", "displayName": "Glass Frost", "category": "cards", "kind": "effect", "description": "Blur + brightness frost cycle — card appears to ice over and clear on a 3.5 s loop.", "selectors": [ ".sds-card-glass-frost" ], "keyframes": [ "sds-glassFrost" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-glass-wipe", "displayName": "Glass Wipe", "category": "cards", "kind": "effect", "description": "Frosted-glass strip (blurred translucent slab) sweeps across the card with a skew.", "selectors": [ ".sds-card-glass-wipe", ".sds-card-glass-wipe::before" ], "keyframes": [ "sds-glassWipe" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-glitch", "displayName": "Glitch", "category": "cards", "kind": "effect", "description": "Glitch — card animation.", "selectors": [ ".sds-card-glitch" ], "keyframes": [ "sds-cardGlitch" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-glow", "displayName": "Glow Surge", "category": "cards", "kind": "effect", "description": "Breathing outer glow on a card", "selectors": [ ".sds-card-glow" ], "keyframes": [ "sds-glowSurge" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-gravity", "displayName": "Gravity", "category": "cards", "kind": "effect", "description": "Gravity — card animation.", "selectors": [ ".sds-card-gravity" ], "keyframes": [ "sds-cardGravity" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-holo", "displayName": "Holographic Tilt", "category": "cards", "kind": "effect", "description": "Rotates on X/Y with hue shift effect", "selectors": [ ".sds-card-holo" ], "keyframes": [ "sds-holographicTilt" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-hue-shift", "displayName": "Hue Shift", "category": "cards", "kind": "effect", "description": "Full 360° hue-rotate sweep — prismatic rainbow wash cycling through the card.", "selectors": [ ".sds-card-hue-shift" ], "keyframes": [ "sds-hueShift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-bob", "displayName": "Idle Bob", "category": "cards", "kind": "effect", "description": "Gentle 8 px vertical float — calm levitation ambient.", "selectors": [ ".sds-card-idle-bob" ], "keyframes": [ "sds-idleBob" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-breathe", "displayName": "Idle Breathe", "category": "cards", "kind": "effect", "description": "Micro scale pulse 1 → 1.018 — barely perceptible ambient breath.", "selectors": [ ".sds-card-idle-breathe" ], "keyframes": [ "sds-idleBreathe" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-glow", "displayName": "Idle Glow", "category": "cards", "kind": "effect", "description": "drop-shadow glow breathes in and out on a 2.8 s loop.", "selectors": [ ".sds-card-idle-glow" ], "keyframes": [ "sds-idleGlow" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-pulse", "displayName": "Idle Pulse", "category": "cards", "kind": "effect", "description": "Scale + opacity pulse — subtle attention-seeking ambient loop.", "selectors": [ ".sds-card-idle-pulse" ], "keyframes": [ "sds-idlePulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-rock", "displayName": "Idle Rock", "category": "cards", "kind": "effect", "description": "±2° rotation rock — gentle pendulum ambient on a 3.5 s loop.", "selectors": [ ".sds-card-idle-rock" ], "keyframes": [ "sds-idleRock" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-idle-sway", "displayName": "Idle Sway", "category": "cards", "kind": "effect", "description": "Slow ±6 px lateral sway on a 4 s ease-in-out loop.", "selectors": [ ".sds-card-idle-sway" ], "keyframes": [ "sds-idleSway" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-ink", "displayName": "Ink", "category": "cards", "kind": "effect", "description": "Ink — card animation.", "selectors": [ ".sds-card-ink" ], "keyframes": [ "sds-cardInk" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-iris", "displayName": "Iris", "category": "cards", "kind": "effect", "description": "Iris — card animation.", "selectors": [ ".sds-card-iris" ], "keyframes": [ "sds-cardIris" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-iris-bloom", "displayName": "Iris Bloom", "category": "cards", "kind": "effect", "description": "Iris opens from an off-centre point with a brightness flare at full aperture, then settles.", "selectors": [ ".sds-card-iris-bloom" ], "keyframes": [ "sds-irisBloom" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-layers", "displayName": "Layers", "category": "cards", "kind": "effect", "description": "Children bob at staggered amplitudes (5 px → 13 px) for a parallax depth illusion. Requires child elements.", "selectors": [ ".sds-card-layers > *:nth-child(1)", ".sds-card-layers > *:nth-child(2)", ".sds-card-layers > *:nth-child(3)" ], "keyframes": [ "sds-layerBobA", "sds-layerBobB", "sds-layerBobC" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-lens-bulge", "displayName": "Lens Bulge", "category": "cards", "kind": "effect", "description": "Subtle scale + perspective pulse that mimics a magnifying lens swelling and receding.", "selectors": [ ".sds-card-lens-bulge" ], "keyframes": [ "sds-lensBulge" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-letterbox", "displayName": "Letterbox", "category": "cards", "kind": "effect", "description": "Cinematic black bars part vertically while card content scales 1.04 → 1.", "selectors": [ ".sds-card-letterbox" ], "keyframes": [ "sds-letterbox" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-levitate", "displayName": "Levitate", "category": "cards", "kind": "effect", "description": "Levitate — card animation.", "selectors": [ ".sds-card-levitate" ], "keyframes": [ "sds-cardLevitate" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-liquid-border", "displayName": "Liquid Border", "category": "cards", "kind": "effect", "description": "Liquid Border — card animation.", "selectors": [ ".sds-card-liquid-border" ], "keyframes": [ "sds-cardLiquidBorder" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-magnetic", "displayName": "Magnetic Hover", "category": "cards", "kind": "effect", "description": "Lifts and rotates slightly in a float", "selectors": [ ".sds-card-magnetic" ], "keyframes": [ "sds-magneticHover" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-momentum", "displayName": "Momentum", "category": "cards", "kind": "effect", "description": "Momentum — card animation.", "selectors": [ ".sds-card-momentum" ], "keyframes": [ "sds-cardMomentum" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-morph", "displayName": "Morph", "category": "cards", "kind": "effect", "description": "Morph — card animation.", "selectors": [ ".sds-card-morph" ], "keyframes": [ "sds-cardMorph" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-neon", "displayName": "Neon", "category": "cards", "kind": "effect", "description": "Neon — card animation.", "selectors": [ ".sds-card-neon" ], "keyframes": [ "sds-glowSurge" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": "sds-card-glow", "sinceVersion": "4.0.3" }, { "name": "sds-card-neon-border", "displayName": "Neon Border", "category": "cards", "kind": "effect", "description": "Neon Border — card animation.", "selectors": [ ".sds-card-neon-border" ], "keyframes": [ "sds-cardNeonBorder" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-parallax", "displayName": "Parallax Depth", "category": "cards", "kind": "effect", "description": "Perspective rotateX with Z push", "selectors": [ ".sds-card-parallax" ], "keyframes": [ "sds-parallaxDepth" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-pinball", "displayName": "Pinball", "category": "cards", "kind": "effect", "description": "Enters with 4 direction changes and rotation damping — pinball ricochet physics.", "selectors": [ ".sds-card-pinball" ], "keyframes": [ "sds-pinball" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-portal", "displayName": "Depth Portal", "category": "cards", "kind": "effect", "description": "Flies in from deep Z perspective", "selectors": [ ".sds-card-portal" ], "keyframes": [ "sds-depthPortal" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-prism", "displayName": "Prism", "category": "cards", "kind": "effect", "description": "Prism — card animation.", "selectors": [ ".sds-card-prism" ], "keyframes": [ "sds-cardPrism" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-refract-slide", "displayName": "Refract Slide", "category": "cards", "kind": "effect", "description": "Diagonal caustic-light beam (blurred 135° gradient) slides across the card surface.", "selectors": [ ".sds-card-refract-slide", ".sds-card-refract-slide::before" ], "keyframes": [ "sds-refractSlide" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-reveal-stack", "displayName": "Reveal Stack", "category": "cards", "kind": "effect", "description": "Children slide up from beneath with 100 ms stagger — like cards fanning out of a deck.", "selectors": [ ".sds-card-reveal-stack > *:nth-child(1)", ".sds-card-reveal-stack > *:nth-child(2)", ".sds-card-reveal-stack > *:nth-child(3)", ".sds-card-reveal-stack > *:nth-child(4)" ], "keyframes": [ "sds-revealStack" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-rise", "displayName": "Rise", "category": "cards", "kind": "effect", "description": "Rise — card animation.", "selectors": [ ".sds-card-rise" ], "keyframes": [ "sds-cardRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-rotate", "displayName": "Rotate", "category": "cards", "kind": "effect", "description": "Rotate — card animation.", "selectors": [ ".sds-card-rotate" ], "keyframes": [ "sds-cardRotate" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-rubber-band", "displayName": "Rubber Band", "category": "cards", "kind": "effect", "description": "scaleX/scaleY squeeze-stretch alternation — rubber-band snap entrance.", "selectors": [ ".sds-card-rubber-band" ], "keyframes": [ "sds-cardRubberBand" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-scan", "displayName": "Scan", "category": "cards", "kind": "effect", "description": "Scan — card animation.", "selectors": [ ".sds-card-scan" ], "keyframes": [ "sds-cardScan" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-shadow-lift", "displayName": "Shadow Lift", "category": "cards", "kind": "effect", "description": "Shadow Lift — card animation.", "selectors": [ ".sds-card-shadow-lift" ], "keyframes": [ "sds-cardShadowLift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-shimmer", "displayName": "Refraction Shimmer", "category": "cards", "kind": "effect", "description": "Diagonal shimmer background cycles", "selectors": [ ".sds-card-shimmer" ], "keyframes": [ "sds-refractionShimmer" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-shuffle-deal", "displayName": "Shuffle Deal", "category": "cards", "kind": "effect", "description": "Entrance: card is dealt from upper-left with a diagonal translate and −14° rotation.", "selectors": [ ".sds-card-shuffle-deal" ], "keyframes": [ "sds-shuffleDeal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-shutter", "displayName": "Shutter", "category": "cards", "kind": "effect", "description": "Five stepped horizontal reveals — mechanical shutter feel via steps(5) clip-path inset.", "selectors": [ ".sds-card-shutter" ], "keyframes": [ "sds-cardShutter" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-slice", "displayName": "Slice Up", "category": "cards", "kind": "effect", "description": "Children slice up in sequence", "selectors": [ ".sds-card-slice", ".sds-card-slice > *", ".sds-card-slice > *:nth-child(1)", ".sds-card-slice > *:nth-child(2)", ".sds-card-slice > *:nth-child(3)", ".sds-card-slice > *:nth-child(4)" ], "keyframes": [ "sds-sliceUp" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-slingshot", "displayName": "Slingshot", "category": "cards", "kind": "effect", "description": "Launched from lower-left on a diagonal arc with deceleration overshoot and settle.", "selectors": [ ".sds-card-slingshot" ], "keyframes": [ "sds-slingshot" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-smoke", "displayName": "Smoke", "category": "cards", "kind": "effect", "description": "Smoke — card animation.", "selectors": [ ".sds-card-smoke" ], "keyframes": [ "sds-cardSmoke" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-snap", "displayName": "Snap", "category": "cards", "kind": "effect", "description": "Snap — card animation.", "selectors": [ ".sds-card-snap" ], "keyframes": [ "sds-cardSnap" ], "tokensUsed": [ "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-snap-back", "displayName": "Snap Back", "category": "cards", "kind": "effect", "description": "Overshoots right, snaps back left with rotation settle — stretched-elastic return.", "selectors": [ ".sds-card-snap-back" ], "keyframes": [ "sds-snapBack" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-spiral-reveal", "displayName": "Spiral Reveal", "category": "cards", "kind": "effect", "description": "Radar wedge sweeps 360° clockwise from 12 o'clock, revealing the card as it goes.", "selectors": [ ".sds-card-spiral-reveal" ], "keyframes": [ "sds-spiralReveal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-spotlight", "displayName": "Spotlight", "category": "cards", "kind": "effect", "description": "Spotlight — card animation.", "selectors": [ ".sds-card-spotlight" ], "keyframes": [ "sds-cardSpotlight" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-spring", "displayName": "Spring", "category": "cards", "kind": "effect", "description": "Spring — card animation.", "selectors": [ ".sds-card-spring" ], "keyframes": [ "sds-cardSpring" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-stack-drop", "displayName": "Stack Drop", "category": "cards", "kind": "effect", "description": "Entrance: card drops from 38 px above with a two-stage deceleration brake.", "selectors": [ ".sds-card-stack-drop" ], "keyframes": [ "sds-stackDrop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-stack-pop", "displayName": "Stack Pop", "category": "cards", "kind": "effect", "description": "Card lifts from its stack with rising translateY and a growing drop-shadow on a 2.2 s loop.", "selectors": [ ".sds-card-stack-pop" ], "keyframes": [ "sds-stackPop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-stagger", "displayName": "Stagger", "category": "cards", "kind": "effect", "description": "Stagger — card animation.", "selectors": [ ".sds-card-stagger", ".sds-card-stagger > *", ".sds-card-stagger > *:nth-child(1)", ".sds-card-stagger > *:nth-child(2)", ".sds-card-stagger > *:nth-child(3)", ".sds-card-stagger > *:nth-child(4)", ".sds-card-stagger > *:nth-child(5)", ".sds-card-stagger > *:nth-child(6)" ], "keyframes": [ "sds-cardStaggerChild" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-tear", "displayName": "Tear", "category": "cards", "kind": "effect", "description": "Jagged clip-path rips diagonally from the top-left corner with a paper-curl rotate.", "selectors": [ ".sds-card-tear" ], "keyframes": [ "sds-cardTear" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-tilt", "displayName": "Tilt", "category": "cards", "kind": "effect", "description": "Tilt — card animation.", "selectors": [ ".sds-card-tilt" ], "keyframes": [ "sds-cardTilt" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-tilt-orbit", "displayName": "Tilt Orbit", "category": "cards", "kind": "effect", "description": "Slow elliptical perspective lean — phase-shifted rotateX/rotateY on a 6 s loop, drop-shadow traces the tilt.", "selectors": [ ".sds-card-tilt-orbit", ".sds-card-tilt-orbit, .sds-card-door-peek, .sds-card-flip-loop, .sds-card-carousel-step, .sds-card-dive, .sds-card-float-gimbal" ], "keyframes": [ "sds-tiltOrbit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-unfold", "displayName": "Unfold", "category": "cards", "kind": "effect", "description": "Unfold — card animation.", "selectors": [ ".sds-card-unfold" ], "keyframes": [ "sds-cardUnfold" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-unpack", "displayName": "Unpack", "category": "cards", "kind": "effect", "description": "Card spring-expands from a compressed scaleY(0.25) / rotateX state — box-opening effect.", "selectors": [ ".sds-card-unpack" ], "keyframes": [ "sds-unpack" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-vortex", "displayName": "Vortex", "category": "cards", "kind": "effect", "description": "Vortex — card animation.", "selectors": [ ".sds-card-vortex" ], "keyframes": [ "sds-cardVortex" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-warp", "displayName": "Warp Gate", "category": "cards", "kind": "effect", "description": "Rotates in from -90° on the Y axis", "selectors": [ ".sds-card-warp" ], "keyframes": [ "sds-warpGate" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-card-wave", "displayName": "Wave", "category": "cards", "kind": "effect", "description": "Wave — card animation.", "selectors": [ ".sds-card-wave" ], "keyframes": [ "sds-cardWave" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-center-burst", "displayName": "Center Burst", "category": "text", "kind": "effect", "description": "Chars start at center, fan out", "selectors": [ ".sds-center-burst .sds-char" ], "keyframes": [ "sds-centerBurst" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-char-orbit", "displayName": "Char Orbit", "category": "text", "kind": "effect", "description": "Orbits in from above with rotation", "selectors": [ ".sds-char-orbit", ".sds-char-orbit .sds-char" ], "keyframes": [ "sds-charOrbit", "sds-charOrbitBob" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-chromatic-shift", "displayName": "Chromatic Shift", "category": "text", "kind": "effect", "description": "Slow hue-rotate + saturate colour cycle", "selectors": [ ".sds-chromatic-shift" ], "keyframes": [ "sds-chromaticShift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-cinema-title", "displayName": "Cinema Title", "category": "text", "kind": "effect", "description": "Letter-spacing collapses with blur in cinematic style", "selectors": [ ".sds-cinema-title" ], "keyframes": [ "sds-cinematicTitle" ], "tokensUsed": [ "--sds-duration-slow", "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-cipher-reveal", "displayName": "Cipher Reveal", "category": "text", "kind": "effect", "description": "Brightness and blur resolve like decryption", "selectors": [ ".sds-cipher-reveal" ], "keyframes": [ "sds-cipherReveal" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "color", "filter", "letter-spacing", "opacity" ], "animatedPaintProps": [ "color" ], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-color-cycle", "displayName": "Color Cycle", "category": "text", "kind": "effect", "description": "Cycles through a flowing gradient (loop)", "selectors": [ ".sds-color-cycle" ], "keyframes": [ "sds-colorCycle" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position", "filter" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-data-stream", "displayName": "Data Stream", "category": "text", "kind": "effect", "description": "Clip-path + brightness data-decode entrance", "selectors": [ ".sds-data-stream" ], "keyframes": [ "sds-dataStream" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-1", "displayName": "Delay 1", "category": "modifiers", "kind": "modifier", "description": "Delay 1 — playback modifier.", "selectors": [ ".sds-delay-1" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-10", "displayName": "Delay 10", "category": "modifiers", "kind": "modifier", "description": "Delay 10 — playback modifier.", "selectors": [ ".sds-delay-10" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-2", "displayName": "Delay 2", "category": "modifiers", "kind": "modifier", "description": "Delay 2 — playback modifier.", "selectors": [ ".sds-delay-2" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-3", "displayName": "Delay 3", "category": "modifiers", "kind": "modifier", "description": "Delay 3 — playback modifier.", "selectors": [ ".sds-delay-3" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-4", "displayName": "Delay 4", "category": "modifiers", "kind": "modifier", "description": "Delay 4 — playback modifier.", "selectors": [ ".sds-delay-4" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-5", "displayName": "Delay 5", "category": "modifiers", "kind": "modifier", "description": "Delay 5 — playback modifier.", "selectors": [ ".sds-delay-5" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-6", "displayName": "Delay 6", "category": "modifiers", "kind": "modifier", "description": "Delay 6 — playback modifier.", "selectors": [ ".sds-delay-6" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-delay-8", "displayName": "Delay 8", "category": "modifiers", "kind": "modifier", "description": "Delay 8 — playback modifier.", "selectors": [ ".sds-delay-8" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-depth-charge", "displayName": "Depth Charge", "category": "text", "kind": "effect", "description": "Deep warp from Z-space with delay", "selectors": [ ".sds-depth-charge" ], "keyframes": [ "sds-depthWarp" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-depth-warp", "displayName": "Depth Warp", "category": "text", "kind": "effect", "description": "Flies in from deep Z-space", "selectors": [ ".sds-depth-warp" ], "keyframes": [ "sds-depthWarp" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-door-open", "displayName": "Door Open", "category": "text", "kind": "effect", "description": "Swings open like a door in 3D", "selectors": [ ".sds-door-open" ], "keyframes": [ "sds-doorOpen" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-drop-bounce", "displayName": "Drop Bounce", "category": "text", "kind": "effect", "description": "Drops and bounces on the floor", "selectors": [ ".sds-drop-bounce" ], "keyframes": [ "sds-dropBounce" ], "tokensUsed": [ "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-drop-settle", "displayName": "Drop & Settle", "category": "text", "kind": "effect", "description": "Per-char staggered fall from above", "selectors": [ ".sds-drop-settle .sds-char" ], "keyframes": [ "sds-dropSettle" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-echo-out", "displayName": "Echo Out", "category": "text", "kind": "effect", "description": "Casts a layered echo shadow", "selectors": [ ".sds-echo-out" ], "keyframes": [ "sds-echoOut" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "opacity", "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-elastic-bounce", "displayName": "Elastic Bounce", "category": "text", "kind": "effect", "description": "Spring overshoot with cubic-bezier(0.34,1.56,0.64,1)", "selectors": [ ".sds-elastic-bounce" ], "keyframes": [ "sds-elasticBounce" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-elastic-stamp", "displayName": "Elastic Stamp", "category": "text", "kind": "effect", "description": "Scales in from zero with elastic rotation", "selectors": [ ".sds-elastic-stamp" ], "keyframes": [ "sds-elasticStamp" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-explode-formation", "displayName": "Explode Formation", "category": "text", "kind": "effect", "description": "Scattered start, spring to position", "selectors": [ ".sds-explode-formation .sds-char" ], "keyframes": [ "sds-explodeFormation" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-fast", "displayName": "Fast", "category": "modifiers", "kind": "modifier", "description": "Fast — playback modifier.", "selectors": [ ".sds-fast" ], "keyframes": [], "tokensUsed": [ "--sds-duration-fast" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-fill-both", "displayName": "Fill Both", "category": "modifiers", "kind": "modifier", "description": "Fill Both — playback modifier.", "selectors": [ ".sds-fill-both" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-fill-forward", "displayName": "Fill Forward", "category": "modifiers", "kind": "modifier", "description": "Fill Forward — playback modifier.", "selectors": [ ".sds-fill-forward" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-film-burn", "displayName": "Film Burn", "category": "text", "kind": "effect", "description": "Sepia-tinted focus-pull entrance", "selectors": [ ".sds-film-burn" ], "keyframes": [ "sds-phantomBlur" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-flicker-on", "displayName": "Flicker On", "category": "text", "kind": "effect", "description": "Light-bulb turn-on with stepped opacity flicker", "selectors": [ ".sds-flicker-on" ], "keyframes": [ "sds-flickerOn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-flip-x", "displayName": "Flip X", "category": "text", "kind": "effect", "description": "Flips in on the X axis", "selectors": [ ".sds-flip-x" ], "keyframes": [ "sds-flipX" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-flip-y", "displayName": "Flip Y", "category": "text", "kind": "effect", "description": "Flips in on the Y axis", "selectors": [ ".sds-flip-y" ], "keyframes": [ "sds-flipY" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-float-bob", "displayName": "Float Bob", "category": "text", "kind": "effect", "description": "Gently floats and bobs (loop)", "selectors": [ ".sds-float-bob" ], "keyframes": [ "sds-floatBob" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-focus-pull", "displayName": "Focus Pull", "category": "text", "kind": "effect", "description": "Camera-focus pull from soft to sharp", "selectors": [ ".sds-focus-pull" ], "keyframes": [ "sds-focusPull" ], "tokensUsed": [ "--sds-duration" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-fold-down", "displayName": "Fold Down", "category": "text", "kind": "effect", "description": "Folds down into view on a 3D hinge", "selectors": [ ".sds-fold-down" ], "keyframes": [ "sds-foldDown" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-fold-up", "displayName": "Fold Up", "category": "text", "kind": "effect", "description": "Folds up into view on a 3D hinge", "selectors": [ ".sds-fold-up" ], "keyframes": [ "sds-foldUp" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-glitch-flicker", "displayName": "Glitch Flicker", "category": "text", "kind": "effect", "description": "Flickering analog noise with slicing displacement", "selectors": [ ".sds-glitch-flicker" ], "keyframes": [ "sds-glitchFlicker" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "opacity", "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-glitch-slide", "displayName": "Glitch Slide", "category": "text", "kind": "effect", "description": "Glitch-steps into place", "selectors": [ ".sds-glitch-slide" ], "keyframes": [ "sds-glitchSlide" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "clip-path", "color", "transform" ], "animatedPaintProps": [ "color" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-glow-pulse", "displayName": "Glow Pulse", "category": "text", "kind": "effect", "description": "Pulses with a soft neon glow (loop)", "selectors": [ ".sds-glow-pulse" ], "keyframes": [ "sds-glowPulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-gradient-sweep", "displayName": "Gradient Sweep", "category": "text", "kind": "effect", "description": "Moving gradient mask over the text", "selectors": [ ".sds-gradient-sweep" ], "keyframes": [ "sds-gradSweep" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-grand-entrance", "displayName": "Grand Entrance", "category": "text", "kind": "effect", "description": "Big orchestrated scale-blur entrance", "selectors": [ ".sds-grand-entrance" ], "keyframes": [ "sds-grandEntrance" ], "tokensUsed": [ "--sds-duration-slow", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-gravity-bounce", "displayName": "Gravity Bounce", "category": "text", "kind": "effect", "description": "Falls under gravity, inelastic floor bounce", "selectors": [ ".sds-gravity-bounce" ], "keyframes": [ "sds-gravityBounce" ], "tokensUsed": [ "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-gravity-drop", "displayName": "Gravity Drop", "category": "text", "kind": "effect", "description": "Falls from above with overshoot bounce", "selectors": [ ".sds-gravity-drop" ], "keyframes": [ "sds-gravityDrop" ], "tokensUsed": [ "--sds-duration", "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-heartbeat-text", "displayName": "Heartbeat", "category": "text", "kind": "effect", "description": "Beats like a heartbeat (loop)", "selectors": [ ".sds-heartbeat-text" ], "keyframes": [ "sds-heartbeatText" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-heat-shimmer", "displayName": "Heat Shimmer", "category": "text", "kind": "effect", "description": "Subtle heat-distortion skewX + scaleY loop", "selectors": [ ".sds-heat-shimmer" ], "keyframes": [ "sds-heatShimmer" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-highlight-burn", "displayName": "Highlight Burn", "category": "text", "kind": "effect", "description": "Highlight marker swipes across the text", "selectors": [ ".sds-highlight-burn" ], "keyframes": [ "sds-highlightBurn" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [ "--sds-primary-dim" ], "compositorSafe": false, "loop": false, "animatedProps": [ "background-size" ], "animatedPaintProps": [ "background-size" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-hologram-text", "displayName": "Hologram Text", "category": "text", "kind": "effect", "description": "Holographic skew flicker with hue rotation", "selectors": [ ".sds-hologram-text" ], "keyframes": [ "sds-hologramText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-in", "displayName": "In", "category": "infrastructure", "kind": "infrastructure", "description": "In — infrastructure animation.", "selectors": [ "[data-sds-scroll].sds-in[class*=\"sds-scroll-\"]" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-ink-bleed", "displayName": "Ink Bleed", "category": "text", "kind": "effect", "description": "Letter-spacing collapses as blur resolves", "selectors": [ ".sds-ink-bleed" ], "keyframes": [ "sds-inkBleed" ], "tokensUsed": [ "--sds-duration", "--sds-duration-slow", "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-active-line", "displayName": "Active Line", "category": "inputs", "kind": "effect", "description": "Active Line — input animation.", "selectors": [ ".sds-input-active-line" ], "keyframes": [ "sds-inputActiveLine" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-bottom-color", "box-shadow" ], "animatedPaintProps": [ "border-bottom-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-drop", "displayName": "Arrive Drop", "category": "inputs", "kind": "effect", "description": "Drops in from above and lands with a squash while its shadow snaps up to meet it", "selectors": [ ".sds-input-arrive-drop" ], "keyframes": [ "sds-inputArriveDrop" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-materialize", "displayName": "Arrive Materialize", "category": "inputs", "kind": "effect", "description": "Assembles in stepped slices out of blur and brightness, left to right", "selectors": [ ".sds-input-arrive-materialize" ], "keyframes": [ "sds-inputArriveMaterialize" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-pendulum", "displayName": "Arrive Pendulum", "category": "inputs", "kind": "effect", "description": "Swings in from a top hinge through two decaying swings, then levels out", "selectors": [ ".sds-input-arrive-pendulum" ], "keyframes": [ "sds-inputArrivePendulum" ], "tokensUsed": [ "--sds-duration-slow", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-slide-label", "displayName": "Arrive Slide Label", "category": "inputs", "kind": "effect", "description": "The field slides in from the left as its label drops from above, meeting with a synced bounce", "selectors": [ ".sds-input-arrive-slide-label", ".sds-input-arrive-slide-label label", ".sds-input-arrive-slide-label input" ], "keyframes": [ "sds-inputArriveLabelDrop", "sds-inputArriveFieldSlide" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-decelerate", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-spotlight", "displayName": "Arrive Spotlight", "category": "inputs", "kind": "effect", "description": "A dark veil lifts as a spotlight passes over the arriving field", "selectors": [ ".sds-input-arrive-spotlight", ".sds-input-arrive-spotlight::before" ], "keyframes": [ "sds-inputArriveSpotlightHost", "sds-inputArriveSpotlightBeam" ], "tokensUsed": [ "--sds-duration-slow", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-stack", "displayName": "Arrive Stack", "category": "inputs", "kind": "effect", "description": "Frame, interior tint, and field arrive as three staggered layers", "selectors": [ ".sds-input-arrive-stack", ".sds-input-arrive-stack::before", ".sds-input-arrive-stack::after", ".sds-input-arrive-stack input" ], "keyframes": [ "sds-inputArriveStackFrame", "sds-inputArriveStackTint", "sds-inputArriveStackField" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-stretch", "displayName": "Arrive Stretch", "category": "inputs", "kind": "effect", "description": "Stretches open from a narrow pill to full width with an elastic settle", "selectors": [ ".sds-input-arrive-stretch" ], "keyframes": [ "sds-inputArriveStretch" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-arrive-unzip", "displayName": "Arrive Unzip", "category": "inputs", "kind": "effect", "description": "The field unzips open from its center line with a bright seam that cools as it spreads", "selectors": [ ".sds-input-arrive-unzip" ], "keyframes": [ "sds-inputArriveUnzip" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-aurora", "displayName": "Aurora", "category": "inputs", "kind": "effect", "description": "Aurora — input animation.", "selectors": [ ".sds-input-aurora" ], "keyframes": [ "sds-inputAurora" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-bloom", "displayName": "Bloom", "category": "inputs", "kind": "effect", "description": "Bloom — input animation.", "selectors": [ ".sds-input-bloom" ], "keyframes": [ "sds-inputBloom" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-beam", "displayName": "Border Beam", "category": "inputs", "kind": "effect", "description": "Border Beam — input animation.", "selectors": [ ".sds-input-border-beam" ], "keyframes": [ "sds-inputBorderBeam" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset", "outline-width" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset", "outline-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-comet-loop", "displayName": "Border Comet Loop", "category": "inputs", "kind": "effect", "description": "A glowing comet head rides the field's outline in a steady lap, dimming on the far side", "selectors": [ ".sds-input-border-comet-loop", ".sds-input-border-comet-loop::before" ], "keyframes": [ "sds-inputBorderCometLoop" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary", "--sds-primary-glow" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-corners", "displayName": "Border Corners", "category": "inputs", "kind": "effect", "description": "Corners take turns glowing — NE, SE, SW, NW — with a crossfade between each", "selectors": [ ".sds-input-border-corners", ".sds-input-border-corners::before" ], "keyframes": [ "sds-inputBorderCorners", "sds-inputBorderCornersFade" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-heartline", "displayName": "Border Heartline", "category": "inputs", "kind": "effect", "description": "An ECG blip races along the underline every few seconds, then flatlines politely", "selectors": [ ".sds-input-border-heartline", ".sds-input-border-heartline::before", ".sds-input-border-heartline::after" ], "keyframes": [ "sds-inputBorderHeartline" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary", "--sds-primary-glow" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-orbiters", "displayName": "Border Orbiters", "category": "inputs", "kind": "effect", "description": "Two dim satellites orbit the field on opposite sides of its outline", "selectors": [ ".sds-input-border-orbiters", ".sds-input-border-orbiters::before, .sds-input-border-orbiters::after", ".sds-input-border-orbiters::before", ".sds-input-border-orbiters::after" ], "keyframes": [ "sds-inputBorderOrbiterA", "sds-inputBorderOrbiterB" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-rain", "displayName": "Border Rain", "category": "inputs", "kind": "effect", "description": "Thin light streaks run down both sides of the field in offset phase", "selectors": [ ".sds-input-border-rain", ".sds-input-border-rain::before, .sds-input-border-rain::after", ".sds-input-border-rain::before", ".sds-input-border-rain::after" ], "keyframes": [ "sds-inputBorderRain" ], "tokensUsed": [ "--sds-duration-slower", "--sds-ease-accelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-static", "displayName": "Border Static", "category": "inputs", "kind": "effect", "description": "A quiet frame with an occasional two-frame static jitter — idle tech energy", "selectors": [ ".sds-input-border-static", ".sds-input-border-static::before" ], "keyframes": [ "sds-inputBorderStatic" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-border-tide", "displayName": "Border Tide", "category": "inputs", "kind": "effect", "description": "Border emphasis flows around the frame like a tide through four phases", "selectors": [ ".sds-input-border-tide", ".sds-input-border-tide::before", ".sds-input-border-tide::after" ], "keyframes": [ "sds-inputBorderTide" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary", "--sds-primary-glow" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-burst", "displayName": "Burst", "category": "inputs", "kind": "effect", "description": "Burst — input animation.", "selectors": [ ".sds-input-burst" ], "keyframes": [ "sds-inputBurst" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "box-shadow", "opacity", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-caret", "displayName": "Caret Trail", "category": "inputs", "kind": "effect", "description": "Pulsing inner ring emulates caret activity", "selectors": [ ".sds-input-caret" ], "keyframes": [ "sds-caretTrail" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-caret-pop", "displayName": "Caret Pop", "category": "inputs", "kind": "effect", "description": "A caret bar pops in at the text start with a double bounce, blinks once, and hands over", "selectors": [ ".sds-input-caret-pop", ".sds-input-caret-pop::before", ".sds-input-caret-pop:focus-within::before" ], "keyframes": [ "sds-inputCaretPop" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-charge", "displayName": "Charge", "category": "inputs", "kind": "effect", "description": "Charge — input animation.", "selectors": [ ".sds-input-charge" ], "keyframes": [ "sds-inputCharge" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-comet", "displayName": "Comet", "category": "inputs", "kind": "effect", "description": "Comet — input animation.", "selectors": [ ".sds-input-comet" ], "keyframes": [ "sds-inputComet" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-crystal", "displayName": "Crystal", "category": "inputs", "kind": "effect", "description": "Crystal — input animation.", "selectors": [ ".sds-input-crystal" ], "keyframes": [ "sds-inputCrystal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow", "filter" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-depth", "displayName": "Depth", "category": "inputs", "kind": "effect", "description": "Depth — input animation.", "selectors": [ ".sds-input-depth" ], "keyframes": [ "sds-inputDepth" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-echo", "displayName": "Echo", "category": "inputs", "kind": "effect", "description": "Echo — input animation.", "selectors": [ ".sds-input-echo" ], "keyframes": [ "sds-inputEcho" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset", "outline-width" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset", "outline-width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-electric", "displayName": "Electric", "category": "inputs", "kind": "effect", "description": "Electric — input animation.", "selectors": [ ".sds-input-electric" ], "keyframes": [ "sds-inputElectric" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-elevate-wrap", "displayName": "Elevate Focus", "category": "inputs", "kind": "effect", "description": "Label floats up on focus/fill", "selectors": [ ".sds-input-elevate-wrap", ".sds-input-elevate-wrap label", ".sds-input-elevate-wrap input:focus ~ label, .sds-input-elevate-wrap input:not(:placeholder-shown) ~ label" ], "keyframes": [], "tokensUsed": [ "--sds-easing" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-error-buzz", "displayName": "Error Buzz", "category": "inputs", "kind": "effect", "description": "Three sharp 1px vibrations with a red-shifted flash, then an apologetic settle", "selectors": [ ".sds-input-error-buzz" ], "keyframes": [ "sds-inputErrorBuzz" ], "tokensUsed": [ "--sds-duration-instant" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-error-quake", "displayName": "Error Quake", "category": "inputs", "kind": "effect", "description": "Caret-safe shake — the frame quakes while the field counter-shifts so your text stays readable", "selectors": [ ".sds-input-error-quake", ".sds-input-error-quake input" ], "keyframes": [ "sds-inputErrorQuake", "sds-inputErrorQuakeInner" ], "tokensUsed": [ "--sds-duration-fast" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-error-sink", "displayName": "Error Sink", "category": "inputs", "kind": "effect", "description": "The field sinks 2px and desaturates, recovering slowly — the weight of the error", "selectors": [ ".sds-input-error-sink" ], "keyframes": [ "sds-inputErrorSink" ], "tokensUsed": [ "--sds-duration-slow", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-expand", "displayName": "Expand", "category": "inputs", "kind": "effect", "description": "Expand — input animation.", "selectors": [ ".sds-input-expand" ], "keyframes": [ "sds-inputExpand" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "border-radius", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-corner-shade", "displayName": "Fill Corner Shade", "category": "inputs", "kind": "effect", "description": "A shade wedge sweeps in from the bottom-right corner on focus, adding active depth", "selectors": [ ".sds-input-fill-corner-shade", ".sds-input-fill-corner-shade::before", ".sds-input-fill-corner-shade:focus-within::before" ], "keyframes": [ "sds-inputFillCornerShade" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-flood", "displayName": "Fill Flood", "category": "inputs", "kind": "effect", "description": "On focus the interior floods with tint, then drains down to a strong underline — two acts", "selectors": [ ".sds-input-fill-flood", ".sds-input-fill-flood::before", ".sds-input-fill-flood:focus-within::before" ], "keyframes": [ "sds-inputFillFlood" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-meter", "displayName": "Fill Meter", "category": "inputs", "kind": "effect", "description": "While focused, a meter advances in confident bursts with holds — progress you can feel", "selectors": [ ".sds-input-fill-meter", ".sds-input-fill-meter::before", ".sds-input-fill-meter:focus-within::before" ], "keyframes": [ "sds-inputFillMeter" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-pulse-floor", "displayName": "Fill Pulse Floor", "category": "inputs", "kind": "effect", "description": "The field's floor pulses brighter on a slow loop while it holds focus", "selectors": [ ".sds-input-fill-pulse-floor", ".sds-input-fill-pulse-floor::before", ".sds-input-fill-pulse-floor:focus-within::before" ], "keyframes": [ "sds-inputFillPulseFloor" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-rise", "displayName": "Fill Rise", "category": "inputs", "kind": "effect", "description": "On focus a tint rises from the floor and settles at a shallow waterline", "selectors": [ ".sds-input-fill-rise", ".sds-input-fill-rise::before", ".sds-input-fill-rise:focus-within::before" ], "keyframes": [ "sds-inputFillRise" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-decelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fill-scanline", "displayName": "Fill Scanline", "category": "inputs", "kind": "effect", "description": "One soft scanline crosses the field on focus, then drifts back and parks at the caret edge", "selectors": [ ".sds-input-fill-scanline", ".sds-input-fill-scanline::before", ".sds-input-fill-scanline:focus-within::before" ], "keyframes": [ "sds-inputFillScanline" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-fire", "displayName": "Fire", "category": "inputs", "kind": "effect", "description": "Fire — input animation.", "selectors": [ ".sds-input-fire" ], "keyframes": [ "sds-inputFire" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-flicker", "displayName": "Flicker", "category": "inputs", "kind": "effect", "description": "Flicker — input animation.", "selectors": [ ".sds-input-flicker" ], "keyframes": [ "sds-inputFlicker" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-flow", "displayName": "Flow", "category": "inputs", "kind": "effect", "description": "Flow — input animation.", "selectors": [ ".sds-input-flow" ], "keyframes": [ "sds-inputFlow" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-focus", "displayName": "Focus Field", "category": "inputs", "kind": "effect", "description": "Glow ring appears on :focus", "selectors": [ ".sds-input-focus:focus" ], "keyframes": [ "sds-focusField" ], "tokensUsed": [ "--sds-duration-instant" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-focus-glow", "displayName": "Focus Glow", "category": "inputs", "kind": "effect", "description": "Focus Glow — input animation.", "selectors": [ ".sds-input-focus-glow:focus" ], "keyframes": [ "sds-focusField" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": "sds-input-focus", "sinceVersion": "4.0.3" }, { "name": "sds-input-frame-bloom", "displayName": "Frame Bloom", "category": "inputs", "kind": "effect", "description": "Four corner accents bloom outward then seat back onto the field, top pair leading", "selectors": [ ".sds-input-frame-bloom", ".sds-input-frame-bloom::before, .sds-input-frame-bloom::after", ".sds-input-frame-bloom::before", ".sds-input-frame-bloom::after", ".sds-input-frame-bloom:focus-within::before", ".sds-input-frame-bloom:focus-within::after" ], "keyframes": [ "sds-inputFrameBloom" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-frost", "displayName": "Frost", "category": "inputs", "kind": "effect", "description": "Frost — input animation.", "selectors": [ ".sds-input-frost" ], "keyframes": [ "sds-inputFrost" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-gate-open", "displayName": "Gate Open", "category": "inputs", "kind": "effect", "description": "Two tinted panels part horizontally over the field when it takes focus", "selectors": [ ".sds-input-gate-open", ".sds-input-gate-open::before, .sds-input-gate-open::after", ".sds-input-gate-open::before", ".sds-input-gate-open::after", ".sds-input-gate-open:focus-within::before", ".sds-input-gate-open:focus-within::after" ], "keyframes": [ "sds-inputGateOpenL", "sds-inputGateOpenR" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-decelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ghost", "displayName": "Ghost", "category": "inputs", "kind": "effect", "description": "Ghost — input animation.", "selectors": [ ".sds-input-ghost" ], "keyframes": [ "sds-inputGhost" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position", "opacity" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-glitch-valid", "displayName": "Glitch Valid", "category": "inputs", "kind": "effect", "description": "Glitch Valid — input animation.", "selectors": [ ".sds-input-glitch-valid" ], "keyframes": [ "sds-inputGlitchValid" ], "tokensUsed": [ "--sds-duration-fast" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "border-color", "transform" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-glow-border", "displayName": "Glow Border", "category": "inputs", "kind": "effect", "description": "Glow Border — input animation.", "selectors": [ ".sds-input-glow-border" ], "keyframes": [ "sds-inputGlowBorder" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-gradient-border", "displayName": "Gradient Border", "category": "inputs", "kind": "effect", "description": "Gradient Border — input animation.", "selectors": [ ".sds-input-gradient-border" ], "keyframes": [ "sds-inputGradBorder" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-gravity", "displayName": "Gravity", "category": "inputs", "kind": "effect", "description": "Gravity — input animation.", "selectors": [ ".sds-input-gravity" ], "keyframes": [ "sds-inputGravity" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-depth", "displayName": "Idle Depth", "category": "inputs", "kind": "effect", "description": "The field breathes in depth — its shadow approaches and recedes on a slow tide", "selectors": [ ".sds-input-idle-depth" ], "keyframes": [ "sds-inputIdleDepth" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-floatline", "displayName": "Idle Floatline", "category": "inputs", "kind": "effect", "description": "The underline drifts gently side to side like a buoy line at rest", "selectors": [ ".sds-input-idle-floatline", ".sds-input-idle-floatline::before" ], "keyframes": [ "sds-inputIdleFloatline" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-glimmer", "displayName": "Idle Glimmer", "category": "inputs", "kind": "effect", "description": "A tiny star glimmers at the corner every few seconds, spins a quarter turn, and is gone", "selectors": [ ".sds-input-idle-glimmer", ".sds-input-idle-glimmer::before" ], "keyframes": [ "sds-inputIdleGlimmer" ], "tokensUsed": [ "--sds-duration-dramatic", "--sds-ease-standard" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-lean", "displayName": "Idle Lean", "category": "inputs", "kind": "effect", "description": "A barely-perceptible lean cycle, like paper that isn't quite flat", "selectors": [ ".sds-input-idle-lean" ], "keyframes": [ "sds-inputIdleLean" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-noise", "displayName": "Idle Noise", "category": "inputs", "kind": "effect", "description": "Film-grain dots shimmer at 7% opacity in stepped jumps — analog quiet", "selectors": [ ".sds-input-idle-noise", ".sds-input-idle-noise::before" ], "keyframes": [ "sds-inputIdleNoise" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-perimeter-dot", "displayName": "Idle Perimeter Dot", "category": "inputs", "kind": "effect", "description": "A single dot blinks at each corner in turn, patrolling the field's perimeter", "selectors": [ ".sds-input-idle-perimeter-dot", ".sds-input-idle-perimeter-dot::before" ], "keyframes": [ "sds-inputIdlePerimeterDot" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-idle-soft-zoom", "displayName": "Idle Soft Zoom", "category": "inputs", "kind": "effect", "description": "A 0.6% scale tide — imperceptibly alive", "selectors": [ ".sds-input-idle-soft-zoom" ], "keyframes": [ "sds-inputIdleSoftZoom" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ink", "displayName": "Ink Stroke", "category": "inputs", "kind": "effect", "description": "Outline expands with ink-stroke feel", "selectors": [ ".sds-input-ink:focus" ], "keyframes": [ "sds-inkStroke" ], "tokensUsed": [ "--sds-duration-instant" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "outline-color", "outline-offset" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-kinetic", "displayName": "Kinetic", "category": "inputs", "kind": "effect", "description": "Kinetic — input animation.", "selectors": [ ".sds-input-kinetic" ], "keyframes": [ "sds-inputKinetic" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-label-spring", "displayName": "Label Spring", "category": "inputs", "kind": "effect", "description": "On focus the label lifts with an 8% overshoot and settles small while the field swells a hair", "selectors": [ ".sds-input-label-spring", ".sds-input-label-spring label", ".sds-input-label-spring:focus-within label, .sds-input-label-spring input:not(:placeholder-shown) ~ label", ".sds-input-label-spring:focus-within input" ], "keyframes": [ "sds-inputLabelSpring", "sds-inputLabelSpringField" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-spring", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-laser", "displayName": "Laser", "category": "inputs", "kind": "effect", "description": "Laser — input animation.", "selectors": [ ".sds-input-laser" ], "keyframes": [ "sds-inputLaser" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-momentum", "displayName": "Momentum", "category": "inputs", "kind": "effect", "description": "Momentum — input animation.", "selectors": [ ".sds-input-momentum" ], "keyframes": [ "sds-inputMomentum" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-morph", "displayName": "Border Morph", "category": "inputs", "kind": "effect", "description": "Border-radius morphs between shapes", "selectors": [ ".sds-input-morph" ], "keyframes": [ "sds-borderMorph" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-morph-ph", "displayName": "Morph Placeholder", "category": "inputs", "kind": "effect", "description": "Placeholder letter-spacing breathes", "selectors": [ ".sds-input-morph-ph::placeholder" ], "keyframes": [ "sds-morphPlaceholder" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "filter", "letter-spacing", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-neon", "displayName": "Neon Input", "category": "inputs", "kind": "effect", "description": "Neon glow with flicker on the border", "selectors": [ ".sds-input-neon" ], "keyframes": [ "sds-neonSign" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-neural", "displayName": "Neural", "category": "inputs", "kind": "effect", "description": "Neural — input animation.", "selectors": [ ".sds-input-neural" ], "keyframes": [ "sds-inputNeural" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-orbit", "displayName": "Orbit", "category": "inputs", "kind": "effect", "description": "Orbit — input animation.", "selectors": [ ".sds-input-orbit" ], "keyframes": [ "sds-inputOrbit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "outline-color", "outline-offset" ], "animatedPaintProps": [ "outline-color" ], "animatedLayoutProps": [ "outline-offset" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-blink", "displayName": "Placeholder Blink", "category": "inputs", "kind": "effect", "description": "A double-blink invitation every few seconds, then a straight face", "selectors": [ ".sds-input-ph-blink::placeholder" ], "keyframes": [ "sds-inputPhBlink" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-breathe", "displayName": "Placeholder Breathe", "category": "inputs", "kind": "effect", "description": "The placeholder breathes slowly between half-light and dim — alive, not urgent", "selectors": [ ".sds-input-ph-breathe::placeholder" ], "keyframes": [ "sds-inputPhBreathe" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-fade-steps", "displayName": "Placeholder Fade Steps", "category": "inputs", "kind": "effect", "description": "On focus the placeholder vanishes in three stepped after-images, like type lifting off", "selectors": [ ".sds-input-ph-fade-steps:focus::placeholder" ], "keyframes": [ "sds-inputPhFadeSteps" ], "tokensUsed": [ "--sds-duration-fast" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-flicker-in", "displayName": "Placeholder Flicker In", "category": "inputs", "kind": "effect", "description": "The placeholder powers on through stepped flickers when the field loads", "selectors": [ ".sds-input-ph-flicker-in::placeholder" ], "keyframes": [ "sds-inputPhFlickerIn" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-ghost", "displayName": "Placeholder Ghost", "category": "inputs", "kind": "effect", "description": "On focus the placeholder dips to a ghost, lingers a beat, then lets go", "selectors": [ ".sds-input-ph-ghost:focus::placeholder" ], "keyframes": [ "sds-inputPhGhost" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ph-wave", "displayName": "Placeholder Wave", "category": "inputs", "kind": "effect", "description": "Soft irregular pulses roll through the placeholder, like text under water", "selectors": [ ".sds-input-ph-wave::placeholder" ], "keyframes": [ "sds-inputPhWave" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-plasma", "displayName": "Plasma Field", "category": "inputs", "kind": "effect", "description": "Plasma glow cycles around the field", "selectors": [ ".sds-input-plasma" ], "keyframes": [ "sds-plasmaGlow" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-prism", "displayName": "Prism", "category": "inputs", "kind": "effect", "description": "Prism — input animation.", "selectors": [ ".sds-input-prism" ], "keyframes": [ "sds-inputPrism" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-pulse-dot", "displayName": "Pulse Dot", "category": "inputs", "kind": "effect", "description": "Pulse Dot — input animation.", "selectors": [ ".sds-input-pulse-dot" ], "keyframes": [ "sds-inputPulseDot" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-left-color", "box-shadow" ], "animatedPaintProps": [ "border-left-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-quantum", "displayName": "Quantum", "category": "inputs", "kind": "effect", "description": "Quantum — input animation.", "selectors": [ ".sds-input-quantum" ], "keyframes": [ "sds-inputQuantum" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-radar", "displayName": "Radar", "category": "inputs", "kind": "effect", "description": "Radar — input animation.", "selectors": [ ".sds-input-radar" ], "keyframes": [ "sds-inputRadar" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ring", "displayName": "Ring Pulse", "category": "inputs", "kind": "effect", "description": "Magnetic ring pulse on the border", "selectors": [ ".sds-input-ring" ], "keyframes": [ "sds-magnetPulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-ripple", "displayName": "Ripple", "category": "inputs", "kind": "effect", "description": "Ripple — input animation.", "selectors": [ ".sds-input-ripple" ], "keyframes": [ "sds-inputRipple" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-saved-flash", "displayName": "Saved Flash", "category": "inputs", "kind": "effect", "description": "A quick brightness sweep with a 1% stamp-squash — saved, confirmed", "selectors": [ ".sds-input-saved-flash" ], "keyframes": [ "sds-inputSavedFlash" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-scan", "displayName": "Scan", "category": "inputs", "kind": "effect", "description": "Scan — input animation.", "selectors": [ ".sds-input-scan" ], "keyframes": [ "sds-inputScan" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-shake", "displayName": "Seismic Shake", "category": "inputs", "kind": "effect", "description": "Horizontal shake for invalid state", "selectors": [ ".sds-input-shake" ], "keyframes": [ "sds-seismicShake" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-shimmer", "displayName": "Shimmer Scan", "category": "inputs", "kind": "effect", "description": "Light shimmer scans across the field", "selectors": [ ".sds-input-shimmer" ], "keyframes": [ "sds-shimmerScan" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-solar", "displayName": "Solar", "category": "inputs", "kind": "effect", "description": "Solar — input animation.", "selectors": [ ".sds-input-solar" ], "keyframes": [ "sds-inputSolar" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-success", "displayName": "Success Glow", "category": "inputs", "kind": "effect", "description": "Green glow for a validated field", "selectors": [ ".sds-input-success" ], "keyframes": [ "sds-successGlow" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-success-ripple", "displayName": "Success Ripple", "category": "inputs", "kind": "effect", "description": "Two green glow rings ripple off the field as it does a contented little bob", "selectors": [ ".sds-input-success-ripple" ], "keyframes": [ "sds-inputSuccessRipple" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-success-tick", "displayName": "Success Tick", "category": "inputs", "kind": "effect", "description": "A checkmark draws itself in two strokes and snaps at the finish", "selectors": [ ".sds-input-success-tick", ".sds-input-success-tick::after" ], "keyframes": [ "sds-inputSuccessTick" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-emphasized" ], "customProperties": [ "--sds-success" ], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-tilt-in", "displayName": "Tilt In", "category": "inputs", "kind": "effect", "description": "The field tips toward you on focus while its shadow approaches — a 3D nod", "selectors": [ ".sds-input-tilt-in:focus" ], "keyframes": [ "sds-inputTiltIn" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-underline-draw", "displayName": "Underline Draw", "category": "inputs", "kind": "effect", "description": "Underline draws from the center to both edges with a snap of overshoot", "selectors": [ ".sds-input-underline-draw", ".sds-input-underline-draw::after", ".sds-input-underline-draw:focus-within::after" ], "keyframes": [ "sds-inputUnderlineDraw" ], "tokensUsed": [ "--sds-duration-fast", "--sds-ease-spring" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-underline-trail", "displayName": "Underline Trail", "category": "inputs", "kind": "effect", "description": "Underline draws left to right behind a bright comet head that burns out at the far edge", "selectors": [ ".sds-input-underline-trail", ".sds-input-underline-trail::after", ".sds-input-underline-trail::before", ".sds-input-underline-trail:focus-within::after", ".sds-input-underline-trail:focus-within::before" ], "keyframes": [ "sds-inputUnderlineTrail", "sds-inputUnderlineTrailHead" ], "tokensUsed": [ "--sds-duration-instant", "--sds-ease-decelerate" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": true, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-unlock", "displayName": "Unlock", "category": "inputs", "kind": "effect", "description": "Unlock — input animation.", "selectors": [ ".sds-input-unlock" ], "keyframes": [ "sds-inputUnlock" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-void", "displayName": "Void", "category": "inputs", "kind": "effect", "description": "Void — input animation.", "selectors": [ ".sds-input-void" ], "keyframes": [ "sds-inputVoid" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-voltage", "displayName": "Voltage Pulse", "category": "inputs", "kind": "effect", "description": "Border brightens like voltage spikes", "selectors": [ ".sds-input-voltage" ], "keyframes": [ "sds-voltagePulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-warn-tilt", "displayName": "Warn Tilt", "category": "inputs", "kind": "effect", "description": "Leans one degree with an amber cast, then rights itself — visible uncertainty", "selectors": [ ".sds-input-warn-tilt" ], "keyframes": [ "sds-inputWarnTilt" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-waveform", "displayName": "Waveform", "category": "inputs", "kind": "effect", "description": "Waveform — input animation.", "selectors": [ ".sds-input-waveform" ], "keyframes": [ "sds-inputWaveform" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "transform" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-zap", "displayName": "Zap", "category": "inputs", "kind": "effect", "description": "Zap — input animation.", "selectors": [ ".sds-input-zap" ], "keyframes": [ "sds-inputZap" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow", "transform" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-input-zoom-focus", "displayName": "Zoom Focus", "category": "inputs", "kind": "effect", "description": "Camera-focus on the field: a breath of blur clears as it sharpens and brightens", "selectors": [ ".sds-input-zoom-focus:focus" ], "keyframes": [ "sds-inputZoomFocus" ], "tokensUsed": [ "--sds-duration-instant", "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "focus", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-iris-open", "displayName": "Iris Open", "category": "text", "kind": "effect", "description": "Opens from a circular iris", "selectors": [ ".sds-iris-open" ], "keyframes": [ "sds-irisOpen" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-jello", "displayName": "Jello", "category": "text", "kind": "effect", "description": "Jiggles with a jello skew", "selectors": [ ".sds-jello" ], "keyframes": [ "sds-jelloText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-jelly-hover", "displayName": "Jelly Hover", "category": "interactive", "kind": "interactive", "description": "Squash + stretch spring on hover", "selectors": [ ".sds-jelly-hover" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-js", "displayName": "Js", "category": "infrastructure", "kind": "infrastructure", "description": "Js — infrastructure animation.", "selectors": [ "html:not(.sds-js) [data-sds]" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-kinetic-wave", "displayName": "Kinetic Wave", "category": "text", "kind": "effect", "description": "Each child bounces up/down in a wave", "selectors": [ ".sds-kinetic-wave > *", ".sds-kinetic-wave > *:nth-child(1)", ".sds-kinetic-wave > *:nth-child(2)", ".sds-kinetic-wave > *:nth-child(3)", ".sds-kinetic-wave > *:nth-child(4)", ".sds-kinetic-wave > *:nth-child(5)", ".sds-kinetic-wave > *:nth-child(6)", ".sds-kinetic-wave > *:nth-child(7)", ".sds-kinetic-wave > *:nth-child(8)", ".sds-kinetic-wave > *:nth-child(9)", ".sds-kinetic-wave > *:nth-child(10)", ".sds-kinetic-wave > *:nth-child(11)", ".sds-kinetic-wave > *:nth-child(12)" ], "keyframes": [ "sds-kineticWave" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-levitate", "displayName": "Levitate", "category": "text", "kind": "effect", "description": "Gentle float with subtle rotation", "selectors": [ ".sds-levitate" ], "keyframes": [ "sds-levitateText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-light-speed", "displayName": "Light Speed", "category": "text", "kind": "effect", "description": "Streaks in with a skewed light-speed motion", "selectors": [ ".sds-light-speed" ], "keyframes": [ "sds-lightSpeed" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-liquid-rise", "displayName": "Liquid Rise", "category": "text", "kind": "effect", "description": "Rises up with skew and blur in one fluid arc", "selectors": [ ".sds-liquid-rise" ], "keyframes": [ "sds-liquidRise" ], "tokensUsed": [ "--sds-duration", "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-arc", "displayName": "Arc", "category": "loaders", "kind": "effect", "description": "Arc — loader animation.", "selectors": [ ".sds-loader-arc", ".sds-loader-arc::before, .sds-loader-arc::after", ".sds-loader-arc::before", ".sds-loader-arc::after" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bar", "displayName": "Bar", "category": "loaders", "kind": "effect", "description": "Bar — loader animation.", "selectors": [ ".sds-loader-bar", ".sds-loader-bar::after" ], "keyframes": [ "sds-loaderBar" ], "tokensUsed": [], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": false, "loop": true, "animatedProps": [ "transform", "transform-origin" ], "animatedPaintProps": [], "animatedLayoutProps": [ "transform-origin" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bar-pulse", "displayName": "Bar Pulse", "category": "loaders", "kind": "effect", "description": "A bar breathes by scaling its width from narrow to full.", "selectors": [ ".sds-loader-bar-pulse" ], "keyframes": [ "sds-ldBarPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bar-swing", "displayName": "Bar Swing", "category": "loaders", "kind": "effect", "description": "A bright sliver slides from one end of a track to the other.", "selectors": [ ".sds-loader-bar-swing", ".sds-loader-bar-swing::before" ], "keyframes": [ "sds-ldBarSwing" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-beam", "displayName": "Beam", "category": "loaders", "kind": "effect", "description": "A bar wipes in from the left then exits to the right via clip-path.", "selectors": [ ".sds-loader-beam" ], "keyframes": [ "sds-ldBeam" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-blob", "displayName": "Blob", "category": "loaders", "kind": "effect", "description": "A polygon morphs through organic rounded shapes continuously.", "selectors": [ ".sds-loader-blob" ], "keyframes": [ "sds-blobMorphKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-blur-pulse", "displayName": "Blur Pulse", "category": "loaders", "kind": "effect", "description": "A dot dissolves in from a blur then fades back out.", "selectors": [ ".sds-loader-blur-pulse" ], "keyframes": [ "sds-ldBlurPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bounce", "displayName": "Bounce", "category": "loaders", "kind": "effect", "description": "Bounce — loader animation.", "selectors": [ ".sds-loader-bounce" ], "keyframes": [ "sds-loaderBounce" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-emphasized" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bounce-bar", "displayName": "Bounce Bar", "category": "loaders", "kind": "effect", "description": "Four bars bounce upward in sequence like bouncing columns.", "selectors": [ ".sds-loader-bounce-bar", ".sds-loader-bounce-bar > *", ".sds-loader-bounce-bar > *:nth-child(1)", ".sds-loader-bounce-bar > *:nth-child(2)", ".sds-loader-bounce-bar > *:nth-child(3)", ".sds-loader-bounce-bar > *:nth-child(4)" ], "keyframes": [ "sds-ldBounceBar" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-breath", "displayName": "Breath", "category": "loaders", "kind": "effect", "description": "Breath — loader animation.", "selectors": [ ".sds-loader-breath" ], "keyframes": [ "sds-loaderBreath" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-bubble", "displayName": "Bubble", "category": "loaders", "kind": "effect", "description": "A ring expands outward and fades as if a bubble popping.", "selectors": [ ".sds-loader-bubble" ], "keyframes": [ "sds-bubblePopKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-cascade", "displayName": "Cascade Bars", "category": "loaders", "kind": "effect", "description": "Cascade Bars — loader animation.", "selectors": [ ".sds-loader-cascade", ".sds-loader-cascade > *", ".sds-loader-cascade > *:nth-child(1)", ".sds-loader-cascade > *:nth-child(2)", ".sds-loader-cascade > *:nth-child(3)", ".sds-loader-cascade > *:nth-child(4)", ".sds-loader-cascade > *:nth-child(5)" ], "keyframes": [ "sds-loaderCascade" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "height", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [ "height" ], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-chase-box", "displayName": "Chase Box", "category": "loaders", "kind": "effect", "description": "A bead races continuously along the host border via offset-path.", "selectors": [ ".sds-loader-chase-box", ".sds-loader-chase-box::before" ], "keyframes": [ "sds-ldChaseBox" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-clock", "displayName": "Clock", "category": "loaders", "kind": "effect", "description": "Clock — loader animation.", "selectors": [ ".sds-loader-clock", ".sds-loader-clock::before", ".sds-loader-clock::after" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-coil", "displayName": "Coil", "category": "loaders", "kind": "effect", "description": "Three nested arcs spin at different speeds creating a coil illusion.", "selectors": [ ".sds-loader-coil", ".sds-loader-coil::before", ".sds-loader-coil::after" ], "keyframes": [ "sds-ldCoilCW", "sds-ldCoilCCW" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-comet", "displayName": "Comet Trail", "category": "loaders", "kind": "effect", "description": "Spinning arc on a track ring", "selectors": [ ".sds-loader-comet", ".sds-loader-comet::before" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-crystal", "displayName": "Crystal", "category": "loaders", "kind": "effect", "description": "Crystal — loader animation.", "selectors": [ ".sds-loader-crystal" ], "keyframes": [ "sds-cometSpin", "sds-loaderCrystal" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-cube", "displayName": "Cube", "category": "loaders", "kind": "effect", "description": "Cube — loader animation.", "selectors": [ ".sds-loader-cube" ], "keyframes": [ "sds-loaderCube" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-cursor", "displayName": "Cursor", "category": "loaders", "kind": "effect", "description": "A thin bar blinks on and off like a text insertion cursor.", "selectors": [ ".sds-loader-cursor" ], "keyframes": [ "sds-ldCursor" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-data", "displayName": "Data", "category": "loaders", "kind": "effect", "description": "Data — loader animation.", "selectors": [ ".sds-loader-data", ".sds-loader-data::before" ], "keyframes": [ "sds-loaderData" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-diamond", "displayName": "Diamond", "category": "loaders", "kind": "effect", "description": "A diamond rotates 180° while pulsing scale and opacity.", "selectors": [ ".sds-loader-diamond" ], "keyframes": [ "sds-ldDiamond" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dna", "displayName": "DNA Helix", "category": "loaders", "kind": "effect", "description": "DNA Helix — loader animation.", "selectors": [ ".sds-loader-dna", ".sds-loader-dna::before, .sds-loader-dna::after", ".sds-loader-dna::before", ".sds-loader-dna::after" ], "keyframes": [ "sds-loaderDna" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "opacity", "top", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "top" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots", "displayName": "Particle Sync", "category": "loaders", "kind": "effect", "description": "3 dots scale to zero in staggered sync", "selectors": [ ".sds-loader-dots", ".sds-loader-dots > *", ".sds-loader-dots > *:nth-child(2)", ".sds-loader-dots > *:nth-child(3)" ], "keyframes": [ "sds-particleSync" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots-bounce", "displayName": "Dots Bounce", "category": "loaders", "kind": "effect", "description": "Four dots bounce with a gravity arc in sequence.", "selectors": [ ".sds-loader-dots-bounce", ".sds-loader-dots-bounce > *", ".sds-loader-dots-bounce > *:nth-child(2)", ".sds-loader-dots-bounce > *:nth-child(3)", ".sds-loader-dots-bounce > *:nth-child(4)" ], "keyframes": [ "sds-dotsBounceKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots-expand", "displayName": "Dots Expand", "category": "loaders", "kind": "effect", "description": "Four dots scale in and out in a rolling sequence.", "selectors": [ ".sds-loader-dots-expand", ".sds-loader-dots-expand > *", ".sds-loader-dots-expand > *:nth-child(2)", ".sds-loader-dots-expand > *:nth-child(3)", ".sds-loader-dots-expand > *:nth-child(4)" ], "keyframes": [ "sds-dotsExpandKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots-fade", "displayName": "Dots Fade", "category": "loaders", "kind": "effect", "description": "Four dots pulse in and out of opacity in sequence.", "selectors": [ ".sds-loader-dots-fade", ".sds-loader-dots-fade > *", ".sds-loader-dots-fade > *:nth-child(2)", ".sds-loader-dots-fade > *:nth-child(3)", ".sds-loader-dots-fade > *:nth-child(4)" ], "keyframes": [ "sds-dotsFadeKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots-flip", "displayName": "Dots Flip", "category": "loaders", "kind": "effect", "description": "Four dots perform a staggered rotateY flip.", "selectors": [ ".sds-loader-dots-flip", ".sds-loader-dots-flip > *", ".sds-loader-dots-flip > *:nth-child(2)", ".sds-loader-dots-flip > *:nth-child(3)", ".sds-loader-dots-flip > *:nth-child(4)" ], "keyframes": [ "sds-dotsFlipKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dots-wave", "displayName": "Dots Wave", "category": "loaders", "kind": "effect", "description": "Four dots ripple up and down in a cascading wave.", "selectors": [ ".sds-loader-dots-wave", ".sds-loader-dots-wave > *", ".sds-loader-dots-wave > *:nth-child(2)", ".sds-loader-dots-wave > *:nth-child(3)", ".sds-loader-dots-wave > *:nth-child(4)" ], "keyframes": [ "sds-dotsWaveKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-drop", "displayName": "Drop", "category": "loaders", "kind": "effect", "description": "A teardrop shape falls, squashes flat on impact, then lifts off.", "selectors": [ ".sds-loader-drop" ], "keyframes": [ "sds-ldDropKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-dual-ring", "displayName": "Dual Ring", "category": "loaders", "kind": "effect", "description": "Two concentric rings spin in opposite directions.", "selectors": [ ".sds-loader-dual-ring", ".sds-loader-dual-ring::before" ], "keyframes": [ "sds-dualRingCW", "sds-dualRingCCW" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-eclipse", "displayName": "Eclipse", "category": "loaders", "kind": "effect", "description": "Two discs slide past each other creating an eclipse effect.", "selectors": [ ".sds-loader-eclipse", ".sds-loader-eclipse::before, .sds-loader-eclipse::after", ".sds-loader-eclipse::before", ".sds-loader-eclipse::after" ], "keyframes": [ "sds-eclipseKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-electric", "displayName": "Electric Arc", "category": "loaders", "kind": "effect", "description": "Electric Arc — loader animation.", "selectors": [ ".sds-loader-electric" ], "keyframes": [ "sds-loaderElectric" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "box-shadow" ], "animatedPaintProps": [ "border-color", "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-equalizer", "displayName": "Equalizer", "category": "loaders", "kind": "effect", "description": "Four bars animate to different heights like an audio equalizer.", "selectors": [ ".sds-loader-equalizer", ".sds-loader-equalizer > *", ".sds-loader-equalizer > *:nth-child(1)", ".sds-loader-equalizer > *:nth-child(2)", ".sds-loader-equalizer > *:nth-child(3)", ".sds-loader-equalizer > *:nth-child(4)" ], "keyframes": [ "sds-ldEqualizerA", "sds-ldEqualizerB", "sds-ldEqualizerC", "sds-ldEqualizerD" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-expand", "displayName": "Expand", "category": "loaders", "kind": "effect", "description": "Expand — loader animation.", "selectors": [ ".sds-loader-expand" ], "keyframes": [ "sds-loaderExpand" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-expand-ring", "displayName": "Expand Ring", "category": "loaders", "kind": "effect", "description": "Three concentric rings radiate outward in staggered waves.", "selectors": [ ".sds-loader-expand-ring", ".sds-loader-expand-ring::before, .sds-loader-expand-ring::after", ".sds-loader-expand-ring::before", ".sds-loader-expand-ring::after" ], "keyframes": [ "sds-ldExpandRingKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-fill-bar", "displayName": "Fill Bar", "category": "loaders", "kind": "effect", "description": "A progress bar fills from left to right then fades and resets.", "selectors": [ ".sds-loader-fill-bar", ".sds-loader-fill-bar::before" ], "keyframes": [ "sds-ldBarFill" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-flip-card", "displayName": "Flip Card", "category": "loaders", "kind": "effect", "description": "A rectangle flips on its Y axis like continuously turning a card.", "selectors": [ ".sds-loader-flip-card" ], "keyframes": [ "sds-ldFlipCard" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-fluid", "displayName": "Fluid Flow", "category": "loaders", "kind": "effect", "description": "Blob morphs continuously with rotation", "selectors": [ ".sds-loader-fluid" ], "keyframes": [ "sds-fluidFlow" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-fold", "displayName": "Fold", "category": "loaders", "kind": "effect", "description": "A square folds in 3D perspective cycling through each axis.", "selectors": [ ".sds-loader-fold" ], "keyframes": [ "sds-ldFold" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-gear", "displayName": "Gear", "category": "loaders", "kind": "effect", "description": "A jagged gear polygon rotates continuously like a mechanical cog.", "selectors": [ ".sds-loader-gear" ], "keyframes": [ "sds-ldGearSpin" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-glitch", "displayName": "Glitch", "category": "loaders", "kind": "effect", "description": "Glitch — loader animation.", "selectors": [ ".sds-loader-glitch" ], "keyframes": [ "sds-loaderGlitch" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-glow-pulse", "displayName": "Glow Pulse", "category": "loaders", "kind": "effect", "description": "A dot radiates a breathing drop-shadow glow that expands and contracts.", "selectors": [ ".sds-loader-glow-pulse" ], "keyframes": [ "sds-ldGlowPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-grid", "displayName": "Dot Grid", "category": "loaders", "kind": "effect", "description": "Dot Grid — loader animation.", "selectors": [ ".sds-loader-grid", ".sds-loader-grid > *", ".sds-loader-grid > *:nth-child(1)", ".sds-loader-grid > *:nth-child(2)", ".sds-loader-grid > *:nth-child(3)", ".sds-loader-grid > *:nth-child(4)", ".sds-loader-grid > *:nth-child(5)", ".sds-loader-grid > *:nth-child(6)", ".sds-loader-grid > *:nth-child(7)", ".sds-loader-grid > *:nth-child(8)", ".sds-loader-grid > *:nth-child(9)" ], "keyframes": [ "sds-loaderGrid" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-halo", "displayName": "Halo", "category": "loaders", "kind": "effect", "description": "Two staggered rings expand outward and fade like a halo pulse.", "selectors": [ ".sds-loader-halo", ".sds-loader-halo::before" ], "keyframes": [ "sds-haloExpandKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-helix", "displayName": "Helix Dots", "category": "loaders", "kind": "effect", "description": "Helix Dots — loader animation.", "selectors": [ ".sds-loader-helix", ".sds-loader-helix > *", ".sds-loader-helix > *:nth-child(1)", ".sds-loader-helix > *:nth-child(2)", ".sds-loader-helix > *:nth-child(3)", ".sds-loader-helix > *:nth-child(4)", ".sds-loader-helix > *:nth-child(5)" ], "keyframes": [ "sds-loaderHelix" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-hex", "displayName": "Hex", "category": "loaders", "kind": "effect", "description": "Hex — loader animation.", "selectors": [ ".sds-loader-hex" ], "keyframes": [ "sds-cometSpin", "sds-loaderHex" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-hourglass", "displayName": "Hourglass", "category": "loaders", "kind": "effect", "description": "Hourglass — loader animation.", "selectors": [ ".sds-loader-hourglass" ], "keyframes": [ "sds-loaderHourglass" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-infinity", "displayName": "Infinity", "category": "loaders", "kind": "effect", "description": "Infinity — loader animation.", "selectors": [ ".sds-loader-infinity", ".sds-loader-infinity::before, .sds-loader-infinity::after", ".sds-loader-infinity::before", ".sds-loader-infinity::after" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-isocube", "displayName": "Isocube", "category": "loaders", "kind": "effect", "description": "A square spins on a tilted perspective axis like a 3D cube.", "selectors": [ ".sds-loader-isocube" ], "keyframes": [ "sds-ldIsocube" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-liquid-ring", "displayName": "Liquid Ring", "category": "loaders", "kind": "effect", "description": "Liquid Ring — loader animation.", "selectors": [ ".sds-loader-liquid-ring" ], "keyframes": [ "sds-cometSpin", "sds-loaderLiquidRing" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-matrix", "displayName": "Matrix Bars", "category": "loaders", "kind": "effect", "description": "Matrix Bars — loader animation.", "selectors": [ ".sds-loader-matrix", ".sds-loader-matrix > *", ".sds-loader-matrix > *:nth-child(1)", ".sds-loader-matrix > *:nth-child(2)", ".sds-loader-matrix > *:nth-child(3)", ".sds-loader-matrix > *:nth-child(4)", ".sds-loader-matrix > *:nth-child(5)" ], "keyframes": [ "sds-loaderMatrix" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "height", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [ "height" ], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-metronome", "displayName": "Metronome", "category": "loaders", "kind": "effect", "description": "A thin bar pivots left and right from its base like a metronome.", "selectors": [ ".sds-loader-metronome" ], "keyframes": [ "sds-ldMetronome" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-morph", "displayName": "Morph", "category": "loaders", "kind": "effect", "description": "Morph — loader animation.", "selectors": [ ".sds-loader-morph" ], "keyframes": [ "sds-loaderMorph" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-radius", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "border-radius" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-morph-geo", "displayName": "Morph Geo", "category": "loaders", "kind": "effect", "description": "A shape morphs through square, diamond, and circle via clip-path.", "selectors": [ ".sds-loader-morph-geo" ], "keyframes": [ "sds-ldMorphGeo" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-mosaic", "displayName": "Mosaic", "category": "loaders", "kind": "effect", "description": "Mosaic — loader animation.", "selectors": [ ".sds-loader-mosaic", ".sds-loader-mosaic > *", ".sds-loader-mosaic > *:nth-child(1)", ".sds-loader-mosaic > *:nth-child(2)", ".sds-loader-mosaic > *:nth-child(3)", ".sds-loader-mosaic > *:nth-child(4)", ".sds-loader-mosaic > *:nth-child(5)", ".sds-loader-mosaic > *:nth-child(6)", ".sds-loader-mosaic > *:nth-child(7)", ".sds-loader-mosaic > *:nth-child(8)", ".sds-loader-mosaic > *:nth-child(9)" ], "keyframes": [ "sds-loaderMosaic" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-neon-flicker", "displayName": "Neon Flicker", "category": "loaders", "kind": "effect", "description": "A bar sputters with neon flicker like a fluorescent tube warming up.", "selectors": [ ".sds-loader-neon-flicker" ], "keyframes": [ "sds-ldNeonFlicker" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-neon-ring", "displayName": "Neon Ring", "category": "loaders", "kind": "effect", "description": "Neon Ring — loader animation.", "selectors": [ ".sds-loader-neon-ring" ], "keyframes": [ "sds-cometSpin", "sds-loaderNeonRing" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-neural", "displayName": "Neural", "category": "loaders", "kind": "effect", "description": "Neural — loader animation.", "selectors": [ ".sds-loader-neural" ], "keyframes": [ "sds-loaderNeural" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-orbit-3", "displayName": "Triple Orbit", "category": "loaders", "kind": "effect", "description": "Triple Orbit — loader animation.", "selectors": [ ".sds-loader-orbit-3", ".sds-loader-orbit-3::before, .sds-loader-orbit-3::after", ".sds-loader-orbit-3::before", ".sds-loader-orbit-3::after" ], "keyframes": [ "sds-orbitalA", "sds-orbitalB" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-orbital", "displayName": "Orbital System", "category": "loaders", "kind": "effect", "description": "Two particles orbit at different radii", "selectors": [ ".sds-loader-orbital", ".sds-loader-orbital::before, .sds-loader-orbital::after", ".sds-loader-orbital::before", ".sds-loader-orbital::after" ], "keyframes": [ "sds-orbitalA", "sds-orbitalB" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-pendulum", "displayName": "Pendulum", "category": "loaders", "kind": "effect", "description": "Pendulum — loader animation.", "selectors": [ ".sds-loader-pendulum" ], "keyframes": [ "sds-loaderPendulum" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ping", "displayName": "Ping Cascade", "category": "loaders", "kind": "effect", "description": "3 rings expand and fade in cascade", "selectors": [ ".sds-loader-ping", ".sds-loader-ping::before, .sds-loader-ping::after", ".sds-loader-ping::before, .sds-loader-ping::after, .sds-loader-ping > span", ".sds-loader-ping::after", ".sds-loader-ping > span" ], "keyframes": [ "sds-pingCascade" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-pinwheel", "displayName": "Pinwheel", "category": "loaders", "kind": "effect", "description": "Four petal-dots fade in sequence around the cardinal positions.", "selectors": [ ".sds-loader-pinwheel", ".sds-loader-pinwheel > *", ".sds-loader-pinwheel > *:nth-child(1)", ".sds-loader-pinwheel > *:nth-child(2)", ".sds-loader-pinwheel > *:nth-child(3)", ".sds-loader-pinwheel > *:nth-child(4)" ], "keyframes": [ "sds-ldPinwheelFade" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-plasma-ring", "displayName": "Plasma Ring", "category": "loaders", "kind": "effect", "description": "Plasma Ring — loader animation.", "selectors": [ ".sds-loader-plasma-ring" ], "keyframes": [ "sds-cometSpin", "sds-loaderPlasmaRing" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "filter", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-prism", "displayName": "Prism", "category": "loaders", "kind": "effect", "description": "Prism — loader animation.", "selectors": [ ".sds-loader-prism" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-progress", "displayName": "Progress Glow", "category": "loaders", "kind": "effect", "description": "Progress bar fills with glowing head", "selectors": [ ".sds-loader-progress", ".sds-loader-progress::after" ], "keyframes": [ "sds-progressGlow" ], "tokensUsed": [], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-progress-glow", "displayName": "Progress Glow", "category": "loaders", "kind": "effect", "description": "Progress Glow — loader animation.", "selectors": [ ".sds-loader-progress-glow" ], "keyframes": [ "sds-progressGlow" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": "sds-loader-progress", "sinceVersion": "4.0.3" }, { "name": "sds-loader-pulse", "displayName": "Pulse", "category": "loaders", "kind": "effect", "description": "Pulse — loader animation.", "selectors": [ ".sds-loader-pulse" ], "keyframes": [ "sds-loaderPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-quantum", "displayName": "Quantum", "category": "loaders", "kind": "effect", "description": "Quantum — loader animation.", "selectors": [ ".sds-loader-quantum" ], "keyframes": [ "sds-loaderQuantum" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-radar", "displayName": "Radar", "category": "loaders", "kind": "effect", "description": "Radar — loader animation.", "selectors": [ ".sds-loader-radar", ".sds-loader-radar::before", ".sds-loader-radar::after" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ring", "displayName": "Ring System", "category": "loaders", "kind": "effect", "description": "Ring System — loader animation.", "selectors": [ ".sds-loader-ring", ".sds-loader-ring::before, .sds-loader-ring::after", ".sds-loader-ring::before", ".sds-loader-ring::after" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ring-chase", "displayName": "Ring Chase", "category": "loaders", "kind": "effect", "description": "Two arc beads chase each other around the ring.", "selectors": [ ".sds-loader-ring-chase", ".sds-loader-ring-chase::before", ".sds-loader-ring-chase::after" ], "keyframes": [ "sds-ringChaseKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ring-split", "displayName": "Ring Split", "category": "loaders", "kind": "effect", "description": "Two opposing half-arcs counter-rotate around the same circle.", "selectors": [ ".sds-loader-ring-split", ".sds-loader-ring-split::before" ], "keyframes": [ "sds-ringSplitCW", "sds-ringSplitCCW" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ripple", "displayName": "Ripple Rings", "category": "loaders", "kind": "effect", "description": "Ripple Rings — loader animation.", "selectors": [ ".sds-loader-ripple", ".sds-loader-ripple::before, .sds-loader-ripple::after", ".sds-loader-ripple::after" ], "keyframes": [ "sds-loaderRipple" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ripple-dot", "displayName": "Ripple Dot", "category": "loaders", "kind": "effect", "description": "A central dot radiates two concentric expanding ring waves.", "selectors": [ ".sds-loader-ripple-dot", ".sds-loader-ripple-dot::before, .sds-loader-ripple-dot::after", ".sds-loader-ripple-dot::after" ], "keyframes": [ "sds-ldRippleDotRing" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-scanner", "displayName": "Scanner", "category": "loaders", "kind": "effect", "description": "A horizontal scan line sweeps down through a bordered box.", "selectors": [ ".sds-loader-scanner", ".sds-loader-scanner::before" ], "keyframes": [ "sds-ldScanner" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-signal", "displayName": "Signal Bars", "category": "loaders", "kind": "effect", "description": "Signal Bars — loader animation.", "selectors": [ ".sds-loader-signal", ".sds-loader-signal > *", ".sds-loader-signal > *:nth-child(1)", ".sds-loader-signal > *:nth-child(2)", ".sds-loader-signal > *:nth-child(3)", ".sds-loader-signal > *:nth-child(4)" ], "keyframes": [ "sds-loaderSignal" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-skeleton", "displayName": "Skeleton Pulse", "category": "loaders", "kind": "effect", "description": "Shimmer scan for loading placeholders", "selectors": [ ".sds-loader-skeleton" ], "keyframes": [ "sds-skeletonPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary-dim" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-snake", "displayName": "Snake", "category": "loaders", "kind": "effect", "description": "Snake — loader animation.", "selectors": [ ".sds-loader-snake", ".sds-loader-snake::before" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [ "--sds-ease-bounce" ], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-solar", "displayName": "Solar", "category": "loaders", "kind": "effect", "description": "Solar — loader animation.", "selectors": [ ".sds-loader-solar", ".sds-loader-solar::before", ".sds-loader-solar::after" ], "keyframes": [ "sds-loaderSolar", "sds-cometSpin" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-spark", "displayName": "Spark", "category": "loaders", "kind": "effect", "description": "Spark — loader animation.", "selectors": [ ".sds-loader-spark", ".sds-loader-spark::before" ], "keyframes": [ "sds-loaderSpark", "sds-loaderPulse" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "box-shadow", "opacity", "transform" ], "animatedPaintProps": [ "box-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-spin-dot", "displayName": "Spin Dot", "category": "loaders", "kind": "effect", "description": "A bead orbits a faint ring via offset-path.", "selectors": [ ".sds-loader-spin-dot", ".sds-loader-spin-dot::before" ], "keyframes": [ "sds-spinDotOrbit", "sds-spinDotBead" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "offset-distance", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "offset-distance" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-spin-fade", "displayName": "Spin Fade", "category": "loaders", "kind": "effect", "description": "Four horizontal bars fade in rotational sequence like a spinner.", "selectors": [ ".sds-loader-spin-fade", ".sds-loader-spin-fade > *", ".sds-loader-spin-fade > *:nth-child(1)", ".sds-loader-spin-fade > *:nth-child(2)", ".sds-loader-spin-fade > *:nth-child(3)", ".sds-loader-spin-fade > *:nth-child(4)" ], "keyframes": [ "sds-ldSpinFadeKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-spotlight", "displayName": "Spotlight", "category": "loaders", "kind": "effect", "description": "A conic gradient wedge sweeps in a circle like a rotating spotlight.", "selectors": [ ".sds-loader-spotlight", ".sds-loader-spotlight::before" ], "keyframes": [ "sds-ldSpotlight" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-squares", "displayName": "Squares", "category": "loaders", "kind": "effect", "description": "Four squares in a 2×2 grid pop in and out in a rolling sequence.", "selectors": [ ".sds-loader-squares", ".sds-loader-squares > *", ".sds-loader-squares > *:nth-child(1)", ".sds-loader-squares > *:nth-child(2)", ".sds-loader-squares > *:nth-child(3)", ".sds-loader-squares > *:nth-child(4)" ], "keyframes": [ "sds-ldSquaresKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-star", "displayName": "Star", "category": "loaders", "kind": "effect", "description": "Star — loader animation.", "selectors": [ ".sds-loader-star" ], "keyframes": [ "sds-cometSpin", "sds-loaderStar" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-stripes", "displayName": "Stripes", "category": "loaders", "kind": "effect", "description": "Diagonal stripes scroll continuously along a bar.", "selectors": [ ".sds-loader-stripes", ".sds-loader-stripes::before" ], "keyframes": [ "sds-ldStripes" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-swivel", "displayName": "Swivel", "category": "loaders", "kind": "effect", "description": "A dot oscillates side to side with an ease-out-and-back timing.", "selectors": [ ".sds-loader-swivel" ], "keyframes": [ "sds-ldSwivel" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-tape", "displayName": "Tape", "category": "loaders", "kind": "effect", "description": "A ball squashes on landing and stretches on lift in a bounce loop.", "selectors": [ ".sds-loader-tape" ], "keyframes": [ "sds-ldTape" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-target", "displayName": "Target Lock", "category": "loaders", "kind": "effect", "description": "Dashed ring rotates slowly", "selectors": [ ".sds-loader-target", ".sds-loader-target::before" ], "keyframes": [ "sds-cometSpin" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-throb", "displayName": "Throb", "category": "loaders", "kind": "effect", "description": "An energetic overshoot pulse — more forceful and abrupt than breath.", "selectors": [ ".sds-loader-throb" ], "keyframes": [ "sds-ldThrob" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-ticker", "displayName": "Ticker", "category": "loaders", "kind": "effect", "description": "A rectangle flips on its X axis like a flip-board display tile.", "selectors": [ ".sds-loader-ticker" ], "keyframes": [ "sds-ldTickerFlip" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-timer", "displayName": "Timer", "category": "loaders", "kind": "effect", "description": "A pie-fill sweeps around a circle like a countdown clock.", "selectors": [ ".sds-loader-timer" ], "keyframes": [ "sds-ldTimerKf" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-track", "displayName": "Track", "category": "loaders", "kind": "effect", "description": "A dot races back and forth along a horizontal rail.", "selectors": [ ".sds-loader-track", ".sds-loader-track::before" ], "keyframes": [ "sds-ldTrackRun" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-type", "displayName": "Typewriter Loader", "category": "loaders", "kind": "effect", "description": "Monospace text typing in a loop", "selectors": [ ".sds-loader-type" ], "keyframes": [ "sds-typewriterPrem", "sds-cursorBlink" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "width" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [ "width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-vortex", "displayName": "Vortex Spin", "category": "loaders", "kind": "effect", "description": "Conic gradient spins with scale pulse", "selectors": [ ".sds-loader-vortex", ".sds-loader-vortex, .sds-loader-fluid, .sds-loader-morph, .sds-loader-prism, .sds-loader-warp, .sds-loader-plasma-ring, .sds-loader-orbital::before, .sds-loader-orbital::after" ], "keyframes": [ "sds-vortexSpin" ], "tokensUsed": [], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-warp", "displayName": "Warp", "category": "loaders", "kind": "effect", "description": "Warp — loader animation.", "selectors": [ ".sds-loader-warp" ], "keyframes": [ "sds-cometSpin", "sds-loaderWarp" ], "tokensUsed": [], "customProperties": [ "--sds-primary", "--sds-primary-dim" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-wave", "displayName": "Waveform", "category": "loaders", "kind": "effect", "description": "5 bars scale vertically as a wave", "selectors": [ ".sds-loader-wave", ".sds-loader-wave > *", ".sds-loader-wave > *:nth-child(1)", ".sds-loader-wave > *:nth-child(2)", ".sds-loader-wave > *:nth-child(3)", ".sds-loader-wave > *:nth-child(4)", ".sds-loader-wave > *:nth-child(5)" ], "keyframes": [ "sds-waveBar" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-windmill", "displayName": "Windmill", "category": "loaders", "kind": "effect", "description": "Four rectangular blades fade in sequence at the cardinal positions.", "selectors": [ ".sds-loader-windmill", ".sds-loader-windmill > *", ".sds-loader-windmill > *:nth-child(1)", ".sds-loader-windmill > *:nth-child(2)", ".sds-loader-windmill > *:nth-child(3)", ".sds-loader-windmill > *:nth-child(4)" ], "keyframes": [ "sds-ldWindmillFade" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loader-yo-yo", "displayName": "Yo-Yo", "category": "loaders", "kind": "effect", "description": "A ball drops, mini-bounces at the bottom, then snaps back up.", "selectors": [ ".sds-loader-yo-yo" ], "keyframes": [ "sds-ldYoYo" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-loop", "displayName": "Loop", "category": "modifiers", "kind": "modifier", "description": "Loop — playback modifier.", "selectors": [ ".sds-loop, .sds-loop > *" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-magnetic-drift", "displayName": "Magnetic Drift", "category": "text", "kind": "effect", "description": "Circular XY drift like magnetic field pull", "selectors": [ ".sds-magnetic-drift" ], "keyframes": [ "sds-magnetDrift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-magnetic-pull", "displayName": "Magnetic Pull", "category": "interactive", "kind": "interactive", "description": "Cursor attracts chars toward it", "selectors": [ ".sds-magnetic-pull", ".sds-magnetic-pull .sds-char" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-morph-word", "displayName": "Morph Word", "category": "text", "kind": "effect", "description": "ScaleX + skewX + letter-spacing morphing loop", "selectors": [ ".sds-morph-word" ], "keyframes": [ "sds-morphWord" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "letter-spacing", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-neon-flare", "displayName": "Neon Flare", "category": "text", "kind": "effect", "description": "Pulsing neon glow with colour shift", "selectors": [ ".sds-neon-flare" ], "keyframes": [ "sds-neonFlare" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "color", "text-shadow" ], "animatedPaintProps": [ "color", "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-neon-flicker-in", "displayName": "Neon Flicker In", "category": "text", "kind": "effect", "description": "Flickers on like a neon sign", "selectors": [ ".sds-neon-flicker-in" ], "keyframes": [ "sds-neonFlickerIn" ], "tokensUsed": [], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": false, "animatedProps": [ "opacity", "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-neon-pulse-text", "displayName": "Neon Pulse Text", "category": "text", "kind": "effect", "description": "Neon text glow that breathes on a loop", "selectors": [ ".sds-neon-pulse-text" ], "keyframes": [ "sds-neonPulseText", "sds-neonFlickerText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "opacity", "text-shadow" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-normal", "displayName": "Normal", "category": "modifiers", "kind": "modifier", "description": "Normal — playback modifier.", "selectors": [ ".sds-normal" ], "keyframes": [], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-once", "displayName": "Once", "category": "modifiers", "kind": "modifier", "description": "Once — playback modifier.", "selectors": [ ".sds-once" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-oscillate", "displayName": "Oscillate", "category": "text", "kind": "effect", "description": "Sine-wave Y + rotate + scaleX oscillation", "selectors": [ ".sds-oscillate" ], "keyframes": [ "sds-oscillateText" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-pause-hover", "displayName": "Pause Hover", "category": "modifiers", "kind": "modifier", "description": "Pause Hover — playback modifier.", "selectors": [ ".sds-pause-hover:hover, .sds-pause-hover:hover *, .sds-pause-hover:hover::before, .sds-pause-hover:hover::after" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "hover", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-pendulum", "displayName": "Pendulum", "category": "text", "kind": "effect", "description": "Swings like a pendulum (loop)", "selectors": [ ".sds-pendulum" ], "keyframes": [ "sds-pendulum" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-perspective-swing", "displayName": "Perspective Swing", "category": "text", "kind": "effect", "description": "Swings in on the Y-axis with perspective", "selectors": [ ".sds-perspective-swing" ], "keyframes": [ "sds-perspSwing" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-phantom-blur", "displayName": "Phantom Blur", "category": "text", "kind": "effect", "description": "Crystallises from a bright radial blur", "selectors": [ ".sds-phantom-blur" ], "keyframes": [ "sds-phantomBlur" ], "tokensUsed": [ "--sds-duration" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-pixel-in", "displayName": "Pixel In", "category": "text", "kind": "effect", "description": "Resolves from a pixelated blur", "selectors": [ ".sds-pixel-in" ], "keyframes": [ "sds-pixelIn" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-play", "displayName": "Play", "category": "infrastructure", "kind": "infrastructure", "description": "Play — infrastructure animation.", "selectors": [ "[data-sds]:not(.sds-play)", "[data-sds].sds-play", "[data-sds]:not(.sds-play), [data-sds-scroll][class*=\"sds-scroll-\"]:not(.sds-in)" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-pop-in", "displayName": "Pop In", "category": "text", "kind": "effect", "description": "Pops in from zero with a spring", "selectors": [ ".sds-pop-in" ], "keyframes": [ "sds-popIn" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-prism-split", "displayName": "Prism Split", "category": "text", "kind": "effect", "description": "Chromatic aberration effect on loop", "selectors": [ ".sds-prism-split" ], "keyframes": [ "sds-prismSplit" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "letter-spacing", "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-refract", "displayName": "Refract", "category": "text", "kind": "effect", "description": "RGB glitch split, loops smoothly", "selectors": [ ".sds-refract", ".sds-refract, .sds-prism-split, .sds-glitch-flicker, .sds-static-burst, .sds-neon-flare, .sds-scramble-decode, .sds-velocity-blur-text, .sds-neon-pulse-text, .sds-aurora-text, .sds-hologram-text, .sds-morph-word, .sds-levitate, .sds-oscillate, .sds-magnetic-drift, .sds-heat-shimmer, .sds-chromatic-shift" ], "keyframes": [ "sds-refract" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-repulsion-field", "displayName": "Repulsion Field", "category": "interactive", "kind": "interactive", "description": "Cursor pushes chars away", "selectors": [ ".sds-repulsion-field", ".sds-repulsion-field .sds-char" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-reveal-down-mask", "displayName": "Reveal Down Mask", "category": "text", "kind": "effect", "description": "Wipes down behind a mask", "selectors": [ ".sds-reveal-down-mask" ], "keyframes": [ "sds-revealDown" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-reveal-up-mask", "displayName": "Reveal Up Mask", "category": "text", "kind": "effect", "description": "Wipes up behind a mask", "selectors": [ ".sds-reveal-up-mask" ], "keyframes": [ "sds-revealUp" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-ripple-text", "displayName": "Ripple Text", "category": "text", "kind": "effect", "description": "Letter-spacing + scale + blur ripple entrance", "selectors": [ ".sds-ripple-text" ], "keyframes": [ "sds-rippleText" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-roll-in", "displayName": "Roll In", "category": "text", "kind": "effect", "description": "Rolls in rotating from the left", "selectors": [ ".sds-roll-in" ], "keyframes": [ "sds-rollIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-rubber-band", "displayName": "Rubber Band", "category": "text", "kind": "effect", "description": "Stretches like a rubber band", "selectors": [ ".sds-rubber-band" ], "keyframes": [ "sds-rubberBand" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scatter-return", "displayName": "Scatter & Return", "category": "interactive", "kind": "interactive", "description": "Hover scatters chars, leave springs home", "selectors": [ ".sds-scatter-return", ".sds-scatter-return .sds-char" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scramble-decode", "displayName": "Scramble Decode", "category": "text", "kind": "effect", "description": "Blurs and skews repeatedly like decoding", "selectors": [ ".sds-scramble-decode" ], "keyframes": [ "sds-scramblePulse" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-auto", "displayName": "Auto", "category": "infrastructure", "kind": "infrastructure", "description": "Auto — infrastructure animation.", "selectors": [ ".sds-scroll-auto[class*=\"sds-scroll-\"]" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-barrel", "displayName": "Barrel", "category": "scroll", "kind": "effect", "description": "Element tumbles in with a diagonal barrel-roll 3D rotation.", "selectors": [ ".sds-scroll-barrel" ], "keyframes": [ "sds-scrollBarrel" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-blink-in", "displayName": "Blink In", "category": "scroll", "kind": "effect", "description": "Opacity steps up through four discrete levels like a screen powering on.", "selectors": [ ".sds-scroll-blink-in" ], "keyframes": [ "sds-scrollBlinkIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-blur", "displayName": "Blur Ascend", "category": "scroll", "kind": "effect", "description": "Rises and resolves from 16px blur", "selectors": [ ".sds-scroll-blur" ], "keyframes": [ "sds-blurAscend" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-bounce", "displayName": "Bounce", "category": "scroll", "kind": "effect", "description": "Bounce — scroll animation.", "selectors": [ ".sds-scroll-bounce" ], "keyframes": [ "sds-scrollBounce" ], "tokensUsed": [ "--sds-ease-emphasized" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-cascade", "displayName": "Cascade", "category": "scroll", "kind": "effect", "description": "Cascade — scroll animation.", "selectors": [ ".sds-scroll-cascade > *", ".sds-scroll-cascade > *:nth-child(1)", ".sds-scroll-cascade > *:nth-child(2)", ".sds-scroll-cascade > *:nth-child(3)", ".sds-scroll-cascade > *:nth-child(4)", ".sds-scroll-cascade > *:nth-child(5)", ".sds-scroll-cascade > *:nth-child(6)", ".sds-scroll-cascade > *:nth-child(7)", ".sds-scroll-cascade > *:nth-child(8)", ".sds-scroll-cascade > *:nth-child(9)", ".sds-scroll-cascade > *:nth-child(10)", ".sds-scroll-cascade > *:nth-child(11)", ".sds-scroll-cascade > *:nth-child(12)" ], "keyframes": [ "sds-scrollCascadeChild" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-charge", "displayName": "Charge Reveal", "category": "scroll", "kind": "effect", "description": "Charge Reveal — scroll animation.", "selectors": [ ".sds-scroll-charge" ], "keyframes": [ "sds-scrollCharge" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-cinema", "displayName": "Cinema", "category": "scroll", "kind": "effect", "description": "Cinema — scroll animation.", "selectors": [ ".sds-scroll-cinema" ], "keyframes": [ "sds-scrollCinema" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-cinematic", "displayName": "Cinematic", "category": "scroll", "kind": "effect", "description": "Letterbox bars open outward from the center as the element reveals.", "selectors": [ ".sds-scroll-cinematic" ], "keyframes": [ "sds-scrollCinematic" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-clip-left", "displayName": "Clip Left", "category": "scroll", "kind": "effect", "description": "Clip Left — scroll animation.", "selectors": [ ".sds-scroll-clip-left" ], "keyframes": [ "sds-scrollClipLeft" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-clip-right", "displayName": "Clip Right", "category": "scroll", "kind": "effect", "description": "Clip Right — scroll animation.", "selectors": [ ".sds-scroll-clip-right" ], "keyframes": [ "sds-scrollClipRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-contrast-in", "displayName": "Contrast In", "category": "scroll", "kind": "effect", "description": "Emerges from high-contrast darkness into natural color and brightness.", "selectors": [ ".sds-scroll-contrast-in" ], "keyframes": [ "sds-scrollContrastIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-crystallize", "displayName": "Crystallize", "category": "scroll", "kind": "effect", "description": "Crystallize — scroll animation.", "selectors": [ ".sds-scroll-crystallize" ], "keyframes": [ "sds-scrollCrystallize" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-curtain", "displayName": "Curtain Lift", "category": "scroll", "kind": "effect", "description": "Clips up from bottom like a curtain", "selectors": [ ".sds-scroll-curtain" ], "keyframes": [ "sds-curtainLift" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-depth", "displayName": "Depth Enter", "category": "scroll", "kind": "effect", "description": "Portal entrance from deep Z-space", "selectors": [ ".sds-scroll-depth" ], "keyframes": [ "sds-depthPortal" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-dissolve", "displayName": "Dissolve", "category": "scroll", "kind": "effect", "description": "Dissolve — scroll animation.", "selectors": [ ".sds-scroll-dissolve" ], "keyframes": [ "sds-scrollDissolve" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-door-left", "displayName": "Door Left", "category": "scroll", "kind": "effect", "description": "Element swings open from its left edge like a door on a left hinge.", "selectors": [ ".sds-scroll-door-left" ], "keyframes": [ "sds-scrollDoorLeft" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-door-right", "displayName": "Door Right", "category": "scroll", "kind": "effect", "description": "Element swings open from its right edge like a door on a right hinge.", "selectors": [ ".sds-scroll-door-right" ], "keyframes": [ "sds-scrollDoorRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-drift", "displayName": "Drift", "category": "scroll", "kind": "effect", "description": "Drift — scroll animation.", "selectors": [ ".sds-scroll-drift" ], "keyframes": [ "sds-scrollDrift" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-drop-in", "displayName": "Drop In", "category": "scroll", "kind": "effect", "description": "Element drops from above and bounces into its final position.", "selectors": [ ".sds-scroll-drop-in" ], "keyframes": [ "sds-scrollDropIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-elastic", "displayName": "Elastic", "category": "scroll", "kind": "effect", "description": "Elastic — scroll animation.", "selectors": [ ".sds-scroll-elastic" ], "keyframes": [ "sds-scrollElastic" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-elastic-pop", "displayName": "Elastic Pop", "category": "scroll", "kind": "effect", "description": "Elastic Pop — scroll animation.", "selectors": [ ".sds-scroll-elastic-pop" ], "keyframes": [ "sds-scrollElasticPop" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-exhale", "displayName": "Exhale", "category": "scroll", "kind": "effect", "description": "Gently scales down from 112% while fading in — like a slow exhale.", "selectors": [ ".sds-scroll-exhale" ], "keyframes": [ "sds-scrollExhale" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-fade-up", "displayName": "Fade Up", "category": "scroll", "kind": "effect", "description": "Fade Up — scroll animation.", "selectors": [ ".sds-scroll-fade-up" ], "keyframes": [ "sds-viewportRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": "sds-scroll-rise", "sinceVersion": "4.0.3" }, { "name": "sds-scroll-flash", "displayName": "Bright Flash", "category": "scroll", "kind": "effect", "description": "Bright Flash — scroll animation.", "selectors": [ ".sds-scroll-flash" ], "keyframes": [ "sds-scrollFlash" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-flip", "displayName": "Flip Reveal", "category": "scroll", "kind": "effect", "description": "Flip Reveal — scroll animation.", "selectors": [ ".sds-scroll-flip" ], "keyframes": [ "sds-scrollFlip" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-flip-up", "displayName": "Flip Up", "category": "scroll", "kind": "effect", "description": "Element hinges open from its bottom edge like a trap door swinging up.", "selectors": [ ".sds-scroll-flip-up" ], "keyframes": [ "sds-scrollFlipUp" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-float", "displayName": "Float", "category": "scroll", "kind": "effect", "description": "Drifts up 6px with a soft blur dissolve — weightless and ethereal.", "selectors": [ ".sds-scroll-float" ], "keyframes": [ "sds-scrollFloat" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-fog", "displayName": "Fog", "category": "scroll", "kind": "effect", "description": "Fog — scroll animation.", "selectors": [ ".sds-scroll-fog" ], "keyframes": [ "sds-scrollFog" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-glare", "displayName": "Glare", "category": "scroll", "kind": "effect", "description": "Element burns in from a bright overexposed glare to natural.", "selectors": [ ".sds-scroll-glare" ], "keyframes": [ "sds-scrollGlare" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-glitch", "displayName": "Glitch Reveal", "category": "scroll", "kind": "effect", "description": "Glitch burst + viewport rise combo", "selectors": [ ".sds-scroll-glitch" ], "keyframes": [ "sds-staticBurst", "sds-viewportRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-glitch-in", "displayName": "Glitch In", "category": "scroll", "kind": "effect", "description": "Tears in through glitch artifacts — hue shifts, clip flickers, and X displacement.", "selectors": [ ".sds-scroll-glitch-in" ], "keyframes": [ "sds-scrollGlitchIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-gravity", "displayName": "Gravity Land", "category": "scroll", "kind": "effect", "description": "Drops in from above with elastic bounce", "selectors": [ ".sds-scroll-gravity" ], "keyframes": [ "sds-gravityDrop" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-hinge-in", "displayName": "Hinge In", "category": "scroll", "kind": "effect", "description": "Element hinges open from its top edge like a trap door.", "selectors": [ ".sds-scroll-hinge-in" ], "keyframes": [ "sds-scrollHingeIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-hologram", "displayName": "Hologram", "category": "scroll", "kind": "effect", "description": "Hologram — scroll animation.", "selectors": [ ".sds-scroll-hologram" ], "keyframes": [ "sds-scrollHologram" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-ink", "displayName": "Ink", "category": "scroll", "kind": "effect", "description": "Ink — scroll animation.", "selectors": [ ".sds-scroll-ink" ], "keyframes": [ "sds-scrollInk" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-iris", "displayName": "Iris", "category": "scroll", "kind": "effect", "description": "A circular iris expands from the center to reveal the element.", "selectors": [ ".sds-scroll-iris" ], "keyframes": [ "sds-scrollIris" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-jello", "displayName": "Jello", "category": "scroll", "kind": "effect", "description": "Element bounces in with a wobbly jello-like scale and skew oscillation.", "selectors": [ ".sds-scroll-jello" ], "keyframes": [ "sds-scrollJello" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-kaboom", "displayName": "Kaboom", "category": "scroll", "kind": "effect", "description": "Element explodes into view from zero scale with an overshoot pop.", "selectors": [ ".sds-scroll-kaboom" ], "keyframes": [ "sds-scrollKaboom" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-lean", "displayName": "Lean", "category": "scroll", "kind": "effect", "description": "Element leans in from the right in perspective then snaps upright.", "selectors": [ ".sds-scroll-lean" ], "keyframes": [ "sds-scrollLean" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-liquid", "displayName": "Liquid Enter", "category": "scroll", "kind": "effect", "description": "Liquid skew-rise on viewport enter", "selectors": [ ".sds-scroll-liquid" ], "keyframes": [ "sds-liquidRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-magnetic", "displayName": "Magnetic Pull", "category": "scroll", "kind": "effect", "description": "Magnetic Pull — scroll animation.", "selectors": [ ".sds-scroll-magnetic" ], "keyframes": [ "sds-scrollMagnetic" ], "tokensUsed": [ "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-materialize", "displayName": "Materialize", "category": "scroll", "kind": "effect", "description": "Steps through four discrete opacity and blur levels like materializing digitally.", "selectors": [ ".sds-scroll-materialize" ], "keyframes": [ "sds-scrollMaterialize" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-morph", "displayName": "Morph Rise", "category": "scroll", "kind": "effect", "description": "Morph Rise — scroll animation.", "selectors": [ ".sds-scroll-morph" ], "keyframes": [ "sds-scrollMorph" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-neon", "displayName": "Neon Reveal", "category": "scroll", "kind": "effect", "description": "Neon Reveal — scroll animation.", "selectors": [ ".sds-scroll-neon" ], "keyframes": [ "sds-scrollNeon" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "opacity", "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-neon-pop", "displayName": "Neon Pop", "category": "scroll", "kind": "effect", "description": "Scales in with a burst of neon drop-shadow glow that settles.", "selectors": [ ".sds-scroll-neon-pop" ], "keyframes": [ "sds-scrollNeonPop" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-orbit", "displayName": "Orbit Enter", "category": "scroll", "kind": "effect", "description": "Perspective swing from the left", "selectors": [ ".sds-scroll-orbit" ], "keyframes": [ "sds-perspSwing" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-overexpose", "displayName": "Overexpose", "category": "scroll", "kind": "effect", "description": "Element burns in from an overexposed flash to natural brightness.", "selectors": [ ".sds-scroll-overexpose" ], "keyframes": [ "sds-scrollOverexpose" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-peel", "displayName": "Peel", "category": "scroll", "kind": "effect", "description": "Element peels upward from its bottom edge like a sticker lifting.", "selectors": [ ".sds-scroll-peel" ], "keyframes": [ "sds-scrollPeel" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-perspective-left", "displayName": "Perspective Left", "category": "scroll", "kind": "effect", "description": "Perspective Left — scroll animation.", "selectors": [ ".sds-scroll-perspective-left" ], "keyframes": [ "sds-scrollPerspLeft" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-phantom", "displayName": "Phantom Rise", "category": "scroll", "kind": "effect", "description": "Crystallises from a bright blur", "selectors": [ ".sds-scroll-phantom" ], "keyframes": [ "sds-phantomBlur" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-pixel-in", "displayName": "Pixel In", "category": "scroll", "kind": "effect", "description": "Resolves from a heavy blur and slight zoom to sharp full detail.", "selectors": [ ".sds-scroll-pixel-in" ], "keyframes": [ "sds-scrollPixelIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-pop-in", "displayName": "Pop In", "category": "scroll", "kind": "effect", "description": "Snaps from zero to overshoot then settles with a springy multi-step pop.", "selectors": [ ".sds-scroll-pop-in" ], "keyframes": [ "sds-scrollPopIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-prism", "displayName": "Prism Reveal", "category": "scroll", "kind": "effect", "description": "Prism Reveal — scroll animation.", "selectors": [ ".sds-scroll-prism" ], "keyframes": [ "sds-scrollPrism" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-punch", "displayName": "Punch", "category": "scroll", "kind": "effect", "description": "Punch — scroll animation.", "selectors": [ ".sds-scroll-punch" ], "keyframes": [ "sds-scrollPunch" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-radial", "displayName": "Radial Expand", "category": "scroll", "kind": "effect", "description": "Circle expands from the bottom center", "selectors": [ ".sds-scroll-radial" ], "keyframes": [ "sds-radialExpand" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-rise", "displayName": "Viewport Rise", "category": "scroll", "kind": "effect", "description": "Rises up as it enters the viewport", "selectors": [ ".sds-scroll-rise" ], "keyframes": [ "sds-viewportRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-rise-right", "displayName": "Rise Right", "category": "scroll", "kind": "effect", "description": "Element rises diagonally from the lower-left while fading in.", "selectors": [ ".sds-scroll-rise-right" ], "keyframes": [ "sds-scrollRiseRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-roll-in", "displayName": "Roll In", "category": "scroll", "kind": "effect", "description": "Element slides in from the left while rotating into place.", "selectors": [ ".sds-scroll-roll-in" ], "keyframes": [ "sds-scrollRollIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-rotate-in", "displayName": "Rotate In", "category": "scroll", "kind": "effect", "description": "Element rotates from −8° and rises while fading in.", "selectors": [ ".sds-scroll-rotate-in" ], "keyframes": [ "sds-scrollRotateIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-rubber-band", "displayName": "Rubber Band", "category": "scroll", "kind": "effect", "description": "Squashes and stretches into place with rubber-band physics.", "selectors": [ ".sds-scroll-rubber-band" ], "keyframes": [ "sds-scrollRubberBand" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-saturate", "displayName": "Saturate", "category": "scroll", "kind": "effect", "description": "Element transitions from grayscale to full color while fading in.", "selectors": [ ".sds-scroll-saturate" ], "keyframes": [ "sds-scrollSaturate" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-scale", "displayName": "Scale Reveal", "category": "scroll", "kind": "effect", "description": "Scales up from 70% with blur resolve", "selectors": [ ".sds-scroll-scale" ], "keyframes": [ "sds-scaleReveal" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-scan", "displayName": "Scan Line", "category": "scroll", "kind": "effect", "description": "Wipes in from left via clip-path", "selectors": [ ".sds-scroll-scan" ], "keyframes": [ "sds-scanLine" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-sepia", "displayName": "Sepia", "category": "scroll", "kind": "effect", "description": "Element transitions from sepia tone to full color while fading in.", "selectors": [ ".sds-scroll-sepia" ], "keyframes": [ "sds-scrollSepia" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-shatter", "displayName": "Shatter Enter", "category": "scroll", "kind": "effect", "description": "Explodes in from large scale", "selectors": [ ".sds-scroll-shatter" ], "keyframes": [ "sds-shatterIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-shudder", "displayName": "Shudder", "category": "scroll", "kind": "effect", "description": "Shakes horizontally on entry then vibrates to a stop.", "selectors": [ ".sds-scroll-shudder" ], "keyframes": [ "sds-scrollShudder" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-sink", "displayName": "Sink", "category": "scroll", "kind": "effect", "description": "Settles gently downward from above while fading in.", "selectors": [ ".sds-scroll-sink" ], "keyframes": [ "sds-scrollSink" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-skew", "displayName": "Skew", "category": "scroll", "kind": "effect", "description": "Skew — scroll animation.", "selectors": [ ".sds-scroll-skew" ], "keyframes": [ "sds-scrollSkew" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-skid-in", "displayName": "Skid In", "category": "scroll", "kind": "effect", "description": "Slides in fast from the right, overshoots, and brakes.", "selectors": [ ".sds-scroll-skid-in" ], "keyframes": [ "sds-scrollSkidIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-slide", "displayName": "Momentum Slide", "category": "scroll", "kind": "effect", "description": "Slides in from the left with overshoot", "selectors": [ ".sds-scroll-slide" ], "keyframes": [ "sds-momentumSlide" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-slide-right", "displayName": "Slide Right", "category": "scroll", "kind": "effect", "description": "Slide Right — scroll animation.", "selectors": [ ".sds-scroll-slide-right" ], "keyframes": [ "sds-scrollSlideRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-slingshot", "displayName": "Slingshot", "category": "scroll", "kind": "effect", "description": "Compressed from the left then launched forward with elastic overshoot.", "selectors": [ ".sds-scroll-slingshot" ], "keyframes": [ "sds-scrollSlingshot" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-snap", "displayName": "Snap", "category": "scroll", "kind": "effect", "description": "Snap — scroll animation.", "selectors": [ ".sds-scroll-snap" ], "keyframes": [ "sds-scrollSnap" ], "tokensUsed": [ "--sds-ease-bounce" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-spin-y", "displayName": "Spin Y", "category": "scroll", "kind": "effect", "description": "Spins in with a 180° rotateY perspective rotation.", "selectors": [ ".sds-scroll-spin-y" ], "keyframes": [ "sds-scrollSpinY" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-spiral", "displayName": "Spiral", "category": "scroll", "kind": "effect", "description": "Spiral — scroll animation.", "selectors": [ ".sds-scroll-spiral" ], "keyframes": [ "sds-scrollSpiral" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-split", "displayName": "Split Reveal", "category": "scroll", "kind": "effect", "description": "Split Reveal — scroll animation.", "selectors": [ ".sds-scroll-split" ], "keyframes": [ "sds-scrollSplit" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-spring", "displayName": "Spring", "category": "scroll", "kind": "effect", "description": "Spring — scroll animation.", "selectors": [ ".sds-scroll-spring" ], "keyframes": [ "sds-scrollSpring" ], "tokensUsed": [ "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stagger-fade", "displayName": "Stagger Fade", "category": "scroll", "kind": "effect", "description": "Children fade in one by one in a staggered sequence.", "selectors": [ ".sds-scroll-stagger-fade > *", ".sds-scroll-stagger-fade > *:nth-child(2)", ".sds-scroll-stagger-fade > *:nth-child(3)", ".sds-scroll-stagger-fade > *:nth-child(4)", ".sds-scroll-stagger-fade > *:nth-child(5)", ".sds-scroll-stagger-fade > *:nth-child(6)" ], "keyframes": [ "sds-scrollStaggerFadeChild" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stagger-grid", "displayName": "Stagger Grid", "category": "scroll", "kind": "effect", "description": "Grid children rise in sequence", "selectors": [ ".sds-scroll-stagger-grid > *", ".sds-scroll-stagger-grid > *:nth-child(1)", ".sds-scroll-stagger-grid > *:nth-child(2)", ".sds-scroll-stagger-grid > *:nth-child(3)", ".sds-scroll-stagger-grid > *:nth-child(4)", ".sds-scroll-stagger-grid > *:nth-child(5)", ".sds-scroll-stagger-grid > *:nth-child(6)", ".sds-scroll-stagger-grid > *:nth-child(7)", ".sds-scroll-stagger-grid > *:nth-child(8)", ".sds-scroll-stagger-grid > *:nth-child(9)", ".sds-scroll-stagger-grid > *:nth-child(10)", ".sds-scroll-stagger-grid > *:nth-child(11)", ".sds-scroll-stagger-grid > *:nth-child(12)" ], "keyframes": [ "sds-viewportRise" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stagger-pop", "displayName": "Stagger Pop", "category": "scroll", "kind": "effect", "description": "Children pop in with scale+rotate stagger", "selectors": [ ".sds-scroll-stagger-pop > *", ".sds-scroll-stagger-pop > *:nth-child(1)", ".sds-scroll-stagger-pop > *:nth-child(2)", ".sds-scroll-stagger-pop > *:nth-child(3)", ".sds-scroll-stagger-pop > *:nth-child(4)", ".sds-scroll-stagger-pop > *:nth-child(5)", ".sds-scroll-stagger-pop > *:nth-child(6)", ".sds-scroll-stagger-pop > *:nth-child(7)", ".sds-scroll-stagger-pop > *:nth-child(8)", ".sds-scroll-stagger-pop > *:nth-child(9)", ".sds-scroll-stagger-pop > *:nth-child(10)", ".sds-scroll-stagger-pop > *:nth-child(11)", ".sds-scroll-stagger-pop > *:nth-child(12)" ], "keyframes": [ "sds-staggerPop" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stagger-rise", "displayName": "Stagger Rise", "category": "scroll", "kind": "effect", "description": "Children rise up and fade in one by one in sequence.", "selectors": [ ".sds-scroll-stagger-rise > *", ".sds-scroll-stagger-rise > *:nth-child(2)", ".sds-scroll-stagger-rise > *:nth-child(3)", ".sds-scroll-stagger-rise > *:nth-child(4)", ".sds-scroll-stagger-rise > *:nth-child(5)", ".sds-scroll-stagger-rise > *:nth-child(6)" ], "keyframes": [ "sds-scrollStaggerRiseChild" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stagger-slide", "displayName": "Stagger Slide", "category": "scroll", "kind": "effect", "description": "Children slide in from the left one by one in a staggered sequence.", "selectors": [ ".sds-scroll-stagger-slide > *", ".sds-scroll-stagger-slide > *:nth-child(2)", ".sds-scroll-stagger-slide > *:nth-child(3)", ".sds-scroll-stagger-slide > *:nth-child(4)", ".sds-scroll-stagger-slide > *:nth-child(5)", ".sds-scroll-stagger-slide > *:nth-child(6)" ], "keyframes": [ "sds-scrollStaggerSlideChild" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-streak", "displayName": "Streak", "category": "scroll", "kind": "effect", "description": "Streak — scroll animation.", "selectors": [ ".sds-scroll-streak" ], "keyframes": [ "sds-scrollStreak" ], "tokensUsed": [ "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-stretch", "displayName": "Stretch", "category": "scroll", "kind": "effect", "description": "Element stretches out from a narrow vertical sliver to full width.", "selectors": [ ".sds-scroll-stretch" ], "keyframes": [ "sds-scrollStretchIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-thermal", "displayName": "Thermal", "category": "scroll", "kind": "effect", "description": "Element resolves from a thermal hue-shift and high saturation to natural color.", "selectors": [ ".sds-scroll-thermal" ], "keyframes": [ "sds-scrollThermal" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-tidal", "displayName": "Tidal", "category": "scroll", "kind": "effect", "description": "Slides in from the left with a wave-like settling oscillation.", "selectors": [ ".sds-scroll-tidal" ], "keyframes": [ "sds-scrollTidal" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-tilt", "displayName": "Tilt Reveal", "category": "scroll", "kind": "effect", "description": "Folds down from a 50° X-axis rotation", "selectors": [ ".sds-scroll-tilt" ], "keyframes": [ "sds-tiltReveal" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-typewriter", "displayName": "Typewriter", "category": "scroll", "kind": "effect", "description": "Reveals in discrete steps from left to right like a typewriter printing.", "selectors": [ ".sds-scroll-typewriter" ], "keyframes": [ "sds-scrollTypewriter" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-unfold", "displayName": "Unfold", "category": "scroll", "kind": "effect", "description": "Unfold — scroll animation.", "selectors": [ ".sds-scroll-unfold" ], "keyframes": [ "sds-scrollUnfold" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-unfurl", "displayName": "Unfurl", "category": "scroll", "kind": "effect", "description": "Unrolls from the top-left corner with a gentle rotate and scale.", "selectors": [ ".sds-scroll-unfurl" ], "keyframes": [ "sds-scrollUnfurl" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-velvet", "displayName": "Velvet Drop Scroll", "category": "scroll", "kind": "effect", "description": "Velvet drop on viewport enter", "selectors": [ ".sds-scroll-velvet" ], "keyframes": [ "sds-velvetDrop" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-vortex", "displayName": "Vortex", "category": "scroll", "kind": "effect", "description": "Vortex — scroll animation.", "selectors": [ ".sds-scroll-vortex" ], "keyframes": [ "sds-scrollVortex" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-warp", "displayName": "Scroll Warp", "category": "scroll", "kind": "effect", "description": "Perspective-warp entrance from below", "selectors": [ ".sds-scroll-warp" ], "keyframes": [ "sds-scrollWarp" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-warp-in", "displayName": "Warp Enter", "category": "scroll", "kind": "effect", "description": "Warp Enter — scroll animation.", "selectors": [ ".sds-scroll-warp-in" ], "keyframes": [ "sds-scrollWarpIn" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-wave-rise", "displayName": "Wave Rise", "category": "scroll", "kind": "effect", "description": "Wave Rise — scroll animation.", "selectors": [ ".sds-scroll-wave-rise > *", ".sds-scroll-wave-rise > *:nth-child(1)", ".sds-scroll-wave-rise > *:nth-child(2)", ".sds-scroll-wave-rise > *:nth-child(3)", ".sds-scroll-wave-rise > *:nth-child(4)", ".sds-scroll-wave-rise > *:nth-child(5)", ".sds-scroll-wave-rise > *:nth-child(6)", ".sds-scroll-wave-rise > *:nth-child(7)", ".sds-scroll-wave-rise > *:nth-child(8)", ".sds-scroll-wave-rise > *:nth-child(9)", ".sds-scroll-wave-rise > *:nth-child(10)", ".sds-scroll-wave-rise > *:nth-child(11)", ".sds-scroll-wave-rise > *:nth-child(12)" ], "keyframes": [ "sds-viewportRise" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-wipe-right", "displayName": "Wipe Right", "category": "scroll", "kind": "effect", "description": "Element is revealed by a clip-path that wipes across from left to right.", "selectors": [ ".sds-scroll-wipe-right" ], "keyframes": [ "sds-scrollWipeRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-wipe-up", "displayName": "Wipe Up", "category": "scroll", "kind": "effect", "description": "Element is revealed by a clip-path that wipes upward from the bottom.", "selectors": [ ".sds-scroll-wipe-up" ], "keyframes": [ "sds-scrollWipeUp" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-zoom-blur", "displayName": "Zoom Blur", "category": "scroll", "kind": "effect", "description": "Zoom Blur — scroll animation.", "selectors": [ ".sds-scroll-zoom-blur" ], "keyframes": [ "sds-scrollZoomBlur" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-zoom-in", "displayName": "Zoom In", "category": "scroll", "kind": "effect", "description": "Element scales up from 50% while fading in.", "selectors": [ ".sds-scroll-zoom-in" ], "keyframes": [ "sds-scrollZoomIn" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-scroll-zoom-out", "displayName": "Zoom Out", "category": "scroll", "kind": "effect", "description": "Element scales down from 135% while fading in.", "selectors": [ ".sds-scroll-zoom-out" ], "keyframes": [ "sds-scrollZoomOut" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": "sds-scroll (optional)", "trigger": "scroll", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-shadow-lift", "displayName": "Shadow Lift", "category": "text", "kind": "effect", "description": "Lifts up casting a soft shadow", "selectors": [ ".sds-shadow-lift" ], "keyframes": [ "sds-shadowLift" ], "tokensUsed": [], "customProperties": [], "compositorSafe": false, "loop": true, "animatedProps": [ "text-shadow", "transform" ], "animatedPaintProps": [ "text-shadow" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-shatter-in", "displayName": "Shatter In", "category": "text", "kind": "effect", "description": "Explodes in from massive scale with blur", "selectors": [ ".sds-shatter-in" ], "keyframes": [ "sds-shatterIn" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-shimmer-sweep", "displayName": "Shimmer Sweep", "category": "text", "kind": "effect", "description": "A light shimmer sweeps across (loop)", "selectors": [ ".sds-shimmer-sweep" ], "keyframes": [ "sds-shimmerSweep" ], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [ "--sds-accent", "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "background-position" ], "animatedPaintProps": [ "background-position" ], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-shockwave", "displayName": "Shockwave", "category": "interactive", "kind": "interactive", "description": "Click fires a radial impulse", "selectors": [ ".sds-shockwave", ".sds-shockwave .sds-char" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-signal-wave", "displayName": "Signal Wave", "category": "text", "kind": "effect", "description": "Wider stagger wave, slower period", "selectors": [ ".sds-signal-wave > *", ".sds-signal-wave > *:nth-child(1)", ".sds-signal-wave > *:nth-child(2)", ".sds-signal-wave > *:nth-child(3)", ".sds-signal-wave > *:nth-child(4)", ".sds-signal-wave > *:nth-child(5)", ".sds-signal-wave > *:nth-child(6)", ".sds-signal-wave > *:nth-child(7)", ".sds-signal-wave > *:nth-child(8)", ".sds-signal-wave > *:nth-child(9)", ".sds-signal-wave > *:nth-child(10)", ".sds-signal-wave > *:nth-child(11)", ".sds-signal-wave > *:nth-child(12)" ], "keyframes": [ "sds-kineticWave" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-skew-slide", "displayName": "Skew Slide", "category": "text", "kind": "effect", "description": "Slides in with a skew shear", "selectors": [ ".sds-skew-slide" ], "keyframes": [ "sds-skewSlide" ], "tokensUsed": [ "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-slant-rise", "displayName": "Slant Rise", "category": "text", "kind": "effect", "description": "Rises in on a slant", "selectors": [ ".sds-slant-rise" ], "keyframes": [ "sds-slantRise" ], "tokensUsed": [ "--sds-duration-base", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-slice-reveal", "displayName": "Slice Reveal", "category": "text", "kind": "effect", "description": "Wipes in from left via clip-path", "selectors": [ ".sds-slice-reveal" ], "keyframes": [ "sds-sliceReveal" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-slide-blur-left", "displayName": "Slide Blur Left", "category": "text", "kind": "effect", "description": "Slides from left through a blur", "selectors": [ ".sds-slide-blur-left" ], "keyframes": [ "sds-slideBlurLeft" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-slide-blur-right", "displayName": "Slide Blur Right", "category": "text", "kind": "effect", "description": "Slides from right through a blur", "selectors": [ ".sds-slide-blur-right" ], "keyframes": [ "sds-slideBlurRight" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-slow", "displayName": "Slow", "category": "modifiers", "kind": "modifier", "description": "Slow — playback modifier.", "selectors": [ ".sds-slow" ], "keyframes": [], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-smoke-reveal", "displayName": "Smoke Reveal", "category": "text", "kind": "effect", "description": "Resolves from a smoke-like blur field", "selectors": [ ".sds-smoke-reveal" ], "keyframes": [ "sds-focusPull" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-split-reveal", "displayName": "Split Reveal", "category": "text", "kind": "effect", "description": "Polygon clip-path splits open from center", "selectors": [ ".sds-split-reveal" ], "keyframes": [ "sds-splitReveal" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-spotlight", "displayName": "Spotlight", "category": "text", "kind": "effect", "description": "Brightens in under a spotlight", "selectors": [ ".sds-spotlight" ], "keyframes": [ "sds-spotlightText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "filter", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-spring-kerning", "displayName": "Spring Kerning", "category": "interactive", "kind": "interactive", "description": "Mouse X expands/compresses spacing", "selectors": [ ".sds-spring-kerning" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "cursor", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-squash-stretch", "displayName": "Squash Stretch", "category": "text", "kind": "effect", "description": "Squashes then stretches into place", "selectors": [ ".sds-squash-stretch" ], "keyframes": [ "sds-squashStretch" ], "tokensUsed": [ "--sds-duration-base", "--sds-ease-spring" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-stagger-chars", "displayName": "Stagger Chars", "category": "text", "kind": "effect", "description": "Up to 12 children stagger in with skewY", "selectors": [ ".sds-stagger-chars > *", ".sds-stagger-chars > *:nth-child(1)", ".sds-stagger-chars > *:nth-child(2)", ".sds-stagger-chars > *:nth-child(3)", ".sds-stagger-chars > *:nth-child(4)", ".sds-stagger-chars > *:nth-child(5)", ".sds-stagger-chars > *:nth-child(6)", ".sds-stagger-chars > *:nth-child(7)", ".sds-stagger-chars > *:nth-child(8)", ".sds-stagger-chars > *:nth-child(9)", ".sds-stagger-chars > *:nth-child(10)", ".sds-stagger-chars > *:nth-child(11)", ".sds-stagger-chars > *:nth-child(12)" ], "keyframes": [ "sds-staggerChar" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": true, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-static-burst", "displayName": "Static Burst", "category": "text", "kind": "effect", "description": "Glitchy signal-noise corruption loop", "selectors": [ ".sds-static-burst" ], "keyframes": [ "sds-staticBurst" ], "tokensUsed": [ "--sds-duration-dramatic" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-streak-in", "displayName": "Streak In", "category": "text", "kind": "effect", "description": "High-speed streak entrance from the left", "selectors": [ ".sds-streak-in" ], "keyframes": [ "sds-streakIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-strike-through", "displayName": "Strike Through", "category": "text", "kind": "effect", "description": "Strike line draws across", "selectors": [ ".sds-strike-through", ".sds-strike-through::after" ], "keyframes": [ "sds-strikeThrough" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [ "--sds-accent" ], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-swing-in", "displayName": "Swing In", "category": "text", "kind": "effect", "description": "Swings in with a pendulum overshoot", "selectors": [ ".sds-swing-in" ], "keyframes": [ "sds-swingIn" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-tada", "displayName": "Tada", "category": "text", "kind": "effect", "description": "Celebratory scale-and-rotate tada", "selectors": [ ".sds-tada" ], "keyframes": [ "sds-tadaText" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-tracking-contract", "displayName": "Tracking Contract", "category": "text", "kind": "effect", "description": "Letters contract into place", "selectors": [ ".sds-tracking-contract" ], "keyframes": [ "sds-trackingContract" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "filter", "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-tracking-expand", "displayName": "Tracking Expand", "category": "text", "kind": "effect", "description": "Letters expand out into place", "selectors": [ ".sds-tracking-expand" ], "keyframes": [ "sds-trackingExpand" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": false, "loop": false, "animatedProps": [ "letter-spacing", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [ "letter-spacing" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-typewriter-pro", "displayName": "Typewriter Pro", "category": "text", "kind": "effect", "description": "Classic typewriter with blinking cursor", "selectors": [ ".sds-typewriter-pro" ], "keyframes": [ "sds-typewriterPrem", "sds-cursorBlink" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "width" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [ "width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-typing-caret", "displayName": "Typing Caret", "category": "text", "kind": "effect", "description": "Types out with a blinking caret", "selectors": [ ".sds-typing-caret" ], "keyframes": [ "sds-typingCaretExpand", "sds-cursorBlink" ], "tokensUsed": [ "--sds-duration-base" ], "customProperties": [ "--sds-primary" ], "compositorSafe": false, "loop": true, "animatedProps": [ "border-color", "width" ], "animatedPaintProps": [ "border-color" ], "animatedLayoutProps": [ "width" ], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-underline-grow", "displayName": "Underline Grow", "category": "text", "kind": "effect", "description": "Underline draws on from left", "selectors": [ ".sds-underline-grow", ".sds-underline-grow::after" ], "keyframes": [ "sds-underlineGrow" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [ "--sds-primary" ], "compositorSafe": true, "loop": false, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-unfurl", "displayName": "Unfurl", "category": "text", "kind": "effect", "description": "Clip-path inset + scaleX unfurls from the left", "selectors": [ ".sds-unfurl" ], "keyframes": [ "sds-unfurlText" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-vapor-rise", "displayName": "Vapor Rise", "category": "text", "kind": "effect", "description": "Rises and sharpens from a vapor blur", "selectors": [ ".sds-vapor-rise" ], "keyframes": [ "sds-vaporRise" ], "tokensUsed": [ "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-velocity-blur-text", "displayName": "Velocity Blur", "category": "text", "kind": "effect", "description": "Streaks in from left with motion blur", "selectors": [ ".sds-velocity-blur-text" ], "keyframes": [ "sds-velocityBlur" ], "tokensUsed": [ "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-velvet-drop", "displayName": "Velvet Drop", "category": "text", "kind": "effect", "description": "Drops in with a soft blur and bounce", "selectors": [ ".sds-velvet-drop" ], "keyframes": [ "sds-velvetDrop" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-vibrate", "displayName": "Vibrate", "category": "text", "kind": "effect", "description": "Rapid vibrate buzz (loop)", "selectors": [ ".sds-vibrate" ], "keyframes": [ "sds-vibrate" ], "tokensUsed": [ "--sds-duration-instant" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-wave-cascade", "displayName": "Wave Cascade", "category": "text", "kind": "effect", "description": "Disturbance propagates char-to-char (loop)", "selectors": [ ".sds-wave-cascade .sds-char" ], "keyframes": [ "sds-waveCascade" ], "tokensUsed": [ "--sds-duration-slow" ], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": true, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-weight-drop", "displayName": "Weight Drop", "category": "text", "kind": "effect", "description": "Overshoot gravity with extreme easing", "selectors": [ ".sds-weight-drop" ], "keyframes": [ "sds-gravityDrop" ], "tokensUsed": [ "--sds-ease-accelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-wipe-left", "displayName": "Wipe Left", "category": "text", "kind": "effect", "description": "Clip-wipes in to the left", "selectors": [ ".sds-wipe-left" ], "keyframes": [ "sds-wipeLeft" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-wipe-right", "displayName": "Wipe Right", "category": "text", "kind": "effect", "description": "Clip-wipes in to the right", "selectors": [ ".sds-wipe-right" ], "keyframes": [ "sds-wipeRight" ], "tokensUsed": [ "--sds-duration", "--sds-easing" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "clip-path", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-wobble", "displayName": "Wobble", "category": "text", "kind": "effect", "description": "Wobbles side to side on entry", "selectors": [ ".sds-wobble" ], "keyframes": [ "sds-wobbleText" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": true, "animatedProps": [ "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-word-blur-in", "displayName": "Word Blur In", "category": "text", "kind": "effect", "description": "Blur resolves to sharp with scale focus", "selectors": [ ".sds-word-blur-in" ], "keyframes": [ "sds-wordBlurIn" ], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-word-morph", "displayName": "Word Morph", "category": "interactive", "kind": "interactive", "description": "Cycles through words (loop)", "selectors": [ ".sds-word-morph" ], "keyframes": [], "tokensUsed": [], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": true, "jsEngine": "motion-interactive", "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-xslow", "displayName": "Xslow", "category": "modifiers", "kind": "modifier", "description": "Xslow — playback modifier.", "selectors": [ ".sds-xslow" ], "keyframes": [], "tokensUsed": [ "--sds-duration-slower" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-zoom-out-in", "displayName": "Zoom Out In", "category": "text", "kind": "effect", "description": "Settles from oversized with blur", "selectors": [ ".sds-zoom-out-in" ], "keyframes": [ "sds-zoomFar" ], "tokensUsed": [ "--sds-ease-decelerate" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" }, { "name": "sds-zoom-punch", "displayName": "Zoom Punch", "category": "text", "kind": "effect", "description": "Punches in from tiny to full with overshoot", "selectors": [ ".sds-zoom-punch" ], "keyframes": [ "sds-zoomPunch" ], "tokensUsed": [ "--sds-ease-standard" ], "customProperties": [], "compositorSafe": true, "loop": false, "animatedProps": [ "filter", "opacity", "transform" ], "animatedPaintProps": [], "animatedLayoutProps": [], "requiresCharSplit": false, "requiresChildren": false, "inputWrap": false, "requiresJs": false, "jsEngine": null, "trigger": "load", "deprecated": false, "aliasOf": null, "sinceVersion": "4.0.3" } ] }