[{"data":1,"prerenderedAt":2612},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-animations":682,"-docs-theme-utilities-animations-surround":2607},{"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":2600,"extension":2601,"links":2602,"meta":2603,"navigation":2604,"path":574,"seo":2605,"stem":575,"__hash__":2606},"docs_theme\u002Fdocs\u002Ftheme\u002Futilities\u002F03.animations.md","Animations Utilities",{"type":686,"value":687,"toc":2590},"minimark",[688,706,710,714,718,721,749,755,762,2064,2068,2073,2387,2390,2525,2529,2561,2565,2586],[689,690,691,695,696,700,701,705],"note",{"icon":173},[692,693,694],"strong",{},"Part of the Utilities Preset:"," The utilities on this page are registered by the ",[697,698,699],"a",{"href":565},"Utilities Preset"," (",[702,703,704],"code",{},"useUtilitiesPreset","). For most projects, applying them via the preset is the recommended approach.",[707,708,78],"h2",{"id":709},"overview",[711,712,713],"p",{},"Animation utilities help you create continuous motion effects and keyframe-based animations. These utilities let you define and apply CSS animations for loading indicators, attention-grabbing effects, and other repeating or complex motion patterns.",[707,715,717],{"id":716},"why-use-animation-utilities","Why Use Animation Utilities?",[711,719,720],{},"Animation utilities help you:",[722,723,724,731,737,743],"ul",{},[725,726,727,730],"li",{},[692,728,729],{},"Create motion effects",": Build loading spinners, pulsing indicators, and bouncing elements",[725,732,733,736],{},[692,734,735],{},"Define reusable animations",": Register keyframe animations once and apply them as utility classes",[725,738,739,742],{},[692,740,741],{},"Maintain consistency",": Use the same animation patterns across your application",[725,744,745,748],{},[692,746,747],{},"Improve user experience",": Guide attention with purposeful motion",[707,750,752],{"id":751},"useanimationutility",[702,753,754],{},"useAnimationUtility",[711,756,757,758,761],{},"The ",[702,759,760],{},"useAnimationUtility()"," function creates utility classes for applying CSS animations.",[763,764,765,1450,1935],"tabs",{},[766,767,769],"tabs-item",{"icon":768,"label":290},"i-lucide-code",[770,771,777],"pre",{"className":772,"code":773,"filename":774,"language":775,"meta":776,"style":776},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useAnimationUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { keyframes, css } = s;\n\n\u002F\u002F Define keyframes\nconst spin = keyframes('spin', {\n    'from': { transform: 'rotate(0deg)' },\n    'to': { transform: 'rotate(360deg)' },\n});\n\nconst ping = keyframes('ping', {\n    '75%, 100%': { transform: 'scale(2)', opacity: '0' },\n});\n\nconst pulse = keyframes('pulse', {\n    '0%, 100%': { opacity: '1' },\n    '50%': { opacity: '.5' },\n});\n\nconst bounce = keyframes('bounce', {\n    '0%, 100%': { transform: 'translateY(-25%)', animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)' },\n    '50%': { transform: 'translateY(0)', animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)' },\n});\n\nuseAnimationUtility(s, {\n    none: 'none',\n    spin: css`${spin} 1s linear infinite`,\n    ping: css`${ping} 1s cubic-bezier(0, 0, 0.2, 1) infinite`,\n    pulse: css`${pulse} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,\n    bounce: css`${bounce} 1s infinite`,\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[702,778,779,815,838,844,865,892,897,904,932,965,992,1002,1007,1032,1073,1082,1087,1112,1139,1166,1175,1180,1205,1245,1284,1293,1298,1310,1328,1354,1377,1400,1423,1432,1437],{"__ignoreMap":776},[780,781,784,788,792,796,799,802,805,809,812],"span",{"class":782,"line":783},"line",1,[780,785,787],{"class":786},"s7zQu","import",[780,789,791],{"class":790},"sMK4o"," {",[780,793,795],{"class":794},"sTEyZ"," styleframe",[780,797,798],{"class":790}," }",[780,800,801],{"class":786}," from",[780,803,804],{"class":790}," \"",[780,806,808],{"class":807},"sfazB","styleframe",[780,810,811],{"class":790},"\"",[780,813,814],{"class":790},";\n",[780,816,818,820,822,825,827,829,831,834,836],{"class":782,"line":817},2,[780,819,787],{"class":786},[780,821,791],{"class":790},[780,823,824],{"class":794}," useAnimationUtility",[780,826,798],{"class":790},[780,828,801],{"class":786},[780,830,804],{"class":790},[780,832,833],{"class":807},"@styleframe\u002Ftheme",[780,835,811],{"class":790},[780,837,814],{"class":790},[780,839,841],{"class":782,"line":840},3,[780,842,843],{"emptyLinePlaceholder":223},"\n",[780,845,847,851,854,857,860,863],{"class":782,"line":846},4,[780,848,850],{"class":849},"spNyl","const",[780,852,853],{"class":794}," s ",[780,855,856],{"class":790},"=",[780,858,795],{"class":859},"s2Zo4",[780,861,862],{"class":794},"()",[780,864,814],{"class":790},[780,866,868,870,872,875,878,881,884,887,890],{"class":782,"line":867},5,[780,869,850],{"class":849},[780,871,791],{"class":790},[780,873,874],{"class":794}," keyframes",[780,876,877],{"class":790},",",[780,879,880],{"class":794}," css ",[780,882,883],{"class":790},"}",[780,885,886],{"class":790}," =",[780,888,889],{"class":794}," s",[780,891,814],{"class":790},[780,893,895],{"class":782,"line":894},6,[780,896,843],{"emptyLinePlaceholder":223},[780,898,900],{"class":782,"line":899},7,[780,901,903],{"class":902},"sHwdD","\u002F\u002F Define keyframes\n",[780,905,907,909,912,914,916,919,922,925,927,929],{"class":782,"line":906},8,[780,908,850],{"class":849},[780,910,911],{"class":794}," spin ",[780,913,856],{"class":790},[780,915,874],{"class":859},[780,917,918],{"class":794},"(",[780,920,921],{"class":790},"'",[780,923,924],{"class":807},"spin",[780,926,921],{"class":790},[780,928,877],{"class":790},[780,930,931],{"class":790}," {\n",[780,933,935,938,942,944,947,949,952,954,957,960,962],{"class":782,"line":934},9,[780,936,937],{"class":790},"    '",[780,939,941],{"class":940},"swJcz","from",[780,943,921],{"class":790},[780,945,946],{"class":790},":",[780,948,791],{"class":790},[780,950,951],{"class":940}," transform",[780,953,946],{"class":790},[780,955,956],{"class":790}," '",[780,958,959],{"class":807},"rotate(0deg)",[780,961,921],{"class":790},[780,963,964],{"class":790}," },\n",[780,966,968,970,973,975,977,979,981,983,985,988,990],{"class":782,"line":967},10,[780,969,937],{"class":790},[780,971,972],{"class":940},"to",[780,974,921],{"class":790},[780,976,946],{"class":790},[780,978,791],{"class":790},[780,980,951],{"class":940},[780,982,946],{"class":790},[780,984,956],{"class":790},[780,986,987],{"class":807},"rotate(360deg)",[780,989,921],{"class":790},[780,991,964],{"class":790},[780,993,995,997,1000],{"class":782,"line":994},11,[780,996,883],{"class":790},[780,998,999],{"class":794},")",[780,1001,814],{"class":790},[780,1003,1005],{"class":782,"line":1004},12,[780,1006,843],{"emptyLinePlaceholder":223},[780,1008,1010,1012,1015,1017,1019,1021,1023,1026,1028,1030],{"class":782,"line":1009},13,[780,1011,850],{"class":849},[780,1013,1014],{"class":794}," ping ",[780,1016,856],{"class":790},[780,1018,874],{"class":859},[780,1020,918],{"class":794},[780,1022,921],{"class":790},[780,1024,1025],{"class":807},"ping",[780,1027,921],{"class":790},[780,1029,877],{"class":790},[780,1031,931],{"class":790},[780,1033,1035,1037,1040,1042,1044,1046,1048,1050,1052,1055,1057,1059,1062,1064,1066,1069,1071],{"class":782,"line":1034},14,[780,1036,937],{"class":790},[780,1038,1039],{"class":940},"75%, 100%",[780,1041,921],{"class":790},[780,1043,946],{"class":790},[780,1045,791],{"class":790},[780,1047,951],{"class":940},[780,1049,946],{"class":790},[780,1051,956],{"class":790},[780,1053,1054],{"class":807},"scale(2)",[780,1056,921],{"class":790},[780,1058,877],{"class":790},[780,1060,1061],{"class":940}," opacity",[780,1063,946],{"class":790},[780,1065,956],{"class":790},[780,1067,1068],{"class":807},"0",[780,1070,921],{"class":790},[780,1072,964],{"class":790},[780,1074,1076,1078,1080],{"class":782,"line":1075},15,[780,1077,883],{"class":790},[780,1079,999],{"class":794},[780,1081,814],{"class":790},[780,1083,1085],{"class":782,"line":1084},16,[780,1086,843],{"emptyLinePlaceholder":223},[780,1088,1090,1092,1095,1097,1099,1101,1103,1106,1108,1110],{"class":782,"line":1089},17,[780,1091,850],{"class":849},[780,1093,1094],{"class":794}," pulse ",[780,1096,856],{"class":790},[780,1098,874],{"class":859},[780,1100,918],{"class":794},[780,1102,921],{"class":790},[780,1104,1105],{"class":807},"pulse",[780,1107,921],{"class":790},[780,1109,877],{"class":790},[780,1111,931],{"class":790},[780,1113,1115,1117,1120,1122,1124,1126,1128,1130,1132,1135,1137],{"class":782,"line":1114},18,[780,1116,937],{"class":790},[780,1118,1119],{"class":940},"0%, 100%",[780,1121,921],{"class":790},[780,1123,946],{"class":790},[780,1125,791],{"class":790},[780,1127,1061],{"class":940},[780,1129,946],{"class":790},[780,1131,956],{"class":790},[780,1133,1134],{"class":807},"1",[780,1136,921],{"class":790},[780,1138,964],{"class":790},[780,1140,1142,1144,1147,1149,1151,1153,1155,1157,1159,1162,1164],{"class":782,"line":1141},19,[780,1143,937],{"class":790},[780,1145,1146],{"class":940},"50%",[780,1148,921],{"class":790},[780,1150,946],{"class":790},[780,1152,791],{"class":790},[780,1154,1061],{"class":940},[780,1156,946],{"class":790},[780,1158,956],{"class":790},[780,1160,1161],{"class":807},".5",[780,1163,921],{"class":790},[780,1165,964],{"class":790},[780,1167,1169,1171,1173],{"class":782,"line":1168},20,[780,1170,883],{"class":790},[780,1172,999],{"class":794},[780,1174,814],{"class":790},[780,1176,1178],{"class":782,"line":1177},21,[780,1179,843],{"emptyLinePlaceholder":223},[780,1181,1183,1185,1188,1190,1192,1194,1196,1199,1201,1203],{"class":782,"line":1182},22,[780,1184,850],{"class":849},[780,1186,1187],{"class":794}," bounce ",[780,1189,856],{"class":790},[780,1191,874],{"class":859},[780,1193,918],{"class":794},[780,1195,921],{"class":790},[780,1197,1198],{"class":807},"bounce",[780,1200,921],{"class":790},[780,1202,877],{"class":790},[780,1204,931],{"class":790},[780,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1227,1229,1231,1234,1236,1238,1241,1243],{"class":782,"line":1207},23,[780,1209,937],{"class":790},[780,1211,1119],{"class":940},[780,1213,921],{"class":790},[780,1215,946],{"class":790},[780,1217,791],{"class":790},[780,1219,951],{"class":940},[780,1221,946],{"class":790},[780,1223,956],{"class":790},[780,1225,1226],{"class":807},"translateY(-25%)",[780,1228,921],{"class":790},[780,1230,877],{"class":790},[780,1232,1233],{"class":940}," animationTimingFunction",[780,1235,946],{"class":790},[780,1237,956],{"class":790},[780,1239,1240],{"class":807},"cubic-bezier(0.8, 0, 1, 1)",[780,1242,921],{"class":790},[780,1244,964],{"class":790},[780,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1267,1269,1271,1273,1275,1277,1280,1282],{"class":782,"line":1247},24,[780,1249,937],{"class":790},[780,1251,1146],{"class":940},[780,1253,921],{"class":790},[780,1255,946],{"class":790},[780,1257,791],{"class":790},[780,1259,951],{"class":940},[780,1261,946],{"class":790},[780,1263,956],{"class":790},[780,1265,1266],{"class":807},"translateY(0)",[780,1268,921],{"class":790},[780,1270,877],{"class":790},[780,1272,1233],{"class":940},[780,1274,946],{"class":790},[780,1276,956],{"class":790},[780,1278,1279],{"class":807},"cubic-bezier(0, 0, 0.2, 1)",[780,1281,921],{"class":790},[780,1283,964],{"class":790},[780,1285,1287,1289,1291],{"class":782,"line":1286},25,[780,1288,883],{"class":790},[780,1290,999],{"class":794},[780,1292,814],{"class":790},[780,1294,1296],{"class":782,"line":1295},26,[780,1297,843],{"emptyLinePlaceholder":223},[780,1299,1301,1303,1306,1308],{"class":782,"line":1300},27,[780,1302,754],{"class":859},[780,1304,1305],{"class":794},"(s",[780,1307,877],{"class":790},[780,1309,931],{"class":790},[780,1311,1313,1316,1318,1320,1323,1325],{"class":782,"line":1312},28,[780,1314,1315],{"class":940},"    none",[780,1317,946],{"class":790},[780,1319,956],{"class":790},[780,1321,1322],{"class":807},"none",[780,1324,921],{"class":790},[780,1326,1327],{"class":790},",\n",[780,1329,1331,1334,1336,1339,1342,1344,1346,1349,1352],{"class":782,"line":1330},29,[780,1332,1333],{"class":940},"    spin",[780,1335,946],{"class":790},[780,1337,1338],{"class":859}," css",[780,1340,1341],{"class":790},"`${",[780,1343,924],{"class":794},[780,1345,883],{"class":790},[780,1347,1348],{"class":807}," 1s linear infinite",[780,1350,1351],{"class":790},"`",[780,1353,1327],{"class":790},[780,1355,1357,1360,1362,1364,1366,1368,1370,1373,1375],{"class":782,"line":1356},30,[780,1358,1359],{"class":940},"    ping",[780,1361,946],{"class":790},[780,1363,1338],{"class":859},[780,1365,1341],{"class":790},[780,1367,1025],{"class":794},[780,1369,883],{"class":790},[780,1371,1372],{"class":807}," 1s cubic-bezier(0, 0, 0.2, 1) infinite",[780,1374,1351],{"class":790},[780,1376,1327],{"class":790},[780,1378,1380,1383,1385,1387,1389,1391,1393,1396,1398],{"class":782,"line":1379},31,[780,1381,1382],{"class":940},"    pulse",[780,1384,946],{"class":790},[780,1386,1338],{"class":859},[780,1388,1341],{"class":790},[780,1390,1105],{"class":794},[780,1392,883],{"class":790},[780,1394,1395],{"class":807}," 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",[780,1397,1351],{"class":790},[780,1399,1327],{"class":790},[780,1401,1403,1406,1408,1410,1412,1414,1416,1419,1421],{"class":782,"line":1402},32,[780,1404,1405],{"class":940},"    bounce",[780,1407,946],{"class":790},[780,1409,1338],{"class":859},[780,1411,1341],{"class":790},[780,1413,1198],{"class":794},[780,1415,883],{"class":790},[780,1417,1418],{"class":807}," 1s infinite",[780,1420,1351],{"class":790},[780,1422,1327],{"class":790},[780,1424,1426,1428,1430],{"class":782,"line":1425},33,[780,1427,883],{"class":790},[780,1429,999],{"class":794},[780,1431,814],{"class":790},[780,1433,1435],{"class":782,"line":1434},34,[780,1436,843],{"emptyLinePlaceholder":223},[780,1438,1440,1443,1446,1448],{"class":782,"line":1439},35,[780,1441,1442],{"class":786},"export",[780,1444,1445],{"class":786}," default",[780,1447,889],{"class":794},[780,1449,814],{"class":790},[766,1451,1452],{"icon":154,"label":326},[770,1453,1458],{"className":1454,"code":1455,"filename":1456,"language":1457,"meta":776,"style":776},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n@keyframes ping {\n    75%, 100% { transform: scale(2); opacity: 0; }\n}\n\n@keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: .5; }\n}\n\n@keyframes bounce {\n    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }\n    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }\n}\n\n._animation\\:none { animation: none; }\n._animation\\:spin { animation: spin 1s linear infinite; }\n._animation\\:ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }\n._animation\\:pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }\n._animation\\:bounce { animation: bounce 1s infinite; }\n","styleframe\u002Findex.css","css",[702,1459,1460,1471,1499,1521,1526,1530,1539,1578,1582,1586,1595,1617,1635,1639,1643,1652,1705,1750,1754,1758,1785,1813,1860,1909],{"__ignoreMap":776},[780,1461,1462,1465,1469],{"class":782,"line":783},[780,1463,1464],{"class":786},"@keyframes",[780,1466,1468],{"class":1467},"sHdIc"," spin",[780,1470,931],{"class":790},[780,1472,1473,1477,1479,1482,1484,1487,1489,1493,1496],{"class":782,"line":817},[780,1474,1476],{"class":1475},"sBMFI","    from",[780,1478,791],{"class":790},[780,1480,951],{"class":1481},"sqsOY",[780,1483,946],{"class":790},[780,1485,1486],{"class":859}," rotate",[780,1488,918],{"class":790},[780,1490,1492],{"class":1491},"sbssI","0deg",[780,1494,1495],{"class":790},");",[780,1497,1498],{"class":790}," }\n",[780,1500,1501,1504,1506,1508,1510,1512,1514,1517,1519],{"class":782,"line":840},[780,1502,1503],{"class":1475},"    to",[780,1505,791],{"class":790},[780,1507,951],{"class":1481},[780,1509,946],{"class":790},[780,1511,1486],{"class":859},[780,1513,918],{"class":790},[780,1515,1516],{"class":1491},"360deg",[780,1518,1495],{"class":790},[780,1520,1498],{"class":790},[780,1522,1523],{"class":782,"line":846},[780,1524,1525],{"class":790},"}\n",[780,1527,1528],{"class":782,"line":867},[780,1529,843],{"emptyLinePlaceholder":223},[780,1531,1532,1534,1537],{"class":782,"line":894},[780,1533,1464],{"class":786},[780,1535,1536],{"class":1467}," ping",[780,1538,931],{"class":790},[780,1540,1541,1544,1547,1550,1552,1554,1556,1559,1561,1564,1566,1568,1570,1573,1576],{"class":782,"line":899},[780,1542,1543],{"class":1475},"    75%",[780,1545,1546],{"class":794},", ",[780,1548,1549],{"class":1475},"100%",[780,1551,791],{"class":790},[780,1553,951],{"class":1481},[780,1555,946],{"class":790},[780,1557,1558],{"class":859}," scale",[780,1560,918],{"class":790},[780,1562,1563],{"class":1491},"2",[780,1565,1495],{"class":790},[780,1567,1061],{"class":1481},[780,1569,946],{"class":790},[780,1571,1572],{"class":1491}," 0",[780,1574,1575],{"class":790},";",[780,1577,1498],{"class":790},[780,1579,1580],{"class":782,"line":906},[780,1581,1525],{"class":790},[780,1583,1584],{"class":782,"line":934},[780,1585,843],{"emptyLinePlaceholder":223},[780,1587,1588,1590,1593],{"class":782,"line":967},[780,1589,1464],{"class":786},[780,1591,1592],{"class":1467}," pulse",[780,1594,931],{"class":790},[780,1596,1597,1600,1602,1604,1606,1608,1610,1613,1615],{"class":782,"line":994},[780,1598,1599],{"class":1475},"    0%",[780,1601,1546],{"class":794},[780,1603,1549],{"class":1475},[780,1605,791],{"class":790},[780,1607,1061],{"class":1481},[780,1609,946],{"class":790},[780,1611,1612],{"class":1491}," 1",[780,1614,1575],{"class":790},[780,1616,1498],{"class":790},[780,1618,1619,1622,1624,1626,1628,1631,1633],{"class":782,"line":1004},[780,1620,1621],{"class":1475},"    50%",[780,1623,791],{"class":790},[780,1625,1061],{"class":1481},[780,1627,946],{"class":790},[780,1629,1630],{"class":1491}," .5",[780,1632,1575],{"class":790},[780,1634,1498],{"class":790},[780,1636,1637],{"class":782,"line":1009},[780,1638,1525],{"class":790},[780,1640,1641],{"class":782,"line":1034},[780,1642,843],{"emptyLinePlaceholder":223},[780,1644,1645,1647,1650],{"class":782,"line":1075},[780,1646,1464],{"class":786},[780,1648,1649],{"class":1467}," bounce",[780,1651,931],{"class":790},[780,1653,1654,1656,1658,1660,1662,1664,1666,1669,1671,1674,1676,1679,1681,1684,1686,1689,1691,1693,1695,1697,1699,1701,1703],{"class":782,"line":1084},[780,1655,1599],{"class":1475},[780,1657,1546],{"class":794},[780,1659,1549],{"class":1475},[780,1661,791],{"class":790},[780,1663,951],{"class":1481},[780,1665,946],{"class":790},[780,1667,1668],{"class":859}," translateY",[780,1670,918],{"class":790},[780,1672,1673],{"class":1491},"-25%",[780,1675,1495],{"class":790},[780,1677,1678],{"class":1481}," animation-timing-function",[780,1680,946],{"class":790},[780,1682,1683],{"class":859}," cubic-bezier",[780,1685,918],{"class":790},[780,1687,1688],{"class":1491},"0.8",[780,1690,877],{"class":790},[780,1692,1572],{"class":1491},[780,1694,877],{"class":790},[780,1696,1612],{"class":1491},[780,1698,877],{"class":790},[780,1700,1612],{"class":1491},[780,1702,1495],{"class":790},[780,1704,1498],{"class":790},[780,1706,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739,1742,1744,1746,1748],{"class":782,"line":1089},[780,1708,1621],{"class":1475},[780,1710,791],{"class":790},[780,1712,951],{"class":1481},[780,1714,946],{"class":790},[780,1716,1668],{"class":859},[780,1718,918],{"class":790},[780,1720,1068],{"class":1491},[780,1722,1495],{"class":790},[780,1724,1678],{"class":1481},[780,1726,946],{"class":790},[780,1728,1683],{"class":859},[780,1730,918],{"class":790},[780,1732,1068],{"class":1491},[780,1734,877],{"class":790},[780,1736,1572],{"class":1491},[780,1738,877],{"class":790},[780,1740,1741],{"class":1491}," 0.2",[780,1743,877],{"class":790},[780,1745,1612],{"class":1491},[780,1747,1495],{"class":790},[780,1749,1498],{"class":790},[780,1751,1752],{"class":782,"line":1114},[780,1753,1525],{"class":790},[780,1755,1756],{"class":782,"line":1141},[780,1757,843],{"emptyLinePlaceholder":223},[780,1759,1760,1763,1766,1769,1771,1773,1776,1778,1781,1783],{"class":782,"line":1168},[780,1761,1762],{"class":790},".",[780,1764,1765],{"class":1475},"_animation",[780,1767,1768],{"class":794},"\\:",[780,1770,1322],{"class":1475},[780,1772,791],{"class":790},[780,1774,1775],{"class":1481}," animation",[780,1777,946],{"class":790},[780,1779,1780],{"class":794}," none",[780,1782,1575],{"class":790},[780,1784,1498],{"class":790},[780,1786,1787,1789,1791,1793,1795,1797,1799,1801,1803,1806,1809,1811],{"class":782,"line":1177},[780,1788,1762],{"class":790},[780,1790,1765],{"class":1475},[780,1792,1768],{"class":794},[780,1794,924],{"class":1475},[780,1796,791],{"class":790},[780,1798,1775],{"class":1481},[780,1800,946],{"class":790},[780,1802,911],{"class":794},[780,1804,1805],{"class":1491},"1s",[780,1807,1808],{"class":794}," linear infinite",[780,1810,1575],{"class":790},[780,1812,1498],{"class":790},[780,1814,1815,1817,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851,1853,1856,1858],{"class":782,"line":1182},[780,1816,1762],{"class":790},[780,1818,1765],{"class":1475},[780,1820,1768],{"class":794},[780,1822,1025],{"class":1475},[780,1824,791],{"class":790},[780,1826,1775],{"class":1481},[780,1828,946],{"class":790},[780,1830,1014],{"class":794},[780,1832,1805],{"class":1491},[780,1834,1683],{"class":859},[780,1836,918],{"class":790},[780,1838,1068],{"class":1491},[780,1840,877],{"class":790},[780,1842,1572],{"class":1491},[780,1844,877],{"class":790},[780,1846,1741],{"class":1491},[780,1848,877],{"class":790},[780,1850,1612],{"class":1491},[780,1852,999],{"class":790},[780,1854,1855],{"class":794}," infinite",[780,1857,1575],{"class":790},[780,1859,1498],{"class":790},[780,1861,1862,1864,1866,1868,1870,1872,1874,1876,1878,1881,1883,1885,1888,1890,1892,1894,1897,1899,1901,1903,1905,1907],{"class":782,"line":1207},[780,1863,1762],{"class":790},[780,1865,1765],{"class":1475},[780,1867,1768],{"class":794},[780,1869,1105],{"class":1475},[780,1871,791],{"class":790},[780,1873,1775],{"class":1481},[780,1875,946],{"class":790},[780,1877,1094],{"class":794},[780,1879,1880],{"class":1491},"2s",[780,1882,1683],{"class":859},[780,1884,918],{"class":790},[780,1886,1887],{"class":1491},"0.4",[780,1889,877],{"class":790},[780,1891,1572],{"class":1491},[780,1893,877],{"class":790},[780,1895,1896],{"class":1491}," 0.6",[780,1898,877],{"class":790},[780,1900,1612],{"class":1491},[780,1902,999],{"class":790},[780,1904,1855],{"class":794},[780,1906,1575],{"class":790},[780,1908,1498],{"class":790},[780,1910,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931,1933],{"class":782,"line":1247},[780,1912,1762],{"class":790},[780,1914,1765],{"class":1475},[780,1916,1768],{"class":794},[780,1918,1198],{"class":1475},[780,1920,791],{"class":790},[780,1922,1775],{"class":1481},[780,1924,946],{"class":790},[780,1926,1187],{"class":794},[780,1928,1805],{"class":1491},[780,1930,1855],{"class":794},[780,1932,1575],{"class":790},[780,1934,1498],{"class":790},[766,1936,1938],{"icon":520,"label":1937},"Usage",[770,1939,1943],{"className":1940,"code":1941,"language":1942,"meta":776,"style":776},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg class=\"_animation:spin\">\u003C!-- Loading spinner -->\u003C\u002Fsvg>\n\u003Cspan class=\"_animation:ping\">\u003C!-- Notification dot -->\u003C\u002Fspan>\n\u003Cdiv class=\"_animation:pulse\">\u003C!-- Skeleton loader -->\u003C\u002Fdiv>\n\u003Cdiv class=\"_animation:bounce\">\u003C!-- Bouncing element -->\u003C\u002Fdiv>\n","html",[702,1944,1945,1979,2007,2036],{"__ignoreMap":776},[780,1946,1947,1950,1953,1956,1958,1960,1963,1965,1968,1971,1974,1976],{"class":782,"line":783},[780,1948,1949],{"class":790},"\u003C",[780,1951,1952],{"class":940},"svg",[780,1954,1955],{"class":849}," class",[780,1957,856],{"class":790},[780,1959,811],{"class":790},[780,1961,1962],{"class":807},"_animation:spin",[780,1964,811],{"class":790},[780,1966,1967],{"class":790},">",[780,1969,1970],{"class":902},"\u003C!-- Loading spinner -->",[780,1972,1973],{"class":790},"\u003C\u002F",[780,1975,1952],{"class":940},[780,1977,1978],{"class":790},">\n",[780,1980,1981,1983,1985,1987,1989,1991,1994,1996,1998,2001,2003,2005],{"class":782,"line":817},[780,1982,1949],{"class":790},[780,1984,780],{"class":940},[780,1986,1955],{"class":849},[780,1988,856],{"class":790},[780,1990,811],{"class":790},[780,1992,1993],{"class":807},"_animation:ping",[780,1995,811],{"class":790},[780,1997,1967],{"class":790},[780,1999,2000],{"class":902},"\u003C!-- Notification dot -->",[780,2002,1973],{"class":790},[780,2004,780],{"class":940},[780,2006,1978],{"class":790},[780,2008,2009,2011,2014,2016,2018,2020,2023,2025,2027,2030,2032,2034],{"class":782,"line":840},[780,2010,1949],{"class":790},[780,2012,2013],{"class":940},"div",[780,2015,1955],{"class":849},[780,2017,856],{"class":790},[780,2019,811],{"class":790},[780,2021,2022],{"class":807},"_animation:pulse",[780,2024,811],{"class":790},[780,2026,1967],{"class":790},[780,2028,2029],{"class":902},"\u003C!-- Skeleton loader -->",[780,2031,1973],{"class":790},[780,2033,2013],{"class":940},[780,2035,1978],{"class":790},[780,2037,2038,2040,2042,2044,2046,2048,2051,2053,2055,2058,2060,2062],{"class":782,"line":846},[780,2039,1949],{"class":790},[780,2041,2013],{"class":940},[780,2043,1955],{"class":849},[780,2045,856],{"class":790},[780,2047,811],{"class":790},[780,2049,2050],{"class":807},"_animation:bounce",[780,2052,811],{"class":790},[780,2054,1967],{"class":790},[780,2056,2057],{"class":902},"\u003C!-- Bouncing element -->",[780,2059,1973],{"class":790},[780,2061,2013],{"class":940},[780,2063,1978],{"class":790},[707,2065,2067],{"id":2066},"examples","Examples",[2069,2070,2072],"h3",{"id":2071},"loading-spinner","Loading Spinner",[763,2074,2075,2298],{},[766,2076,2077],{"icon":768,"label":290},[770,2078,2080],{"className":772,"code":2079,"filename":774,"language":775,"meta":776,"style":776},"import { styleframe } from \"styleframe\";\nimport { useAnimationUtility } from \"@styleframe\u002Ftheme\";\n\nconst s = styleframe();\nconst { keyframes, css } = s;\n\nconst spin = keyframes('spin', {\n    'from': { transform: 'rotate(0deg)' },\n    'to': { transform: 'rotate(360deg)' },\n});\n\nuseAnimationUtility(s, {\n    spin: css`${spin} 1s linear infinite`,\n});\n\nexport default s;\n",[702,2081,2082,2102,2122,2126,2140,2160,2164,2186,2210,2234,2242,2246,2256,2276,2284,2288],{"__ignoreMap":776},[780,2083,2084,2086,2088,2090,2092,2094,2096,2098,2100],{"class":782,"line":783},[780,2085,787],{"class":786},[780,2087,791],{"class":790},[780,2089,795],{"class":794},[780,2091,798],{"class":790},[780,2093,801],{"class":786},[780,2095,804],{"class":790},[780,2097,808],{"class":807},[780,2099,811],{"class":790},[780,2101,814],{"class":790},[780,2103,2104,2106,2108,2110,2112,2114,2116,2118,2120],{"class":782,"line":817},[780,2105,787],{"class":786},[780,2107,791],{"class":790},[780,2109,824],{"class":794},[780,2111,798],{"class":790},[780,2113,801],{"class":786},[780,2115,804],{"class":790},[780,2117,833],{"class":807},[780,2119,811],{"class":790},[780,2121,814],{"class":790},[780,2123,2124],{"class":782,"line":840},[780,2125,843],{"emptyLinePlaceholder":223},[780,2127,2128,2130,2132,2134,2136,2138],{"class":782,"line":846},[780,2129,850],{"class":849},[780,2131,853],{"class":794},[780,2133,856],{"class":790},[780,2135,795],{"class":859},[780,2137,862],{"class":794},[780,2139,814],{"class":790},[780,2141,2142,2144,2146,2148,2150,2152,2154,2156,2158],{"class":782,"line":867},[780,2143,850],{"class":849},[780,2145,791],{"class":790},[780,2147,874],{"class":794},[780,2149,877],{"class":790},[780,2151,880],{"class":794},[780,2153,883],{"class":790},[780,2155,886],{"class":790},[780,2157,889],{"class":794},[780,2159,814],{"class":790},[780,2161,2162],{"class":782,"line":894},[780,2163,843],{"emptyLinePlaceholder":223},[780,2165,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184],{"class":782,"line":899},[780,2167,850],{"class":849},[780,2169,911],{"class":794},[780,2171,856],{"class":790},[780,2173,874],{"class":859},[780,2175,918],{"class":794},[780,2177,921],{"class":790},[780,2179,924],{"class":807},[780,2181,921],{"class":790},[780,2183,877],{"class":790},[780,2185,931],{"class":790},[780,2187,2188,2190,2192,2194,2196,2198,2200,2202,2204,2206,2208],{"class":782,"line":906},[780,2189,937],{"class":790},[780,2191,941],{"class":940},[780,2193,921],{"class":790},[780,2195,946],{"class":790},[780,2197,791],{"class":790},[780,2199,951],{"class":940},[780,2201,946],{"class":790},[780,2203,956],{"class":790},[780,2205,959],{"class":807},[780,2207,921],{"class":790},[780,2209,964],{"class":790},[780,2211,2212,2214,2216,2218,2220,2222,2224,2226,2228,2230,2232],{"class":782,"line":934},[780,2213,937],{"class":790},[780,2215,972],{"class":940},[780,2217,921],{"class":790},[780,2219,946],{"class":790},[780,2221,791],{"class":790},[780,2223,951],{"class":940},[780,2225,946],{"class":790},[780,2227,956],{"class":790},[780,2229,987],{"class":807},[780,2231,921],{"class":790},[780,2233,964],{"class":790},[780,2235,2236,2238,2240],{"class":782,"line":967},[780,2237,883],{"class":790},[780,2239,999],{"class":794},[780,2241,814],{"class":790},[780,2243,2244],{"class":782,"line":994},[780,2245,843],{"emptyLinePlaceholder":223},[780,2247,2248,2250,2252,2254],{"class":782,"line":1004},[780,2249,754],{"class":859},[780,2251,1305],{"class":794},[780,2253,877],{"class":790},[780,2255,931],{"class":790},[780,2257,2258,2260,2262,2264,2266,2268,2270,2272,2274],{"class":782,"line":1009},[780,2259,1333],{"class":940},[780,2261,946],{"class":790},[780,2263,1338],{"class":859},[780,2265,1341],{"class":790},[780,2267,924],{"class":794},[780,2269,883],{"class":790},[780,2271,1348],{"class":807},[780,2273,1351],{"class":790},[780,2275,1327],{"class":790},[780,2277,2278,2280,2282],{"class":782,"line":1034},[780,2279,883],{"class":790},[780,2281,999],{"class":794},[780,2283,814],{"class":790},[780,2285,2286],{"class":782,"line":1075},[780,2287,843],{"emptyLinePlaceholder":223},[780,2289,2290,2292,2294,2296],{"class":782,"line":1084},[780,2291,1442],{"class":786},[780,2293,1445],{"class":786},[780,2295,889],{"class":794},[780,2297,814],{"class":790},[766,2299,2300],{"icon":154,"label":326},[770,2301,2303],{"className":1454,"code":2302,"filename":1456,"language":1457,"meta":776,"style":776},"@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n._animation\\:spin { animation: spin 1s linear infinite; }\n",[702,2304,2305,2313,2333,2353,2357,2361],{"__ignoreMap":776},[780,2306,2307,2309,2311],{"class":782,"line":783},[780,2308,1464],{"class":786},[780,2310,1468],{"class":1467},[780,2312,931],{"class":790},[780,2314,2315,2317,2319,2321,2323,2325,2327,2329,2331],{"class":782,"line":817},[780,2316,1476],{"class":1475},[780,2318,791],{"class":790},[780,2320,951],{"class":1481},[780,2322,946],{"class":790},[780,2324,1486],{"class":859},[780,2326,918],{"class":790},[780,2328,1492],{"class":1491},[780,2330,1495],{"class":790},[780,2332,1498],{"class":790},[780,2334,2335,2337,2339,2341,2343,2345,2347,2349,2351],{"class":782,"line":840},[780,2336,1503],{"class":1475},[780,2338,791],{"class":790},[780,2340,951],{"class":1481},[780,2342,946],{"class":790},[780,2344,1486],{"class":859},[780,2346,918],{"class":790},[780,2348,1516],{"class":1491},[780,2350,1495],{"class":790},[780,2352,1498],{"class":790},[780,2354,2355],{"class":782,"line":846},[780,2356,1525],{"class":790},[780,2358,2359],{"class":782,"line":867},[780,2360,843],{"emptyLinePlaceholder":223},[780,2362,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2385],{"class":782,"line":894},[780,2364,1762],{"class":790},[780,2366,1765],{"class":1475},[780,2368,1768],{"class":794},[780,2370,924],{"class":1475},[780,2372,791],{"class":790},[780,2374,1775],{"class":1481},[780,2376,946],{"class":790},[780,2378,911],{"class":794},[780,2380,1805],{"class":1491},[780,2382,1808],{"class":794},[780,2384,1575],{"class":790},[780,2386,1498],{"class":790},[711,2388,2389],{},"Usage in HTML:",[770,2391,2393],{"className":1940,"code":2392,"language":1942,"meta":776,"style":776},"\u003Csvg class=\"_animation:spin\" width=\"24\" height=\"24\">\n    \u003Ccircle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" fill=\"none\" \u002F>\n\u003C\u002Fsvg>\n",[702,2394,2395,2436,2517],{"__ignoreMap":776},[780,2396,2397,2399,2401,2403,2405,2407,2409,2411,2414,2416,2418,2421,2423,2426,2428,2430,2432,2434],{"class":782,"line":783},[780,2398,1949],{"class":790},[780,2400,1952],{"class":940},[780,2402,1955],{"class":849},[780,2404,856],{"class":790},[780,2406,811],{"class":790},[780,2408,1962],{"class":807},[780,2410,811],{"class":790},[780,2412,2413],{"class":849}," width",[780,2415,856],{"class":790},[780,2417,811],{"class":790},[780,2419,2420],{"class":807},"24",[780,2422,811],{"class":790},[780,2424,2425],{"class":849}," height",[780,2427,856],{"class":790},[780,2429,811],{"class":790},[780,2431,2420],{"class":807},[780,2433,811],{"class":790},[780,2435,1978],{"class":790},[780,2437,2438,2441,2444,2447,2449,2451,2454,2456,2459,2461,2463,2465,2467,2470,2472,2474,2477,2479,2482,2484,2486,2489,2491,2494,2496,2498,2501,2503,2506,2508,2510,2512,2514],{"class":782,"line":817},[780,2439,2440],{"class":790},"    \u003C",[780,2442,2443],{"class":940},"circle",[780,2445,2446],{"class":849}," cx",[780,2448,856],{"class":790},[780,2450,811],{"class":790},[780,2452,2453],{"class":807},"12",[780,2455,811],{"class":790},[780,2457,2458],{"class":849}," cy",[780,2460,856],{"class":790},[780,2462,811],{"class":790},[780,2464,2453],{"class":807},[780,2466,811],{"class":790},[780,2468,2469],{"class":849}," r",[780,2471,856],{"class":790},[780,2473,811],{"class":790},[780,2475,2476],{"class":807},"10",[780,2478,811],{"class":790},[780,2480,2481],{"class":849}," stroke",[780,2483,856],{"class":790},[780,2485,811],{"class":790},[780,2487,2488],{"class":807},"currentColor",[780,2490,811],{"class":790},[780,2492,2493],{"class":849}," stroke-width",[780,2495,856],{"class":790},[780,2497,811],{"class":790},[780,2499,2500],{"class":807},"4",[780,2502,811],{"class":790},[780,2504,2505],{"class":849}," fill",[780,2507,856],{"class":790},[780,2509,811],{"class":790},[780,2511,1322],{"class":807},[780,2513,811],{"class":790},[780,2515,2516],{"class":790}," \u002F>\n",[780,2518,2519,2521,2523],{"class":782,"line":840},[780,2520,1973],{"class":790},[780,2522,1952],{"class":940},[780,2524,1978],{"class":790},[707,2526,2528],{"id":2527},"best-practices","Best Practices",[722,2530,2531,2537,2543,2549,2555],{},[725,2532,2533,2536],{},[692,2534,2535],{},"Use purposeful animation",": Animations should enhance UX, not distract",[725,2538,2539,2542],{},[692,2540,2541],{},"Respect reduced motion",": Consider users who prefer reduced motion",[725,2544,2545,2548],{},[692,2546,2547],{},"Avoid animating layout",": Prefer transform and opacity for performance",[725,2550,2551,2554],{},[692,2552,2553],{},"Be consistent",": Use the same animation patterns across similar interactions",[725,2556,2557,2560],{},[692,2558,2559],{},"Define keyframes alongside animations",": Keep keyframe definitions close to where they're used for maintainability",[707,2562,2564],{"id":2563},"faq","FAQ",[2566,2567,2568,2574],"accordion",{},[2569,2570,2573],"accordion-item",{"icon":2571,"label":2572},"i-lucide-circle-help","When should I use animations vs transitions?","Use animations for continuous or complex motion (loading spinners, attention-grabbing effects). Use transitions for state changes (hover, focus, active). Animations can run independently; transitions are triggered by state changes.",[2569,2575,2577,2578,2581,2582,2585],{"icon":2571,"label":2576},"How do I support users who prefer reduced motion?","Use the ",[702,2579,2580],{},"prefers-reduced-motion"," media query to disable or reduce animations. Consider creating a modifier that respects this preference, or set ",[702,2583,2584],{},"animation: none"," globally for these users.",[2587,2588,2589],"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 .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 .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 .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}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":776,"searchDepth":817,"depth":817,"links":2591},[2592,2593,2594,2595,2598,2599],{"id":709,"depth":817,"text":78},{"id":716,"depth":817,"text":717},{"id":751,"depth":817,"text":754},{"id":2066,"depth":817,"text":2067,"children":2596},[2597],{"id":2071,"depth":840,"text":2072},{"id":2527,"depth":817,"text":2528},{"id":2563,"depth":817,"text":2564},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.","md",null,{},{"title":573,"icon":576},{"title":684,"description":2600},"G8fS6QYDieB4O4ynhymhZFairdPqMoojE4k-94PlFAs",[2608,2610],{"title":568,"path":569,"stem":570,"description":2609,"icon":571,"children":-1},"Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.",{"title":578,"path":579,"stem":580,"description":2611,"icon":303,"children":-1},"Create background utilities for colors, images, sizing, positioning, and more with full type safety.",1781596350637]