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