73 lines
2.0 KiB
JSON
73 lines
2.0 KiB
JSON
{
|
|
"motion": {
|
|
"$description": "Greyhaven Design System — Animation & Motion Tokens",
|
|
"duration": {
|
|
"fast": {
|
|
"$type": "duration",
|
|
"$value": "150ms",
|
|
"$description": "Quick transitions — tooltips, hover states"
|
|
},
|
|
"normal": {
|
|
"$type": "duration",
|
|
"$value": "200ms",
|
|
"$description": "Default transitions — most UI interactions"
|
|
},
|
|
"slow": {
|
|
"$type": "duration",
|
|
"$value": "300ms",
|
|
"$description": "Deliberate transitions — modals, drawers, accordions"
|
|
}
|
|
},
|
|
"easing": {
|
|
"default": {
|
|
"$type": "cubicBezier",
|
|
"$value": [0.4, 0, 0.2, 1],
|
|
"$description": "Standard ease-in-out"
|
|
},
|
|
"in": {
|
|
"$type": "cubicBezier",
|
|
"$value": [0.4, 0, 1, 1],
|
|
"$description": "Ease-in for exits"
|
|
},
|
|
"out": {
|
|
"$type": "cubicBezier",
|
|
"$value": [0, 0, 0.2, 1],
|
|
"$description": "Ease-out for entrances"
|
|
}
|
|
},
|
|
"keyframes": {
|
|
"$description": "Named animation patterns used by components",
|
|
"accordion-down": {
|
|
"$description": "Accordion open — height 0 to auto"
|
|
},
|
|
"accordion-up": {
|
|
"$description": "Accordion close — height auto to 0"
|
|
},
|
|
"spin": {
|
|
"$description": "Spinner rotation — 360deg continuous"
|
|
},
|
|
"pulse": {
|
|
"$description": "Skeleton loading — opacity fade in/out"
|
|
},
|
|
"fade-in": {
|
|
"$description": "Generic entrance — opacity 0 to 1"
|
|
},
|
|
"fade-out": {
|
|
"$description": "Generic exit — opacity 1 to 0"
|
|
},
|
|
"slide-in-from-top": {
|
|
"$description": "Dropdown entrance — translate-y negative to 0"
|
|
},
|
|
"slide-in-from-bottom": {
|
|
"$description": "Drawer entrance — translate-y positive to 0"
|
|
},
|
|
"zoom-in": {
|
|
"$description": "Dialog entrance — scale 0.95 to 1 + fade"
|
|
},
|
|
"zoom-out": {
|
|
"$description": "Dialog exit — scale 1 to 0.95 + fade"
|
|
}
|
|
}
|
|
}
|
|
}
|