[{"data":1,"prerenderedAt":3300},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-design-tokens-composables-easing":407,"-docs-theme-design-tokens-composables-easing-surround":3295},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":3287,"extension":3288,"links":3289,"meta":3290,"navigation":3291,"path":190,"seo":3292,"sitemap":3293,"stem":191,"__hash__":3294},"docs_theme/docs/theme/design-tokens/02.composables/06.easing.md","Easing Design Tokens",{"type":411,"value":412,"toc":3270},"minimark",[413,417,421,425,428,462,468,478,934,954,968,972,977,1147,1152,1226,1230,1241,1436,1443,1447,1458,1491,1505,1509,1512,2008,2012,2016,2019,2352,2356,2359,2951,2955,3026,3036,3040,3266],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"The easing composables help you create consistent animation timing systems with minimal code. They generate easing variables that can be easily referenced throughout your application, enabling flexible theming and consistent motion design.",[414,422,424],{"id":423},"why-use-easing-composables","Why use easing composables?",[418,426,427],{},"Easing composables help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Centralize timing functions",": Define all your easing curves in one place for easy management.",[432,440,441,444],{},[435,442,443],{},"Enable flexible theming",": Override easing values to instantly update animations across your application.",[432,446,447,450],{},[435,448,449],{},"Maintain consistency",": Use semantic names to ensure consistent motion throughout your design system.",[432,452,453,456,457,461],{},[435,454,455],{},"Access advanced easings",": Use spring and bounce effects with the CSS ",[458,459,460],"code",{},"linear()"," function.",[414,463,465],{"id":464},"useeasingdesigntokens",[458,466,467],{},"useEasingDesignTokens",[418,469,470,471,474,475,477],{},"The ",[458,472,473],{},"useEasingDesignTokens()"," function creates a set of easing variables from a simple object of easing value definitions. It includes comprehensive defaults covering CSS keywords, cubic-bezier curves, and ",[458,476,460],{}," functions for spring and bounce effects.",[479,480,481,785],"tabs",{},[482,483,486],"tabs-item",{"icon":484,"label":485},"i-lucide-code","Code",[487,488,494],"pre",{"className":489,"code":490,"filename":491,"language":492,"meta":493,"style":493},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    easing,\n    easingEaseInOut,\n    easingEaseOutCubic,\n    easingSpring,\n    easingBounce,\n} = useEasingDesignTokens(s, {\n    default: '@easing.ease-out-cubic',\n    'ease-in-out': 'ease-in-out',\n    'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n    spring: 'linear(0, 0.0018, 0.0069 1.15%, ...)',\n    bounce: 'linear(0, 0.004, 0.016, ...)',\n} as const);\n\nexport default s;\n","styleframe.config.ts","ts","",[458,495,496,532,555,561,582,587,595,604,612,620,628,636,655,674,695,716,733,750,766,771],{"__ignoreMap":493},[497,498,501,505,509,513,516,519,522,526,529],"span",{"class":499,"line":500},"line",1,[497,502,504],{"class":503},"s7zQu","import",[497,506,508],{"class":507},"sMK4o"," {",[497,510,512],{"class":511},"sTEyZ"," styleframe",[497,514,515],{"class":507}," }",[497,517,518],{"class":503}," from",[497,520,521],{"class":507}," '",[497,523,525],{"class":524},"sfazB","styleframe",[497,527,528],{"class":507},"'",[497,530,531],{"class":507},";\n",[497,533,535,537,539,542,544,546,548,551,553],{"class":499,"line":534},2,[497,536,504],{"class":503},[497,538,508],{"class":507},[497,540,541],{"class":511}," useEasingDesignTokens",[497,543,515],{"class":507},[497,545,518],{"class":503},[497,547,521],{"class":507},[497,549,550],{"class":524},"@styleframe/theme",[497,552,528],{"class":507},[497,554,531],{"class":507},[497,556,558],{"class":499,"line":557},3,[497,559,560],{"emptyLinePlaceholder":206},"\n",[497,562,564,568,571,574,577,580],{"class":499,"line":563},4,[497,565,567],{"class":566},"spNyl","const",[497,569,570],{"class":511}," s ",[497,572,573],{"class":507},"=",[497,575,512],{"class":576},"s2Zo4",[497,578,579],{"class":511},"()",[497,581,531],{"class":507},[497,583,585],{"class":499,"line":584},5,[497,586,560],{"emptyLinePlaceholder":206},[497,588,590,592],{"class":499,"line":589},6,[497,591,567],{"class":566},[497,593,594],{"class":507}," {\n",[497,596,598,601],{"class":499,"line":597},7,[497,599,600],{"class":511},"    easing",[497,602,603],{"class":507},",\n",[497,605,607,610],{"class":499,"line":606},8,[497,608,609],{"class":511},"    easingEaseInOut",[497,611,603],{"class":507},[497,613,615,618],{"class":499,"line":614},9,[497,616,617],{"class":511},"    easingEaseOutCubic",[497,619,603],{"class":507},[497,621,623,626],{"class":499,"line":622},10,[497,624,625],{"class":511},"    easingSpring",[497,627,603],{"class":507},[497,629,631,634],{"class":499,"line":630},11,[497,632,633],{"class":511},"    easingBounce",[497,635,603],{"class":507},[497,637,639,642,645,647,650,653],{"class":499,"line":638},12,[497,640,641],{"class":507},"}",[497,643,644],{"class":507}," =",[497,646,541],{"class":576},[497,648,649],{"class":511},"(s",[497,651,652],{"class":507},",",[497,654,594],{"class":507},[497,656,658,662,665,667,670,672],{"class":499,"line":657},13,[497,659,661],{"class":660},"swJcz","    default",[497,663,664],{"class":507},":",[497,666,521],{"class":507},[497,668,669],{"class":524},"@easing.ease-out-cubic",[497,671,528],{"class":507},[497,673,603],{"class":507},[497,675,677,680,683,685,687,689,691,693],{"class":499,"line":676},14,[497,678,679],{"class":507},"    '",[497,681,682],{"class":660},"ease-in-out",[497,684,528],{"class":507},[497,686,664],{"class":507},[497,688,521],{"class":507},[497,690,682],{"class":524},[497,692,528],{"class":507},[497,694,603],{"class":507},[497,696,698,700,703,705,707,709,712,714],{"class":499,"line":697},15,[497,699,679],{"class":507},[497,701,702],{"class":660},"ease-out-cubic",[497,704,528],{"class":507},[497,706,664],{"class":507},[497,708,521],{"class":507},[497,710,711],{"class":524},"cubic-bezier(0.215, 0.61, 0.355, 1)",[497,713,528],{"class":507},[497,715,603],{"class":507},[497,717,719,722,724,726,729,731],{"class":499,"line":718},16,[497,720,721],{"class":660},"    spring",[497,723,664],{"class":507},[497,725,521],{"class":507},[497,727,728],{"class":524},"linear(0, 0.0018, 0.0069 1.15%, ...)",[497,730,528],{"class":507},[497,732,603],{"class":507},[497,734,736,739,741,743,746,748],{"class":499,"line":735},17,[497,737,738],{"class":660},"    bounce",[497,740,664],{"class":507},[497,742,521],{"class":507},[497,744,745],{"class":524},"linear(0, 0.004, 0.016, ...)",[497,747,528],{"class":507},[497,749,603],{"class":507},[497,751,753,755,758,761,764],{"class":499,"line":752},18,[497,754,641],{"class":507},[497,756,757],{"class":503}," as",[497,759,760],{"class":566}," const",[497,762,763],{"class":511},")",[497,765,531],{"class":507},[497,767,769],{"class":499,"line":768},19,[497,770,560],{"emptyLinePlaceholder":206},[497,772,774,777,780,783],{"class":499,"line":773},20,[497,775,776],{"class":503},"export",[497,778,779],{"class":503}," default",[497,781,782],{"class":511}," s",[497,784,531],{"class":507},[482,786,788],{"icon":140,"label":787},"Output",[487,789,794],{"className":790,"code":791,"filename":792,"language":793,"meta":493,"style":493},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",":root {\n    --easing--ease-in-out: ease-in-out;\n    --easing--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n    --easing--spring: linear(0, 0.0018, 0.0069 1.15%, ...);\n    --easing--bounce: linear(0, 0.004, 0.016, ...);\n    --easing: var(--easing--ease-out-cubic);\n}\n","styleframe/index.css","css",[458,795,796,805,817,852,885,912,929],{"__ignoreMap":493},[497,797,798,800,803],{"class":499,"line":500},[497,799,664],{"class":507},[497,801,802],{"class":566},"root",[497,804,594],{"class":507},[497,806,807,810,812,815],{"class":499,"line":534},[497,808,809],{"class":511},"    --easing--ease-in-out",[497,811,664],{"class":507},[497,813,814],{"class":511}," ease-in-out",[497,816,531],{"class":507},[497,818,819,822,824,827,830,834,836,839,841,844,846,849],{"class":499,"line":557},[497,820,821],{"class":511},"    --easing--ease-out-cubic",[497,823,664],{"class":507},[497,825,826],{"class":576}," cubic-bezier",[497,828,829],{"class":507},"(",[497,831,833],{"class":832},"sbssI","0.215",[497,835,652],{"class":507},[497,837,838],{"class":832}," 0.61",[497,840,652],{"class":507},[497,842,843],{"class":832}," 0.355",[497,845,652],{"class":507},[497,847,848],{"class":832}," 1",[497,850,851],{"class":507},");\n",[497,853,854,857,859,862,865,867,870,872,875,878,880,883],{"class":499,"line":563},[497,855,856],{"class":511},"    --easing--spring",[497,858,664],{"class":507},[497,860,861],{"class":511}," linear(",[497,863,864],{"class":832},"0",[497,866,652],{"class":507},[497,868,869],{"class":832}," 0.0018",[497,871,652],{"class":507},[497,873,874],{"class":832}," 0.0069",[497,876,877],{"class":832}," 1.15%",[497,879,652],{"class":507},[497,881,882],{"class":511}," ...)",[497,884,531],{"class":507},[497,886,887,890,892,894,896,898,901,903,906,908,910],{"class":499,"line":584},[497,888,889],{"class":511},"    --easing--bounce",[497,891,664],{"class":507},[497,893,861],{"class":511},[497,895,864],{"class":832},[497,897,652],{"class":507},[497,899,900],{"class":832}," 0.004",[497,902,652],{"class":507},[497,904,905],{"class":832}," 0.016",[497,907,652],{"class":507},[497,909,882],{"class":511},[497,911,531],{"class":507},[497,913,914,917,919,922,924,927],{"class":499,"line":589},[497,915,916],{"class":511},"    --easing",[497,918,664],{"class":507},[497,920,921],{"class":576}," var",[497,923,829],{"class":507},[497,925,926],{"class":511},"--easing--ease-out-cubic",[497,928,851],{"class":507},[497,930,931],{"class":499,"line":597},[497,932,933],{"class":507},"}\n",[418,935,936,937,940,941,944,945,947,948,944,950,953],{},"Each key in the object becomes an easing variable with the prefix ",[458,938,939],{},"easing",", and the export name is automatically converted to camelCase (e.g., ",[458,942,943],{},"default"," → ",[458,946,939],{},", ",[458,949,702],{},[458,951,952],{},"easingEaseOutCubic",").",[955,956,957,960,961,963,964,967],"tip",{},[435,958,959],{},"Pro tip:"," Use the ",[458,962,943],{}," key for your primary easing. It will create a variable named ",[458,965,966],{},"--easing"," without any suffix, making it the natural choice for standard transitions throughout your application.",[414,969,971],{"id":970},"default-values","Default Values",[418,973,470,974,976],{},[458,975,473],{}," composable comes with comprehensive defaults. You can use them directly without passing any arguments:",[487,978,980],{"className":489,"code":979,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\n\n// Use all defaults\nconst {\n    easingLinear,\n    easingEase,\n    easingEaseIn,\n    easingEaseOut,\n    easingEaseInOut,\n    easingEaseInSine,\n    easingEaseOutCubic,\n    easingSpring,\n    easingBounce,\n    // ... and many more\n} = useEasingDesignTokens(s);\n\nexport default s;\n",[458,981,982,1002,1022,1026,1040,1044,1050,1056,1063,1070,1077,1084,1090,1097,1103,1109,1115,1120,1133,1137],{"__ignoreMap":493},[497,983,984,986,988,990,992,994,996,998,1000],{"class":499,"line":500},[497,985,504],{"class":503},[497,987,508],{"class":507},[497,989,512],{"class":511},[497,991,515],{"class":507},[497,993,518],{"class":503},[497,995,521],{"class":507},[497,997,525],{"class":524},[497,999,528],{"class":507},[497,1001,531],{"class":507},[497,1003,1004,1006,1008,1010,1012,1014,1016,1018,1020],{"class":499,"line":534},[497,1005,504],{"class":503},[497,1007,508],{"class":507},[497,1009,541],{"class":511},[497,1011,515],{"class":507},[497,1013,518],{"class":503},[497,1015,521],{"class":507},[497,1017,550],{"class":524},[497,1019,528],{"class":507},[497,1021,531],{"class":507},[497,1023,1024],{"class":499,"line":557},[497,1025,560],{"emptyLinePlaceholder":206},[497,1027,1028,1030,1032,1034,1036,1038],{"class":499,"line":563},[497,1029,567],{"class":566},[497,1031,570],{"class":511},[497,1033,573],{"class":507},[497,1035,512],{"class":576},[497,1037,579],{"class":511},[497,1039,531],{"class":507},[497,1041,1042],{"class":499,"line":584},[497,1043,560],{"emptyLinePlaceholder":206},[497,1045,1046],{"class":499,"line":589},[497,1047,1049],{"class":1048},"sHwdD","// Use all defaults\n",[497,1051,1052,1054],{"class":499,"line":597},[497,1053,567],{"class":566},[497,1055,594],{"class":507},[497,1057,1058,1061],{"class":499,"line":606},[497,1059,1060],{"class":511},"    easingLinear",[497,1062,603],{"class":507},[497,1064,1065,1068],{"class":499,"line":614},[497,1066,1067],{"class":511},"    easingEase",[497,1069,603],{"class":507},[497,1071,1072,1075],{"class":499,"line":622},[497,1073,1074],{"class":511},"    easingEaseIn",[497,1076,603],{"class":507},[497,1078,1079,1082],{"class":499,"line":630},[497,1080,1081],{"class":511},"    easingEaseOut",[497,1083,603],{"class":507},[497,1085,1086,1088],{"class":499,"line":638},[497,1087,609],{"class":511},[497,1089,603],{"class":507},[497,1091,1092,1095],{"class":499,"line":657},[497,1093,1094],{"class":511},"    easingEaseInSine",[497,1096,603],{"class":507},[497,1098,1099,1101],{"class":499,"line":676},[497,1100,617],{"class":511},[497,1102,603],{"class":507},[497,1104,1105,1107],{"class":499,"line":697},[497,1106,625],{"class":511},[497,1108,603],{"class":507},[497,1110,1111,1113],{"class":499,"line":718},[497,1112,633],{"class":511},[497,1114,603],{"class":507},[497,1116,1117],{"class":499,"line":735},[497,1118,1119],{"class":1048},"    // ... and many more\n",[497,1121,1122,1124,1126,1128,1131],{"class":499,"line":752},[497,1123,641],{"class":507},[497,1125,644],{"class":507},[497,1127,541],{"class":576},[497,1129,1130],{"class":511},"(s)",[497,1132,531],{"class":507},[497,1134,1135],{"class":499,"line":768},[497,1136,560],{"emptyLinePlaceholder":206},[497,1138,1139,1141,1143,1145],{"class":499,"line":773},[497,1140,776],{"class":503},[497,1142,779],{"class":503},[497,1144,782],{"class":511},[497,1146,531],{"class":507},[1148,1149,1151],"h3",{"id":1150},"basic-css-keywords","Basic CSS Keywords",[1153,1154,1155,1168],"table",{},[1156,1157,1158],"thead",{},[1159,1160,1161,1165],"tr",{},[1162,1163,1164],"th",{},"Name",[1162,1166,1167],{},"Value",[1169,1170,1171,1183,1194,1205,1216],"tbody",{},[1159,1172,1173,1179],{},[1174,1175,1176],"td",{},[458,1177,1178],{},"linear",[1174,1180,1181],{},[458,1182,1178],{},[1159,1184,1185,1190],{},[1174,1186,1187],{},[458,1188,1189],{},"ease",[1174,1191,1192],{},[458,1193,1189],{},[1159,1195,1196,1201],{},[1174,1197,1198],{},[458,1199,1200],{},"ease-in",[1174,1202,1203],{},[458,1204,1200],{},[1159,1206,1207,1212],{},[1174,1208,1209],{},[458,1210,1211],{},"ease-out",[1174,1213,1214],{},[458,1215,1211],{},[1159,1217,1218,1222],{},[1174,1219,1220],{},[458,1221,682],{},[1174,1223,1224],{},[458,1225,682],{},[1148,1227,1229],{"id":1228},"cubic-bezier-easings","Cubic-Bezier Easings",[418,1231,1232,1233,1240],{},"Based on ",[1234,1235,1239],"a",{"href":1236,"rel":1237},"https://easings.net/",[1238],"nofollow","easings.net",", these provide mathematically precise timing curves:",[1153,1242,1243,1259],{},[1156,1244,1245],{},[1159,1246,1247,1250,1253,1256],{},[1162,1248,1249],{},"Family",[1162,1251,1252],{},"Ease In",[1162,1254,1255],{},"Ease Out",[1162,1257,1258],{},"Ease In-Out",[1169,1260,1261,1283,1305,1326,1348,1370,1392,1414],{},[1159,1262,1263,1268,1273,1278],{},[1174,1264,1265],{},[435,1266,1267],{},"Sine",[1174,1269,1270],{},[458,1271,1272],{},"cubic-bezier(0.47, 0, 0.745, 0.715)",[1174,1274,1275],{},[458,1276,1277],{},"cubic-bezier(0.39, 0.575, 0.565, 1)",[1174,1279,1280],{},[458,1281,1282],{},"cubic-bezier(0.445, 0.05, 0.55, 0.95)",[1159,1284,1285,1290,1295,1300],{},[1174,1286,1287],{},[435,1288,1289],{},"Quad",[1174,1291,1292],{},[458,1293,1294],{},"cubic-bezier(0.55, 0.085, 0.68, 0.53)",[1174,1296,1297],{},[458,1298,1299],{},"cubic-bezier(0.25, 0.46, 0.45, 0.94)",[1174,1301,1302],{},[458,1303,1304],{},"cubic-bezier(0.455, 0.03, 0.515, 0.955)",[1159,1306,1307,1312,1317,1321],{},[1174,1308,1309],{},[435,1310,1311],{},"Cubic",[1174,1313,1314],{},[458,1315,1316],{},"cubic-bezier(0.55, 0.055, 0.675, 0.19)",[1174,1318,1319],{},[458,1320,711],{},[1174,1322,1323],{},[458,1324,1325],{},"cubic-bezier(0.645, 0.045, 0.355, 1)",[1159,1327,1328,1333,1338,1343],{},[1174,1329,1330],{},[435,1331,1332],{},"Quart",[1174,1334,1335],{},[458,1336,1337],{},"cubic-bezier(0.895, 0.03, 0.685, 0.22)",[1174,1339,1340],{},[458,1341,1342],{},"cubic-bezier(0.165, 0.84, 0.44, 1)",[1174,1344,1345],{},[458,1346,1347],{},"cubic-bezier(0.77, 0, 0.175, 1)",[1159,1349,1350,1355,1360,1365],{},[1174,1351,1352],{},[435,1353,1354],{},"Quint",[1174,1356,1357],{},[458,1358,1359],{},"cubic-bezier(0.755, 0.05, 0.855, 0.06)",[1174,1361,1362],{},[458,1363,1364],{},"cubic-bezier(0.23, 1, 0.32, 1)",[1174,1366,1367],{},[458,1368,1369],{},"cubic-bezier(0.86, 0, 0.07, 1)",[1159,1371,1372,1377,1382,1387],{},[1174,1373,1374],{},[435,1375,1376],{},"Expo",[1174,1378,1379],{},[458,1380,1381],{},"cubic-bezier(0.95, 0.05, 0.795, 0.035)",[1174,1383,1384],{},[458,1385,1386],{},"cubic-bezier(0.19, 1, 0.22, 1)",[1174,1388,1389],{},[458,1390,1391],{},"cubic-bezier(1, 0, 0, 1)",[1159,1393,1394,1399,1404,1409],{},[1174,1395,1396],{},[435,1397,1398],{},"Circ",[1174,1400,1401],{},[458,1402,1403],{},"cubic-bezier(0.6, 0.04, 0.98, 0.335)",[1174,1405,1406],{},[458,1407,1408],{},"cubic-bezier(0.075, 0.82, 0.165, 1)",[1174,1410,1411],{},[458,1412,1413],{},"cubic-bezier(0.785, 0.135, 0.15, 0.86)",[1159,1415,1416,1421,1426,1431],{},[1174,1417,1418],{},[435,1419,1420],{},"Back",[1174,1422,1423],{},[458,1424,1425],{},"cubic-bezier(0.6, -0.28, 0.735, 0.045)",[1174,1427,1428],{},[458,1429,1430],{},"cubic-bezier(0.175, 0.885, 0.32, 1.275)",[1174,1432,1433],{},[458,1434,1435],{},"cubic-bezier(0.68, -0.55, 0.265, 1.55)",[1437,1438,1439,1442],"note",{},[435,1440,1441],{},"Back easings"," include overshoot effects where the animation briefly goes beyond the target value before settling. This creates a more dynamic, bouncy feel.",[1148,1444,1446],{"id":1445},"spring-and-bounce","Spring and Bounce",[418,1448,1232,1449,1454,1455,1457],{},[1234,1450,1453],{"href":1451,"rel":1452},"https://www.joshwcomeau.com/animation/linear-timing-function/",[1238],"Josh Comeau's research",", these use the CSS ",[458,1456,460],{}," function for physics-based animations:",[1153,1459,1460,1469],{},[1156,1461,1462],{},[1159,1463,1464,1466],{},[1162,1465,1164],{},[1162,1467,1468],{},"Description",[1169,1470,1471,1481],{},[1159,1472,1473,1478],{},[1174,1474,1475],{},[458,1476,1477],{},"spring",[1174,1479,1480],{},"Simulates a spring with overshoot and settling",[1159,1482,1483,1488],{},[1174,1484,1485],{},[458,1486,1487],{},"bounce",[1174,1489,1490],{},"Simulates a bouncing effect like a ball hitting the ground",[1492,1493,1494,1497,1498,1500,1501,1504],"warning",{},[435,1495,1496],{},"Browser Support:"," The ",[458,1499,460],{}," function is supported in Chrome/Edge 113+, Firefox 112+, and Safari 17.2+. For older browsers, consider providing a ",[458,1502,1503],{},"cubic-bezier()"," fallback.",[414,1506,1508],{"id":1507},"using-easing-variables","Using Easing Variables",[418,1510,1511],{},"Once created, easing variables can be used anywhere in your styles:",[479,1513,1514,1831],{},[482,1515,1516],{"icon":484,"label":485},[487,1517,1519],{"className":489,"code":1518,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector, css } = s;\n\nconst { easing, easingEaseOutCubic, easingSpring } = useEasingDesignTokens(s, {\n    default: '@easing.ease-out-cubic',\n    'ease-out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n    spring: 'linear(0, 0.0018, 0.0069 1.15%, 0.026 2.3%, 0.0637, 0.1135 5.18%, 0.2229 7.78%, 0.5977 15.84%, 0.7014, 0.7904, 0.8641, 0.9228, 0.9676 28.8%, 1.0032 31.68%, 1.0225, 1.0352 36.29%, 1.0431 38.88%, 1.046 42.05%, 1.0448 44.35%, 1.0407 47.23%, 1.0118 61.63%, 1.0025 69.41%, 0.9981 80.35%, 0.9992 99.94%)',\n} as const);\n\nselector('.button', {\n    transition: css`transform 0.2s ${easing}`,\n});\n\nselector('.modal', {\n    transition: css`opacity 0.3s ${easingEaseOutCubic}, transform 0.5s ${easingSpring}`,\n});\n\nexport default s;\n",[458,1520,1521,1541,1561,1565,1579,1606,1610,1641,1655,1673,1688,1700,1704,1722,1748,1756,1760,1777,1808,1816,1820],{"__ignoreMap":493},[497,1522,1523,1525,1527,1529,1531,1533,1535,1537,1539],{"class":499,"line":500},[497,1524,504],{"class":503},[497,1526,508],{"class":507},[497,1528,512],{"class":511},[497,1530,515],{"class":507},[497,1532,518],{"class":503},[497,1534,521],{"class":507},[497,1536,525],{"class":524},[497,1538,528],{"class":507},[497,1540,531],{"class":507},[497,1542,1543,1545,1547,1549,1551,1553,1555,1557,1559],{"class":499,"line":534},[497,1544,504],{"class":503},[497,1546,508],{"class":507},[497,1548,541],{"class":511},[497,1550,515],{"class":507},[497,1552,518],{"class":503},[497,1554,521],{"class":507},[497,1556,550],{"class":524},[497,1558,528],{"class":507},[497,1560,531],{"class":507},[497,1562,1563],{"class":499,"line":557},[497,1564,560],{"emptyLinePlaceholder":206},[497,1566,1567,1569,1571,1573,1575,1577],{"class":499,"line":563},[497,1568,567],{"class":566},[497,1570,570],{"class":511},[497,1572,573],{"class":507},[497,1574,512],{"class":576},[497,1576,579],{"class":511},[497,1578,531],{"class":507},[497,1580,1581,1583,1585,1588,1590,1593,1595,1598,1600,1602,1604],{"class":499,"line":584},[497,1582,567],{"class":566},[497,1584,508],{"class":507},[497,1586,1587],{"class":511}," ref",[497,1589,652],{"class":507},[497,1591,1592],{"class":511}," selector",[497,1594,652],{"class":507},[497,1596,1597],{"class":511}," css ",[497,1599,641],{"class":507},[497,1601,644],{"class":507},[497,1603,782],{"class":511},[497,1605,531],{"class":507},[497,1607,1608],{"class":499,"line":589},[497,1609,560],{"emptyLinePlaceholder":206},[497,1611,1612,1614,1616,1619,1621,1624,1626,1629,1631,1633,1635,1637,1639],{"class":499,"line":597},[497,1613,567],{"class":566},[497,1615,508],{"class":507},[497,1617,1618],{"class":511}," easing",[497,1620,652],{"class":507},[497,1622,1623],{"class":511}," easingEaseOutCubic",[497,1625,652],{"class":507},[497,1627,1628],{"class":511}," easingSpring ",[497,1630,641],{"class":507},[497,1632,644],{"class":507},[497,1634,541],{"class":576},[497,1636,649],{"class":511},[497,1638,652],{"class":507},[497,1640,594],{"class":507},[497,1642,1643,1645,1647,1649,1651,1653],{"class":499,"line":606},[497,1644,661],{"class":660},[497,1646,664],{"class":507},[497,1648,521],{"class":507},[497,1650,669],{"class":524},[497,1652,528],{"class":507},[497,1654,603],{"class":507},[497,1656,1657,1659,1661,1663,1665,1667,1669,1671],{"class":499,"line":614},[497,1658,679],{"class":507},[497,1660,702],{"class":660},[497,1662,528],{"class":507},[497,1664,664],{"class":507},[497,1666,521],{"class":507},[497,1668,711],{"class":524},[497,1670,528],{"class":507},[497,1672,603],{"class":507},[497,1674,1675,1677,1679,1681,1684,1686],{"class":499,"line":622},[497,1676,721],{"class":660},[497,1678,664],{"class":507},[497,1680,521],{"class":507},[497,1682,1683],{"class":524},"linear(0, 0.0018, 0.0069 1.15%, 0.026 2.3%, 0.0637, 0.1135 5.18%, 0.2229 7.78%, 0.5977 15.84%, 0.7014, 0.7904, 0.8641, 0.9228, 0.9676 28.8%, 1.0032 31.68%, 1.0225, 1.0352 36.29%, 1.0431 38.88%, 1.046 42.05%, 1.0448 44.35%, 1.0407 47.23%, 1.0118 61.63%, 1.0025 69.41%, 0.9981 80.35%, 0.9992 99.94%)",[497,1685,528],{"class":507},[497,1687,603],{"class":507},[497,1689,1690,1692,1694,1696,1698],{"class":499,"line":630},[497,1691,641],{"class":507},[497,1693,757],{"class":503},[497,1695,760],{"class":566},[497,1697,763],{"class":511},[497,1699,531],{"class":507},[497,1701,1702],{"class":499,"line":638},[497,1703,560],{"emptyLinePlaceholder":206},[497,1705,1706,1709,1711,1713,1716,1718,1720],{"class":499,"line":657},[497,1707,1708],{"class":576},"selector",[497,1710,829],{"class":511},[497,1712,528],{"class":507},[497,1714,1715],{"class":524},".button",[497,1717,528],{"class":507},[497,1719,652],{"class":507},[497,1721,594],{"class":507},[497,1723,1724,1727,1729,1732,1735,1738,1741,1743,1746],{"class":499,"line":676},[497,1725,1726],{"class":660},"    transition",[497,1728,664],{"class":507},[497,1730,1731],{"class":576}," css",[497,1733,1734],{"class":507},"`",[497,1736,1737],{"class":524},"transform 0.2s ",[497,1739,1740],{"class":507},"${",[497,1742,939],{"class":511},[497,1744,1745],{"class":507},"}`",[497,1747,603],{"class":507},[497,1749,1750,1752,1754],{"class":499,"line":697},[497,1751,641],{"class":507},[497,1753,763],{"class":511},[497,1755,531],{"class":507},[497,1757,1758],{"class":499,"line":718},[497,1759,560],{"emptyLinePlaceholder":206},[497,1761,1762,1764,1766,1768,1771,1773,1775],{"class":499,"line":735},[497,1763,1708],{"class":576},[497,1765,829],{"class":511},[497,1767,528],{"class":507},[497,1769,1770],{"class":524},".modal",[497,1772,528],{"class":507},[497,1774,652],{"class":507},[497,1776,594],{"class":507},[497,1778,1779,1781,1783,1785,1787,1790,1792,1794,1796,1799,1801,1804,1806],{"class":499,"line":752},[497,1780,1726],{"class":660},[497,1782,664],{"class":507},[497,1784,1731],{"class":576},[497,1786,1734],{"class":507},[497,1788,1789],{"class":524},"opacity 0.3s ",[497,1791,1740],{"class":507},[497,1793,952],{"class":511},[497,1795,641],{"class":507},[497,1797,1798],{"class":524},", transform 0.5s ",[497,1800,1740],{"class":507},[497,1802,1803],{"class":511},"easingSpring",[497,1805,1745],{"class":507},[497,1807,603],{"class":507},[497,1809,1810,1812,1814],{"class":499,"line":768},[497,1811,641],{"class":507},[497,1813,763],{"class":511},[497,1815,531],{"class":507},[497,1817,1818],{"class":499,"line":773},[497,1819,560],{"emptyLinePlaceholder":206},[497,1821,1823,1825,1827,1829],{"class":499,"line":1822},21,[497,1824,776],{"class":503},[497,1826,779],{"class":503},[497,1828,782],{"class":511},[497,1830,531],{"class":507},[482,1832,1833],{"icon":140,"label":787},[487,1834,1836],{"className":790,"code":1835,"filename":792,"language":793,"meta":493,"style":493},":root {\n    --easing--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);\n    --easing--spring: linear(0, 0.0018, 0.0069 1.15%, ...);\n    --easing: var(--easing--ease-out-cubic);\n}\n\n.button {\n    transition: transform 0.2s var(--easing);\n}\n\n.modal {\n    transition: opacity 0.3s var(--easing--ease-out-cubic), transform 0.5s var(--easing--spring);\n}\n",[458,1837,1838,1846,1872,1898,1912,1916,1920,1931,1952,1956,1960,1969,2004],{"__ignoreMap":493},[497,1839,1840,1842,1844],{"class":499,"line":500},[497,1841,664],{"class":507},[497,1843,802],{"class":566},[497,1845,594],{"class":507},[497,1847,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866,1868,1870],{"class":499,"line":534},[497,1849,821],{"class":511},[497,1851,664],{"class":507},[497,1853,826],{"class":576},[497,1855,829],{"class":507},[497,1857,833],{"class":832},[497,1859,652],{"class":507},[497,1861,838],{"class":832},[497,1863,652],{"class":507},[497,1865,843],{"class":832},[497,1867,652],{"class":507},[497,1869,848],{"class":832},[497,1871,851],{"class":507},[497,1873,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896],{"class":499,"line":557},[497,1875,856],{"class":511},[497,1877,664],{"class":507},[497,1879,861],{"class":511},[497,1881,864],{"class":832},[497,1883,652],{"class":507},[497,1885,869],{"class":832},[497,1887,652],{"class":507},[497,1889,874],{"class":832},[497,1891,877],{"class":832},[497,1893,652],{"class":507},[497,1895,882],{"class":511},[497,1897,531],{"class":507},[497,1899,1900,1902,1904,1906,1908,1910],{"class":499,"line":563},[497,1901,916],{"class":511},[497,1903,664],{"class":507},[497,1905,921],{"class":576},[497,1907,829],{"class":507},[497,1909,926],{"class":511},[497,1911,851],{"class":507},[497,1913,1914],{"class":499,"line":584},[497,1915,933],{"class":507},[497,1917,1918],{"class":499,"line":589},[497,1919,560],{"emptyLinePlaceholder":206},[497,1921,1922,1925,1929],{"class":499,"line":597},[497,1923,1924],{"class":507},".",[497,1926,1928],{"class":1927},"sBMFI","button",[497,1930,594],{"class":507},[497,1932,1933,1936,1938,1941,1944,1946,1948,1950],{"class":499,"line":606},[497,1934,1726],{"class":1935},"sqsOY",[497,1937,664],{"class":507},[497,1939,1940],{"class":511}," transform ",[497,1942,1943],{"class":832},"0.2s",[497,1945,921],{"class":576},[497,1947,829],{"class":507},[497,1949,966],{"class":511},[497,1951,851],{"class":507},[497,1953,1954],{"class":499,"line":614},[497,1955,933],{"class":507},[497,1957,1958],{"class":499,"line":622},[497,1959,560],{"emptyLinePlaceholder":206},[497,1961,1962,1964,1967],{"class":499,"line":630},[497,1963,1924],{"class":507},[497,1965,1966],{"class":1927},"modal",[497,1968,594],{"class":507},[497,1970,1971,1973,1975,1978,1981,1983,1985,1987,1990,1992,1995,1997,1999,2002],{"class":499,"line":638},[497,1972,1726],{"class":1935},[497,1974,664],{"class":507},[497,1976,1977],{"class":511}," opacity ",[497,1979,1980],{"class":832},"0.3s",[497,1982,921],{"class":576},[497,1984,829],{"class":507},[497,1986,926],{"class":511},[497,1988,1989],{"class":507},"),",[497,1991,1940],{"class":511},[497,1993,1994],{"class":832},"0.5s",[497,1996,921],{"class":576},[497,1998,829],{"class":507},[497,2000,2001],{"class":511},"--easing--spring",[497,2003,851],{"class":507},[497,2005,2006],{"class":499,"line":657},[497,2007,933],{"class":507},[414,2009,2011],{"id":2010},"examples","Examples",[1148,2013,2015],{"id":2014},"semantic-easing-names","Semantic Easing Names",[418,2017,2018],{},"Use semantic names to make easing intent clear:",[479,2020,2021,2239],{},[482,2022,2023],{"icon":484,"label":485},[487,2024,2026],{"className":489,"code":2025,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens, defaultEasingValues } from '@styleframe/theme';\n\nconst s = styleframe();\n\nconst {\n    easing,\n    easingEnter,\n    easingExit,\n    easingEmphasize,\n} = useEasingDesignTokens(s, {\n    default: '@easing.enter',\n    enter: defaultEasingValues['ease-out-cubic'],\n    exit: defaultEasingValues['ease-in-cubic'],\n    emphasize: defaultEasingValues.spring,\n} as const);\n\nexport default s;\n",[458,2027,2028,2048,2073,2077,2091,2095,2101,2107,2114,2121,2128,2142,2157,2178,2198,2213,2225,2229],{"__ignoreMap":493},[497,2029,2030,2032,2034,2036,2038,2040,2042,2044,2046],{"class":499,"line":500},[497,2031,504],{"class":503},[497,2033,508],{"class":507},[497,2035,512],{"class":511},[497,2037,515],{"class":507},[497,2039,518],{"class":503},[497,2041,521],{"class":507},[497,2043,525],{"class":524},[497,2045,528],{"class":507},[497,2047,531],{"class":507},[497,2049,2050,2052,2054,2056,2058,2061,2063,2065,2067,2069,2071],{"class":499,"line":534},[497,2051,504],{"class":503},[497,2053,508],{"class":507},[497,2055,541],{"class":511},[497,2057,652],{"class":507},[497,2059,2060],{"class":511}," defaultEasingValues",[497,2062,515],{"class":507},[497,2064,518],{"class":503},[497,2066,521],{"class":507},[497,2068,550],{"class":524},[497,2070,528],{"class":507},[497,2072,531],{"class":507},[497,2074,2075],{"class":499,"line":557},[497,2076,560],{"emptyLinePlaceholder":206},[497,2078,2079,2081,2083,2085,2087,2089],{"class":499,"line":563},[497,2080,567],{"class":566},[497,2082,570],{"class":511},[497,2084,573],{"class":507},[497,2086,512],{"class":576},[497,2088,579],{"class":511},[497,2090,531],{"class":507},[497,2092,2093],{"class":499,"line":584},[497,2094,560],{"emptyLinePlaceholder":206},[497,2096,2097,2099],{"class":499,"line":589},[497,2098,567],{"class":566},[497,2100,594],{"class":507},[497,2102,2103,2105],{"class":499,"line":597},[497,2104,600],{"class":511},[497,2106,603],{"class":507},[497,2108,2109,2112],{"class":499,"line":606},[497,2110,2111],{"class":511},"    easingEnter",[497,2113,603],{"class":507},[497,2115,2116,2119],{"class":499,"line":614},[497,2117,2118],{"class":511},"    easingExit",[497,2120,603],{"class":507},[497,2122,2123,2126],{"class":499,"line":622},[497,2124,2125],{"class":511},"    easingEmphasize",[497,2127,603],{"class":507},[497,2129,2130,2132,2134,2136,2138,2140],{"class":499,"line":630},[497,2131,641],{"class":507},[497,2133,644],{"class":507},[497,2135,541],{"class":576},[497,2137,649],{"class":511},[497,2139,652],{"class":507},[497,2141,594],{"class":507},[497,2143,2144,2146,2148,2150,2153,2155],{"class":499,"line":638},[497,2145,661],{"class":660},[497,2147,664],{"class":507},[497,2149,521],{"class":507},[497,2151,2152],{"class":524},"@easing.enter",[497,2154,528],{"class":507},[497,2156,603],{"class":507},[497,2158,2159,2162,2164,2167,2169,2171,2173,2176],{"class":499,"line":657},[497,2160,2161],{"class":660},"    enter",[497,2163,664],{"class":507},[497,2165,2166],{"class":511}," defaultEasingValues[",[497,2168,528],{"class":507},[497,2170,702],{"class":524},[497,2172,528],{"class":507},[497,2174,2175],{"class":511},"]",[497,2177,603],{"class":507},[497,2179,2180,2183,2185,2187,2189,2192,2194,2196],{"class":499,"line":676},[497,2181,2182],{"class":660},"    exit",[497,2184,664],{"class":507},[497,2186,2166],{"class":511},[497,2188,528],{"class":507},[497,2190,2191],{"class":524},"ease-in-cubic",[497,2193,528],{"class":507},[497,2195,2175],{"class":511},[497,2197,603],{"class":507},[497,2199,2200,2203,2205,2207,2209,2211],{"class":499,"line":697},[497,2201,2202],{"class":660},"    emphasize",[497,2204,664],{"class":507},[497,2206,2060],{"class":511},[497,2208,1924],{"class":507},[497,2210,1477],{"class":511},[497,2212,603],{"class":507},[497,2214,2215,2217,2219,2221,2223],{"class":499,"line":718},[497,2216,641],{"class":507},[497,2218,757],{"class":503},[497,2220,760],{"class":566},[497,2222,763],{"class":511},[497,2224,531],{"class":507},[497,2226,2227],{"class":499,"line":735},[497,2228,560],{"emptyLinePlaceholder":206},[497,2230,2231,2233,2235,2237],{"class":499,"line":752},[497,2232,776],{"class":503},[497,2234,779],{"class":503},[497,2236,782],{"class":511},[497,2238,531],{"class":507},[482,2240,2241],{"icon":140,"label":787},[487,2242,2244],{"className":790,"code":2243,"filename":792,"language":793,"meta":493,"style":493},":root {\n    --easing--enter: cubic-bezier(0.215, 0.61, 0.355, 1);\n    --easing--exit: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n    --easing--emphasize: linear(0, 0.0018, ...);\n    --easing: var(--easing--enter);\n}\n",[458,2245,2246,2254,2281,2312,2333,2348],{"__ignoreMap":493},[497,2247,2248,2250,2252],{"class":499,"line":500},[497,2249,664],{"class":507},[497,2251,802],{"class":566},[497,2253,594],{"class":507},[497,2255,2256,2259,2261,2263,2265,2267,2269,2271,2273,2275,2277,2279],{"class":499,"line":534},[497,2257,2258],{"class":511},"    --easing--enter",[497,2260,664],{"class":507},[497,2262,826],{"class":576},[497,2264,829],{"class":507},[497,2266,833],{"class":832},[497,2268,652],{"class":507},[497,2270,838],{"class":832},[497,2272,652],{"class":507},[497,2274,843],{"class":832},[497,2276,652],{"class":507},[497,2278,848],{"class":832},[497,2280,851],{"class":507},[497,2282,2283,2286,2288,2290,2292,2295,2297,2300,2302,2305,2307,2310],{"class":499,"line":557},[497,2284,2285],{"class":511},"    --easing--exit",[497,2287,664],{"class":507},[497,2289,826],{"class":576},[497,2291,829],{"class":507},[497,2293,2294],{"class":832},"0.55",[497,2296,652],{"class":507},[497,2298,2299],{"class":832}," 0.055",[497,2301,652],{"class":507},[497,2303,2304],{"class":832}," 0.675",[497,2306,652],{"class":507},[497,2308,2309],{"class":832}," 0.19",[497,2311,851],{"class":507},[497,2313,2314,2317,2319,2321,2323,2325,2327,2329,2331],{"class":499,"line":563},[497,2315,2316],{"class":511},"    --easing--emphasize",[497,2318,664],{"class":507},[497,2320,861],{"class":511},[497,2322,864],{"class":832},[497,2324,652],{"class":507},[497,2326,869],{"class":832},[497,2328,652],{"class":507},[497,2330,882],{"class":511},[497,2332,531],{"class":507},[497,2334,2335,2337,2339,2341,2343,2346],{"class":499,"line":584},[497,2336,916],{"class":511},[497,2338,664],{"class":507},[497,2340,921],{"class":576},[497,2342,829],{"class":507},[497,2344,2345],{"class":511},"--easing--enter",[497,2347,851],{"class":507},[497,2349,2350],{"class":499,"line":589},[497,2351,933],{"class":507},[1148,2353,2355],{"id":2354},"animation-with-keyframes","Animation with Keyframes",[418,2357,2358],{},"Combine easing with keyframes for complex animations:",[479,2360,2361,2726],{},[482,2362,2363],{"icon":484,"label":485},[487,2364,2366],{"className":489,"code":2365,"filename":491,"language":492,"meta":493,"style":493},"import { styleframe } from 'styleframe';\nimport { useEasingDesignTokens } from '@styleframe/theme';\n\nconst s = styleframe();\nconst { ref, selector, keyframes, css } = s;\n\nconst { easingBounce, easingSpring } = useEasingDesignTokens(s);\n\nconst fadeIn = keyframes('fade-in', {\n    '0%': { opacity: 0, transform: 'translateY(-20px)' },\n    '100%': { opacity: 1, transform: 'translateY(0)' },\n});\n\nselector('.notification', {\n    animation: css`${fadeIn} 0.5s ${easingBounce} forwards`,\n});\n\nselector('.tooltip', {\n    animation: css`${fadeIn} 0.3s ${easingSpring} forwards`,\n});\n\nexport default s;\n",[458,2367,2368,2388,2408,2412,2426,2455,2459,2482,2486,2510,2548,2582,2590,2594,2611,2645,2653,2657,2674,2703,2711,2715],{"__ignoreMap":493},[497,2369,2370,2372,2374,2376,2378,2380,2382,2384,2386],{"class":499,"line":500},[497,2371,504],{"class":503},[497,2373,508],{"class":507},[497,2375,512],{"class":511},[497,2377,515],{"class":507},[497,2379,518],{"class":503},[497,2381,521],{"class":507},[497,2383,525],{"class":524},[497,2385,528],{"class":507},[497,2387,531],{"class":507},[497,2389,2390,2392,2394,2396,2398,2400,2402,2404,2406],{"class":499,"line":534},[497,2391,504],{"class":503},[497,2393,508],{"class":507},[497,2395,541],{"class":511},[497,2397,515],{"class":507},[497,2399,518],{"class":503},[497,2401,521],{"class":507},[497,2403,550],{"class":524},[497,2405,528],{"class":507},[497,2407,531],{"class":507},[497,2409,2410],{"class":499,"line":557},[497,2411,560],{"emptyLinePlaceholder":206},[497,2413,2414,2416,2418,2420,2422,2424],{"class":499,"line":563},[497,2415,567],{"class":566},[497,2417,570],{"class":511},[497,2419,573],{"class":507},[497,2421,512],{"class":576},[497,2423,579],{"class":511},[497,2425,531],{"class":507},[497,2427,2428,2430,2432,2434,2436,2438,2440,2443,2445,2447,2449,2451,2453],{"class":499,"line":584},[497,2429,567],{"class":566},[497,2431,508],{"class":507},[497,2433,1587],{"class":511},[497,2435,652],{"class":507},[497,2437,1592],{"class":511},[497,2439,652],{"class":507},[497,2441,2442],{"class":511}," keyframes",[497,2444,652],{"class":507},[497,2446,1597],{"class":511},[497,2448,641],{"class":507},[497,2450,644],{"class":507},[497,2452,782],{"class":511},[497,2454,531],{"class":507},[497,2456,2457],{"class":499,"line":589},[497,2458,560],{"emptyLinePlaceholder":206},[497,2460,2461,2463,2465,2468,2470,2472,2474,2476,2478,2480],{"class":499,"line":597},[497,2462,567],{"class":566},[497,2464,508],{"class":507},[497,2466,2467],{"class":511}," easingBounce",[497,2469,652],{"class":507},[497,2471,1628],{"class":511},[497,2473,641],{"class":507},[497,2475,644],{"class":507},[497,2477,541],{"class":576},[497,2479,1130],{"class":511},[497,2481,531],{"class":507},[497,2483,2484],{"class":499,"line":606},[497,2485,560],{"emptyLinePlaceholder":206},[497,2487,2488,2490,2493,2495,2497,2499,2501,2504,2506,2508],{"class":499,"line":614},[497,2489,567],{"class":566},[497,2491,2492],{"class":511}," fadeIn ",[497,2494,573],{"class":507},[497,2496,2442],{"class":576},[497,2498,829],{"class":511},[497,2500,528],{"class":507},[497,2502,2503],{"class":524},"fade-in",[497,2505,528],{"class":507},[497,2507,652],{"class":507},[497,2509,594],{"class":507},[497,2511,2512,2514,2517,2519,2521,2523,2526,2528,2531,2533,2536,2538,2540,2543,2545],{"class":499,"line":622},[497,2513,679],{"class":507},[497,2515,2516],{"class":660},"0%",[497,2518,528],{"class":507},[497,2520,664],{"class":507},[497,2522,508],{"class":507},[497,2524,2525],{"class":660}," opacity",[497,2527,664],{"class":507},[497,2529,2530],{"class":832}," 0",[497,2532,652],{"class":507},[497,2534,2535],{"class":660}," transform",[497,2537,664],{"class":507},[497,2539,521],{"class":507},[497,2541,2542],{"class":524},"translateY(-20px)",[497,2544,528],{"class":507},[497,2546,2547],{"class":507}," },\n",[497,2549,2550,2552,2555,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2578,2580],{"class":499,"line":630},[497,2551,679],{"class":507},[497,2553,2554],{"class":660},"100%",[497,2556,528],{"class":507},[497,2558,664],{"class":507},[497,2560,508],{"class":507},[497,2562,2525],{"class":660},[497,2564,664],{"class":507},[497,2566,848],{"class":832},[497,2568,652],{"class":507},[497,2570,2535],{"class":660},[497,2572,664],{"class":507},[497,2574,521],{"class":507},[497,2576,2577],{"class":524},"translateY(0)",[497,2579,528],{"class":507},[497,2581,2547],{"class":507},[497,2583,2584,2586,2588],{"class":499,"line":638},[497,2585,641],{"class":507},[497,2587,763],{"class":511},[497,2589,531],{"class":507},[497,2591,2592],{"class":499,"line":657},[497,2593,560],{"emptyLinePlaceholder":206},[497,2595,2596,2598,2600,2602,2605,2607,2609],{"class":499,"line":676},[497,2597,1708],{"class":576},[497,2599,829],{"class":511},[497,2601,528],{"class":507},[497,2603,2604],{"class":524},".notification",[497,2606,528],{"class":507},[497,2608,652],{"class":507},[497,2610,594],{"class":507},[497,2612,2613,2616,2618,2620,2623,2626,2628,2631,2633,2636,2638,2641,2643],{"class":499,"line":697},[497,2614,2615],{"class":660},"    animation",[497,2617,664],{"class":507},[497,2619,1731],{"class":576},[497,2621,2622],{"class":507},"`${",[497,2624,2625],{"class":511},"fadeIn",[497,2627,641],{"class":507},[497,2629,2630],{"class":524}," 0.5s ",[497,2632,1740],{"class":507},[497,2634,2635],{"class":511},"easingBounce",[497,2637,641],{"class":507},[497,2639,2640],{"class":524}," forwards",[497,2642,1734],{"class":507},[497,2644,603],{"class":507},[497,2646,2647,2649,2651],{"class":499,"line":718},[497,2648,641],{"class":507},[497,2650,763],{"class":511},[497,2652,531],{"class":507},[497,2654,2655],{"class":499,"line":735},[497,2656,560],{"emptyLinePlaceholder":206},[497,2658,2659,2661,2663,2665,2668,2670,2672],{"class":499,"line":752},[497,2660,1708],{"class":576},[497,2662,829],{"class":511},[497,2664,528],{"class":507},[497,2666,2667],{"class":524},".tooltip",[497,2669,528],{"class":507},[497,2671,652],{"class":507},[497,2673,594],{"class":507},[497,2675,2676,2678,2680,2682,2684,2686,2688,2691,2693,2695,2697,2699,2701],{"class":499,"line":768},[497,2677,2615],{"class":660},[497,2679,664],{"class":507},[497,2681,1731],{"class":576},[497,2683,2622],{"class":507},[497,2685,2625],{"class":511},[497,2687,641],{"class":507},[497,2689,2690],{"class":524}," 0.3s ",[497,2692,1740],{"class":507},[497,2694,1803],{"class":511},[497,2696,641],{"class":507},[497,2698,2640],{"class":524},[497,2700,1734],{"class":507},[497,2702,603],{"class":507},[497,2704,2705,2707,2709],{"class":499,"line":773},[497,2706,641],{"class":507},[497,2708,763],{"class":511},[497,2710,531],{"class":507},[497,2712,2713],{"class":499,"line":1822},[497,2714,560],{"emptyLinePlaceholder":206},[497,2716,2718,2720,2722,2724],{"class":499,"line":2717},22,[497,2719,776],{"class":503},[497,2721,779],{"class":503},[497,2723,782],{"class":511},[497,2725,531],{"class":507},[482,2727,2728],{"icon":140,"label":787},[487,2729,2731],{"className":790,"code":2730,"filename":792,"language":793,"meta":493,"style":493},":root {\n    --easing--bounce: linear(0, 0.004, 0.016, ...);\n    --easing--spring: linear(0, 0.0018, ...);\n}\n\n@keyframes fade-in {\n    0% { opacity: 0; transform: translateY(-20px); }\n    100% { opacity: 1; transform: translateY(0); }\n}\n\n.notification {\n    animation: fade-in 0.5s var(--easing--bounce) forwards;\n}\n\n.tooltip {\n    animation: fade-in 0.3s var(--easing--spring) forwards;\n}\n",[458,2732,2733,2741,2765,2785,2789,2793,2804,2838,2867,2871,2875,2884,2908,2912,2916,2925,2947],{"__ignoreMap":493},[497,2734,2735,2737,2739],{"class":499,"line":500},[497,2736,664],{"class":507},[497,2738,802],{"class":566},[497,2740,594],{"class":507},[497,2742,2743,2745,2747,2749,2751,2753,2755,2757,2759,2761,2763],{"class":499,"line":534},[497,2744,889],{"class":511},[497,2746,664],{"class":507},[497,2748,861],{"class":511},[497,2750,864],{"class":832},[497,2752,652],{"class":507},[497,2754,900],{"class":832},[497,2756,652],{"class":507},[497,2758,905],{"class":832},[497,2760,652],{"class":507},[497,2762,882],{"class":511},[497,2764,531],{"class":507},[497,2766,2767,2769,2771,2773,2775,2777,2779,2781,2783],{"class":499,"line":557},[497,2768,856],{"class":511},[497,2770,664],{"class":507},[497,2772,861],{"class":511},[497,2774,864],{"class":832},[497,2776,652],{"class":507},[497,2778,869],{"class":832},[497,2780,652],{"class":507},[497,2782,882],{"class":511},[497,2784,531],{"class":507},[497,2786,2787],{"class":499,"line":563},[497,2788,933],{"class":507},[497,2790,2791],{"class":499,"line":584},[497,2792,560],{"emptyLinePlaceholder":206},[497,2794,2795,2798,2802],{"class":499,"line":589},[497,2796,2797],{"class":503},"@keyframes",[497,2799,2801],{"class":2800},"sHdIc"," fade-in",[497,2803,594],{"class":507},[497,2805,2806,2809,2811,2813,2815,2817,2820,2822,2824,2827,2829,2832,2835],{"class":499,"line":597},[497,2807,2808],{"class":1927},"    0%",[497,2810,508],{"class":507},[497,2812,2525],{"class":1935},[497,2814,664],{"class":507},[497,2816,2530],{"class":832},[497,2818,2819],{"class":507},";",[497,2821,2535],{"class":1935},[497,2823,664],{"class":507},[497,2825,2826],{"class":576}," translateY",[497,2828,829],{"class":507},[497,2830,2831],{"class":832},"-20px",[497,2833,2834],{"class":507},");",[497,2836,2837],{"class":507}," }\n",[497,2839,2840,2843,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865],{"class":499,"line":606},[497,2841,2842],{"class":1927},"    100%",[497,2844,508],{"class":507},[497,2846,2525],{"class":1935},[497,2848,664],{"class":507},[497,2850,848],{"class":832},[497,2852,2819],{"class":507},[497,2854,2535],{"class":1935},[497,2856,664],{"class":507},[497,2858,2826],{"class":576},[497,2860,829],{"class":507},[497,2862,864],{"class":832},[497,2864,2834],{"class":507},[497,2866,2837],{"class":507},[497,2868,2869],{"class":499,"line":614},[497,2870,933],{"class":507},[497,2872,2873],{"class":499,"line":622},[497,2874,560],{"emptyLinePlaceholder":206},[497,2876,2877,2879,2882],{"class":499,"line":630},[497,2878,1924],{"class":507},[497,2880,2881],{"class":1927},"notification",[497,2883,594],{"class":507},[497,2885,2886,2888,2890,2893,2895,2897,2899,2902,2904,2906],{"class":499,"line":638},[497,2887,2615],{"class":1935},[497,2889,664],{"class":507},[497,2891,2892],{"class":511}," fade-in ",[497,2894,1994],{"class":832},[497,2896,921],{"class":576},[497,2898,829],{"class":507},[497,2900,2901],{"class":511},"--easing--bounce",[497,2903,763],{"class":507},[497,2905,2640],{"class":511},[497,2907,531],{"class":507},[497,2909,2910],{"class":499,"line":657},[497,2911,933],{"class":507},[497,2913,2914],{"class":499,"line":676},[497,2915,560],{"emptyLinePlaceholder":206},[497,2917,2918,2920,2923],{"class":499,"line":697},[497,2919,1924],{"class":507},[497,2921,2922],{"class":1927},"tooltip",[497,2924,594],{"class":507},[497,2926,2927,2929,2931,2933,2935,2937,2939,2941,2943,2945],{"class":499,"line":718},[497,2928,2615],{"class":1935},[497,2930,664],{"class":507},[497,2932,2892],{"class":511},[497,2934,1980],{"class":832},[497,2936,921],{"class":576},[497,2938,829],{"class":507},[497,2940,2001],{"class":511},[497,2942,763],{"class":507},[497,2944,2640],{"class":511},[497,2946,531],{"class":507},[497,2948,2949],{"class":499,"line":735},[497,2950,933],{"class":507},[414,2952,2954],{"id":2953},"best-practices","Best Practices",[429,2956,2957,2969,2981,2999,3008,3020],{},[432,2958,2959,2962,2963,2965,2966,2968],{},[435,2960,2961],{},"Start with sensible defaults",": Use ",[458,2964,1211],{}," for entrances and ",[458,2967,1200],{}," for exits.",[432,2970,2971,2977,2978,2980],{},[435,2972,2973,2974,2976],{},"Use the ",[458,2975,943],{}," key",": This creates a clean ",[458,2979,966],{}," variable that's perfect for general-purpose animations.",[432,2982,2983,2962,2986,2988,2989,2992,2993,2995,2996,2998],{},[435,2984,2985],{},"Choose appropriate curves",[458,2987,702],{}," or ",[458,2990,2991],{},"ease-out-quart"," for UI interactions, and reserve ",[458,2994,1477],{}," and ",[458,2997,1487],{}," for emphasis.",[432,3000,3001,3004,3005,3007],{},[435,3002,3003],{},"Consider performance",": Complex ",[458,3006,460],{}," functions with many stops may impact performance on low-end devices.",[432,3009,3010,3013,3014,3016,3017,3019],{},[435,3011,3012],{},"Provide fallbacks",": For browsers that don't support ",[458,3015,460],{},", consider providing ",[458,3018,1503],{}," fallbacks.",[432,3021,3022,3025],{},[435,3023,3024],{},"Keep it subtle",": Most UI animations should be quick (150-300ms) with gentle easing.",[1437,3027,3028,3031,3032,3035],{},[435,3029,3030],{},"Good to know:"," We use ",[458,3033,3034],{},"as const"," to ensure the object is treated as a constant type. This helps TypeScript infer the return type of the composables and provides better type safety and autocomplete support.",[414,3037,3039],{"id":3038},"faq","FAQ",[3041,3042,3043,3059,3087,3215,3231],"accordion",{},[3044,3045,3048,3054],"accordion-item",{"icon":3046,"label":3047},"i-lucide-circle-help","When should I use spring vs bounce easing?",[418,3049,3050,3051,3053],{},"Use ",[435,3052,1477],{}," easing for UI elements that should feel responsive and natural, like modals, tooltips, or interactive components. Spring has a subtle overshoot that adds personality without being distracting.",[418,3055,3050,3056,3058],{},[435,3057,1487],{}," easing for more playful effects, like notifications, badges, or celebratory animations. Bounce creates a more pronounced bouncing effect that draws attention.",[3044,3060,3062,3072,3084],{"icon":3046,"label":3061},"What's the difference between ease-out-cubic and ease-out-quart?",[418,3063,3064,3065,3068,3069,664],{},"Both create a decelerating animation, but ",[435,3066,3067],{},"quart"," is more dramatic than ",[435,3070,3071],{},"cubic",[429,3073,3074,3079],{},[432,3075,3076,3078],{},[458,3077,702],{}," (power of 3): Smooth, professional feel - good for most UI transitions",[432,3080,3081,3083],{},[458,3082,2991],{}," (power of 4): More pronounced deceleration - good for larger movements",[418,3085,3086],{},"The higher the power (quint, expo), the more extreme the effect.",[3044,3088,3090,3100],{"icon":3046,"label":3089},"How do I provide fallbacks for older browsers?",[418,3091,3092,3093,3095,3096,3099],{},"For the ",[458,3094,460],{}," function (spring/bounce), you can use ",[458,3097,3098],{},"@supports"," or define a fallback:",[487,3101,3103],{"className":489,"code":3102,"language":492,"meta":493,"style":493},"selector('.element', {\n    // Fallback for older browsers\n    transitionTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n});\n\nselector('.element', {\n    // Modern browsers with linear() support\n    '@supports (animation-timing-function: linear(0, 1))': {\n        transitionTimingFunction: ref(easingSpring),\n    },\n});\n",[458,3104,3105,3122,3127,3142,3150,3154,3170,3175,3188,3202,3207],{"__ignoreMap":493},[497,3106,3107,3109,3111,3113,3116,3118,3120],{"class":499,"line":500},[497,3108,1708],{"class":576},[497,3110,829],{"class":511},[497,3112,528],{"class":507},[497,3114,3115],{"class":524},".element",[497,3117,528],{"class":507},[497,3119,652],{"class":507},[497,3121,594],{"class":507},[497,3123,3124],{"class":499,"line":534},[497,3125,3126],{"class":1048},"    // Fallback for older browsers\n",[497,3128,3129,3132,3134,3136,3138,3140],{"class":499,"line":557},[497,3130,3131],{"class":660},"    transitionTimingFunction",[497,3133,664],{"class":507},[497,3135,521],{"class":507},[497,3137,1430],{"class":524},[497,3139,528],{"class":507},[497,3141,603],{"class":507},[497,3143,3144,3146,3148],{"class":499,"line":563},[497,3145,641],{"class":507},[497,3147,763],{"class":511},[497,3149,531],{"class":507},[497,3151,3152],{"class":499,"line":584},[497,3153,560],{"emptyLinePlaceholder":206},[497,3155,3156,3158,3160,3162,3164,3166,3168],{"class":499,"line":589},[497,3157,1708],{"class":576},[497,3159,829],{"class":511},[497,3161,528],{"class":507},[497,3163,3115],{"class":524},[497,3165,528],{"class":507},[497,3167,652],{"class":507},[497,3169,594],{"class":507},[497,3171,3172],{"class":499,"line":597},[497,3173,3174],{"class":1048},"    // Modern browsers with linear() support\n",[497,3176,3177,3179,3182,3184,3186],{"class":499,"line":606},[497,3178,679],{"class":507},[497,3180,3181],{"class":660},"@supports (animation-timing-function: linear(0, 1))",[497,3183,528],{"class":507},[497,3185,664],{"class":507},[497,3187,594],{"class":507},[497,3189,3190,3193,3195,3197,3200],{"class":499,"line":614},[497,3191,3192],{"class":660},"        transitionTimingFunction",[497,3194,664],{"class":507},[497,3196,1587],{"class":576},[497,3198,3199],{"class":511},"(easingSpring)",[497,3201,603],{"class":507},[497,3203,3204],{"class":499,"line":622},[497,3205,3206],{"class":507},"    },\n",[497,3208,3209,3211,3213],{"class":499,"line":630},[497,3210,641],{"class":507},[497,3212,763],{"class":511},[497,3214,531],{"class":507},[3044,3216,3218,3219,947,3221,3223,3224,3226,3227,2965,3229,2968],{"icon":3046,"label":3217},"Should I use custom easing or stick to CSS keywords?","CSS keywords (",[458,3220,1189],{},[458,3222,682],{},") are fine for simple transitions, but custom ",[458,3225,1503],{}," curves give you more control and can make your UI feel more polished. For most production apps, we recommend using at least ",[458,3228,702],{},[458,3230,2191],{},[3044,3232,3234,3237,3263],{"icon":3046,"label":3233},"What's the recommended duration for different animation types?",[418,3235,3236],{},"Easing is only part of the equation - duration matters too:",[429,3238,3239,3245,3251,3257],{},[432,3240,3241,3244],{},[435,3242,3243],{},"Micro-interactions"," (hover, focus): 100-150ms",[432,3246,3247,3250],{},[435,3248,3249],{},"UI transitions"," (modals, dropdowns): 200-300ms",[432,3252,3253,3256],{},[435,3254,3255],{},"Page transitions",": 300-500ms",[432,3258,3259,3262],{},[435,3260,3261],{},"Spring/bounce effects",": 400-600ms (they need time to settle)",[418,3264,3265],{},"Faster isn't always better - make sure animations are perceivable but not sluggish.",[3267,3268,3269],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":493,"searchDepth":534,"depth":534,"links":3271},[3272,3273,3274,3275,3280,3281,3285,3286],{"id":416,"depth":534,"text":64},{"id":423,"depth":534,"text":424},{"id":464,"depth":534,"text":467},{"id":970,"depth":534,"text":971,"children":3276},[3277,3278,3279],{"id":1150,"depth":557,"text":1151},{"id":1228,"depth":557,"text":1229},{"id":1445,"depth":557,"text":1446},{"id":1507,"depth":534,"text":1508},{"id":2010,"depth":534,"text":2011,"children":3282},[3283,3284],{"id":2014,"depth":557,"text":2015},{"id":2354,"depth":557,"text":2355},{"id":2953,"depth":534,"text":2954},{"id":3038,"depth":534,"text":3039},"Create and manage easing design tokens with CSS variables for consistent animation timing across your application.","md",null,{},{"title":189,"icon":7},{"title":409,"description":3287},{"loc":190},"uy1auDqnjt4dGjp49aToLK-mLrQ2GBQWTnctTGTAMQI",[3296,3298],{"title":185,"path":186,"stem":187,"description":3297,"icon":7,"children":-1},"Create and manage duration design tokens with CSS variables for consistent animation and transition timing across your application.",{"title":64,"path":194,"stem":195,"description":3299,"children":-1},"Create fluid, responsive designs that scale smoothly across all viewport sizes using mathematical precision. Based on the Utopia fluid type scale for optimal readability without breakpoints.",1776621133363]