[{"data":1,"prerenderedAt":2325},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-animations":407,"-docs-theme-utilities-composables-animations-surround":2320},{"gettingStarted":4,"api":57,"theme":148},[5],{"title":6,"icon":7,"path":8,"stem":9,"children":10,"page":7},"Getting Started",false,"/docs/getting-started","docs/getting-started",[11,16,21,26,31,52],{"title":12,"path":13,"stem":14,"icon":15},"Introduction","/docs/getting-started/introduction","docs/getting-started/01.introduction","i-lucide-house",{"title":17,"path":18,"stem":19,"icon":20},"Installation","/docs/getting-started/installation","docs/getting-started/02.installation","i-lucide-download",{"title":22,"path":23,"stem":24,"icon":25},"Guides","/docs/getting-started/guides","docs/getting-started/03.guides","i-lucide-book-open",{"title":27,"path":28,"stem":29,"icon":30},"Comparisons","/docs/getting-started/comparisons","docs/getting-started/04.comparisons","i-lucide-file-diff",{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":7},"Tooling","i-lucide-hammer","/docs/getting-started/tooling","docs/getting-started/05.tooling",[37,42,47],{"title":38,"path":39,"stem":40,"icon":41},"CLI Reference","/docs/getting-started/tooling/cli","docs/getting-started/05.tooling/01.cli","i-lucide-square-terminal",{"title":43,"path":44,"stem":45,"icon":46},"Utility Scanner","/docs/getting-started/tooling/scanner","docs/getting-started/05.tooling/02.scanner","i-lucide-view",{"title":48,"path":49,"stem":50,"icon":51},"Figma Plugin","/docs/getting-started/tooling/figma-plugin","docs/getting-started/05.tooling/03.figma-plugin","i-simple-icons-figma",{"title":53,"path":54,"stem":55,"icon":56},"Licensing","/docs/getting-started/licensing","docs/getting-started/06.licensing","i-lucide-scale",[58],{"title":59,"path":60,"stem":61,"children":62,"icon":7},"API Reference","/docs/api","docs/api/00.index",[63,66,71,76,81,86,91,96,101,106,111,116,131,136,141,146],{"title":64,"path":60,"stem":61,"icon":65},"Overview","i-lucide-book-text",{"title":67,"path":68,"stem":69,"icon":70},"Instance","/docs/api/instance","docs/api/01.instance","i-lucide-cloud-lightning",{"title":72,"path":73,"stem":74,"icon":75},"Variables","/docs/api/variables","docs/api/02.variables","i-lucide-variable",{"title":77,"path":78,"stem":79,"icon":80},"Selectors","/docs/api/selectors","docs/api/03.selectors","i-lucide-scan-text",{"title":82,"path":83,"stem":84,"icon":85},"At-Rules","/docs/api/at-rules","docs/api/04.at-rules","i-lucide-at-sign",{"title":87,"path":88,"stem":89,"icon":90},"Media Queries","/docs/api/media-queries","docs/api/05.media-queries","i-lucide-image-upscale",{"title":92,"path":93,"stem":94,"icon":95},"Keyframes","/docs/api/keyframes","docs/api/06.keyframes","i-lucide-square-play",{"title":97,"path":98,"stem":99,"icon":100},"Interpolation","/docs/api/interpolation","docs/api/07.interpolation","i-lucide-wrap-text",{"title":102,"path":103,"stem":104,"icon":105},"Utilities","/docs/api/utilities","docs/api/08.utilities","i-lucide-sparkles",{"title":107,"path":108,"stem":109,"icon":110},"Utility Modifiers","/docs/api/utility-modifiers","docs/api/09.utility-modifiers","i-lucide-align-horizontal-justify-center",{"title":112,"path":113,"stem":114,"icon":115},"Themes","/docs/api/themes","docs/api/10.themes","i-lucide-paintbrush",{"title":117,"path":118,"stem":119,"children":120,"icon":130},"Recipes","/docs/api/recipes","docs/api/11.recipes/00.index",[121,122,126],{"title":64,"path":118,"stem":119},{"title":123,"path":124,"stem":125},"Runtime","/docs/api/recipes/runtime","docs/api/11.recipes/01.runtime",{"title":127,"path":128,"stem":129},"Output Format","/docs/api/recipes/output-format","docs/api/11.recipes/02.output-format","i-lucide-chef-hat",{"title":132,"path":133,"stem":134,"icon":135},"Composables","/docs/api/composables","docs/api/12.composables","i-lucide-component",{"title":137,"path":138,"stem":139,"icon":140},"Imports","/docs/api/imports","docs/api/13.imports","i-lucide-file-input",{"title":142,"path":143,"stem":144,"icon":145},"Merging","/docs/api/merging","docs/api/13.merging","i-lucide-squares-intersect",{"title":137,"path":138,"stem":147,"icon":140},"docs/api/14.imports",[149,223,289,362],{"title":150,"path":151,"stem":152,"children":153,"icon":7},"Design Tokens","/docs/theme/design-tokens","docs/theme/design-tokens/00.index",[154,155,160],{"title":64,"path":151,"stem":152,"icon":65},{"title":156,"path":157,"stem":158,"icon":159},"Presets","/docs/theme/design-tokens/presets","docs/theme/design-tokens/01.presets","i-lucide-package",{"title":132,"icon":135,"defaultOpen":7,"path":161,"stem":162,"children":163,"page":7},"/docs/theme/design-tokens/composables","docs/theme/design-tokens/02.composables",[164,168,172,176,180,184,188,192,207,211,215,219],{"title":165,"path":166,"stem":167,"icon":7},"Border Radiuses","/docs/theme/design-tokens/composables/border-radiuses","docs/theme/design-tokens/02.composables/00.border-radiuses",{"title":169,"path":170,"stem":171,"icon":7},"Borders","/docs/theme/design-tokens/composables/borders","docs/theme/design-tokens/02.composables/01.borders",{"title":173,"path":174,"stem":175,"icon":7},"Box Shadows","/docs/theme/design-tokens/composables/box-shadows","docs/theme/design-tokens/02.composables/02.box-shadows",{"title":177,"path":178,"stem":179,"icon":7},"Breakpoints","/docs/theme/design-tokens/composables/breakpoints","docs/theme/design-tokens/02.composables/03.breakpoints",{"title":181,"path":182,"stem":183,"icon":7},"Colors","/docs/theme/design-tokens/composables/colors","docs/theme/design-tokens/02.composables/04.colors",{"title":185,"path":186,"stem":187,"icon":7},"Duration","/docs/theme/design-tokens/composables/duration","docs/theme/design-tokens/02.composables/05.duration",{"title":189,"path":190,"stem":191,"icon":7},"Easing","/docs/theme/design-tokens/composables/easing","docs/theme/design-tokens/02.composables/06.easing",{"title":193,"path":194,"stem":195,"children":196,"icon":7,"pro":206,"defaultOpen":7},"Fluid Design","/docs/theme/design-tokens/composables/fluid-design","docs/theme/design-tokens/02.composables/07.fluid-design/01.index",[197,198,202],{"title":64,"path":194,"stem":195},{"title":199,"path":200,"stem":201},"Fluid Viewport","/docs/theme/design-tokens/composables/fluid-design/viewport","docs/theme/design-tokens/02.composables/07.fluid-design/02.viewport",{"title":203,"path":204,"stem":205},"Fluid Typography","/docs/theme/design-tokens/composables/fluid-design/typography","docs/theme/design-tokens/02.composables/07.fluid-design/03.typography",true,{"title":208,"path":209,"stem":210,"icon":7},"Scales","/docs/theme/design-tokens/composables/scales","docs/theme/design-tokens/02.composables/08.scales",{"title":212,"path":213,"stem":214,"icon":7},"Spacing","/docs/theme/design-tokens/composables/spacing","docs/theme/design-tokens/02.composables/09.spacing",{"title":216,"path":217,"stem":218,"icon":7},"Typography","/docs/theme/design-tokens/composables/typography","docs/theme/design-tokens/02.composables/10.typography",{"title":220,"path":221,"stem":222,"icon":7},"Z-Index","/docs/theme/design-tokens/composables/z-index","docs/theme/design-tokens/02.composables/11.z-index",{"title":224,"path":225,"stem":226,"children":227,"icon":7},"Components","/docs/theme/components","docs/theme/components/00.index",[228,229],{"title":64,"path":225,"stem":226,"icon":65},{"title":132,"icon":135,"defaultOpen":206,"path":230,"stem":231,"children":232,"page":7},"/docs/theme/components/composables","docs/theme/components/02.composables",[233,237,241,245,249,253,257,261,265,269,273,277,281,285],{"title":234,"path":235,"stem":236},"Badge","/docs/theme/components/composables/badge","docs/theme/components/02.composables/01.badge",{"title":238,"path":239,"stem":240},"Button","/docs/theme/components/composables/button","docs/theme/components/02.composables/02.button",{"title":242,"path":243,"stem":244},"Button Group","/docs/theme/components/composables/button-group","docs/theme/components/02.composables/03.button-group",{"title":246,"path":247,"stem":248},"Callout","/docs/theme/components/composables/callout","docs/theme/components/02.composables/04.callout",{"title":250,"path":251,"stem":252},"Card","/docs/theme/components/composables/card","docs/theme/components/02.composables/05.card",{"title":254,"path":255,"stem":256},"Nav","/docs/theme/components/composables/nav","docs/theme/components/02.composables/06.nav",{"title":258,"path":259,"stem":260},"Modal","/docs/theme/components/composables/modal","docs/theme/components/02.composables/07.modal",{"title":262,"path":263,"stem":264},"Skeleton","/docs/theme/components/composables/skeleton","docs/theme/components/02.composables/08.skeleton",{"title":266,"path":267,"stem":268},"Tooltip","/docs/theme/components/composables/tooltip","docs/theme/components/02.composables/08.tooltip",{"title":270,"path":271,"stem":272},"Placeholder","/docs/theme/components/composables/placeholder","docs/theme/components/02.composables/09.placeholder",{"title":274,"path":275,"stem":276},"Progress","/docs/theme/components/composables/progress","docs/theme/components/02.composables/10.progress",{"title":278,"path":279,"stem":280},"Popover","/docs/theme/components/composables/popover","docs/theme/components/02.composables/11.popover",{"title":282,"path":283,"stem":284},"Chip","/docs/theme/components/composables/chip","docs/theme/components/02.composables/12.chip",{"title":286,"path":287,"stem":288},"Spinner","/docs/theme/components/composables/spinner","docs/theme/components/02.composables/13.spinner",{"title":102,"path":290,"stem":291,"children":292,"icon":7},"/docs/theme/utilities","docs/theme/utilities/00.index",[293,294,297],{"title":64,"path":290,"stem":291,"icon":65},{"title":156,"path":295,"stem":296,"icon":159},"/docs/theme/utilities/presets","docs/theme/utilities/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":298,"stem":299,"children":300,"page":7},"/docs/theme/utilities/composables","docs/theme/utilities/02.composables",[301,305,309,313,316,320,324,328,332,336,340,343,347,351,355,359],{"title":302,"path":303,"stem":304,"icon":7},"Accessibility","/docs/theme/utilities/composables/accessibility","docs/theme/utilities/02.composables/00.accessibility",{"title":306,"path":307,"stem":308,"icon":7},"Animations","/docs/theme/utilities/composables/animations","docs/theme/utilities/02.composables/01.animations",{"title":310,"path":311,"stem":312,"icon":7},"Backgrounds","/docs/theme/utilities/composables/backgrounds","docs/theme/utilities/02.composables/02.backgrounds",{"title":169,"path":314,"stem":315,"icon":7},"/docs/theme/utilities/composables/borders","docs/theme/utilities/02.composables/03.borders",{"title":317,"path":318,"stem":319,"icon":7},"Effects","/docs/theme/utilities/composables/effects","docs/theme/utilities/02.composables/04.effects",{"title":321,"path":322,"stem":323,"icon":7},"Filters","/docs/theme/utilities/composables/filters","docs/theme/utilities/02.composables/05.filters",{"title":325,"path":326,"stem":327,"icon":7},"Flexbox & Grid","/docs/theme/utilities/composables/flexbox-grid","docs/theme/utilities/02.composables/06.flexbox-grid",{"title":329,"path":330,"stem":331,"icon":7},"Interactivity","/docs/theme/utilities/composables/interactivity","docs/theme/utilities/02.composables/07.interactivity",{"title":333,"path":334,"stem":335,"icon":7},"Layout","/docs/theme/utilities/composables/layout","docs/theme/utilities/02.composables/08.layout",{"title":337,"path":338,"stem":339,"icon":7},"Sizing","/docs/theme/utilities/composables/sizing","docs/theme/utilities/02.composables/09.sizing",{"title":212,"path":341,"stem":342,"icon":7},"/docs/theme/utilities/composables/spacing","docs/theme/utilities/02.composables/10.spacing",{"title":344,"path":345,"stem":346,"icon":7},"SVG","/docs/theme/utilities/composables/svg","docs/theme/utilities/02.composables/11.svg",{"title":348,"path":349,"stem":350,"icon":7},"Tables","/docs/theme/utilities/composables/tables","docs/theme/utilities/02.composables/12.tables",{"title":352,"path":353,"stem":354,"icon":7},"Transforms","/docs/theme/utilities/composables/transforms","docs/theme/utilities/02.composables/13.transforms",{"title":356,"path":357,"stem":358,"icon":7},"Transitions","/docs/theme/utilities/composables/transitions","docs/theme/utilities/02.composables/14.transitions",{"title":216,"path":360,"stem":361,"icon":7},"/docs/theme/utilities/composables/typography","docs/theme/utilities/02.composables/15.typography",{"title":363,"path":364,"stem":365,"children":366,"icon":7},"Modifiers","/docs/theme/modifiers","docs/theme/modifiers/00.index",[367,368,371],{"title":64,"path":364,"stem":365,"icon":65},{"title":156,"path":369,"stem":370,"icon":159},"/docs/theme/modifiers/presets","docs/theme/modifiers/01.presets",{"title":132,"icon":135,"defaultOpen":7,"path":372,"stem":373,"children":374,"page":7},"/docs/theme/modifiers/composables","docs/theme/modifiers/02.composables",[375,379,383,387,391,395,399,403],{"title":376,"path":377,"stem":378,"icon":7},"ARIA State","/docs/theme/modifiers/composables/aria-state","docs/theme/modifiers/02.composables/00.aria-state",{"title":380,"path":381,"stem":382,"icon":7},"Directional","/docs/theme/modifiers/composables/directional","docs/theme/modifiers/02.composables/01.directional",{"title":384,"path":385,"stem":386,"icon":7},"Form State","/docs/theme/modifiers/composables/form-state","docs/theme/modifiers/02.composables/02.form-state",{"title":388,"path":389,"stem":390,"icon":7},"Media & Preferences","/docs/theme/modifiers/composables/media-preferences","docs/theme/modifiers/02.composables/03.media-preferences",{"title":392,"path":393,"stem":394,"icon":7},"Other State","/docs/theme/modifiers/composables/other-state","docs/theme/modifiers/02.composables/04.other-state",{"title":396,"path":397,"stem":398,"icon":7},"Pseudo-Elements","/docs/theme/modifiers/composables/pseudo-elements","docs/theme/modifiers/02.composables/05.pseudo-elements",{"title":400,"path":401,"stem":402,"icon":7},"Pseudo-State","/docs/theme/modifiers/composables/pseudo-state","docs/theme/modifiers/02.composables/06.pseudo-state",{"title":404,"path":405,"stem":406,"icon":7},"Structural","/docs/theme/modifiers/composables/structural","docs/theme/modifiers/02.composables/07.structural",{"id":408,"title":409,"body":410,"description":2312,"extension":2313,"links":2314,"meta":2315,"navigation":2316,"path":307,"seo":2317,"sitemap":2318,"stem":308,"__hash__":2319},"docs_theme/docs/theme/utilities/02.composables/01.animations.md","Animations Utilities",{"type":411,"value":412,"toc":2302},"minimark",[413,417,421,425,428,457,464,471,1776,1780,1785,2099,2102,2237,2241,2273,2277,2298],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"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.",[414,422,424],{"id":423},"why-use-animation-utilities","Why Use Animation Utilities?",[418,426,427],{},"Animation utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Create motion effects",": Build loading spinners, pulsing indicators, and bouncing elements",[432,440,441,444],{},[435,442,443],{},"Define reusable animations",": Register keyframe animations once and apply them as utility classes",[432,446,447,450],{},[435,448,449],{},"Maintain consistency",": Use the same animation patterns across your application",[432,452,453,456],{},[435,454,455],{},"Improve user experience",": Guide attention with purposeful motion",[414,458,460],{"id":459},"useanimationutility",[461,462,463],"code",{},"useAnimationUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useAnimationUtility()"," function creates utility classes for applying CSS animations.",[472,473,474,1160,1646],"tabs",{},[475,476,479],"tabs-item",{"icon":477,"label":478},"i-lucide-code","Code",[480,481,487],"pre",{"className":482,"code":483,"filename":484,"language":485,"meta":486,"style":486},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { styleframe } from \"styleframe\";\nimport { useAnimationUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { keyframes, css } = s;\n\n// 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","",[461,488,489,525,548,554,575,602,607,614,642,675,702,712,717,742,783,792,797,822,849,876,885,890,915,955,994,1003,1008,1020,1038,1064,1087,1110,1133,1142,1147],{"__ignoreMap":486},[490,491,494,498,502,506,509,512,515,519,522],"span",{"class":492,"line":493},"line",1,[490,495,497],{"class":496},"s7zQu","import",[490,499,501],{"class":500},"sMK4o"," {",[490,503,505],{"class":504},"sTEyZ"," styleframe",[490,507,508],{"class":500}," }",[490,510,511],{"class":496}," from",[490,513,514],{"class":500}," \"",[490,516,518],{"class":517},"sfazB","styleframe",[490,520,521],{"class":500},"\"",[490,523,524],{"class":500},";\n",[490,526,528,530,532,535,537,539,541,544,546],{"class":492,"line":527},2,[490,529,497],{"class":496},[490,531,501],{"class":500},[490,533,534],{"class":504}," useAnimationUtility",[490,536,508],{"class":500},[490,538,511],{"class":496},[490,540,514],{"class":500},[490,542,543],{"class":517},"@styleframe/theme",[490,545,521],{"class":500},[490,547,524],{"class":500},[490,549,551],{"class":492,"line":550},3,[490,552,553],{"emptyLinePlaceholder":206},"\n",[490,555,557,561,564,567,570,573],{"class":492,"line":556},4,[490,558,560],{"class":559},"spNyl","const",[490,562,563],{"class":504}," s ",[490,565,566],{"class":500},"=",[490,568,505],{"class":569},"s2Zo4",[490,571,572],{"class":504},"()",[490,574,524],{"class":500},[490,576,578,580,582,585,588,591,594,597,600],{"class":492,"line":577},5,[490,579,560],{"class":559},[490,581,501],{"class":500},[490,583,584],{"class":504}," keyframes",[490,586,587],{"class":500},",",[490,589,590],{"class":504}," css ",[490,592,593],{"class":500},"}",[490,595,596],{"class":500}," =",[490,598,599],{"class":504}," s",[490,601,524],{"class":500},[490,603,605],{"class":492,"line":604},6,[490,606,553],{"emptyLinePlaceholder":206},[490,608,610],{"class":492,"line":609},7,[490,611,613],{"class":612},"sHwdD","// Define keyframes\n",[490,615,617,619,622,624,626,629,632,635,637,639],{"class":492,"line":616},8,[490,618,560],{"class":559},[490,620,621],{"class":504}," spin ",[490,623,566],{"class":500},[490,625,584],{"class":569},[490,627,628],{"class":504},"(",[490,630,631],{"class":500},"'",[490,633,634],{"class":517},"spin",[490,636,631],{"class":500},[490,638,587],{"class":500},[490,640,641],{"class":500}," {\n",[490,643,645,648,652,654,657,659,662,664,667,670,672],{"class":492,"line":644},9,[490,646,647],{"class":500},"    '",[490,649,651],{"class":650},"swJcz","from",[490,653,631],{"class":500},[490,655,656],{"class":500},":",[490,658,501],{"class":500},[490,660,661],{"class":650}," transform",[490,663,656],{"class":500},[490,665,666],{"class":500}," '",[490,668,669],{"class":517},"rotate(0deg)",[490,671,631],{"class":500},[490,673,674],{"class":500}," },\n",[490,676,678,680,683,685,687,689,691,693,695,698,700],{"class":492,"line":677},10,[490,679,647],{"class":500},[490,681,682],{"class":650},"to",[490,684,631],{"class":500},[490,686,656],{"class":500},[490,688,501],{"class":500},[490,690,661],{"class":650},[490,692,656],{"class":500},[490,694,666],{"class":500},[490,696,697],{"class":517},"rotate(360deg)",[490,699,631],{"class":500},[490,701,674],{"class":500},[490,703,705,707,710],{"class":492,"line":704},11,[490,706,593],{"class":500},[490,708,709],{"class":504},")",[490,711,524],{"class":500},[490,713,715],{"class":492,"line":714},12,[490,716,553],{"emptyLinePlaceholder":206},[490,718,720,722,725,727,729,731,733,736,738,740],{"class":492,"line":719},13,[490,721,560],{"class":559},[490,723,724],{"class":504}," ping ",[490,726,566],{"class":500},[490,728,584],{"class":569},[490,730,628],{"class":504},[490,732,631],{"class":500},[490,734,735],{"class":517},"ping",[490,737,631],{"class":500},[490,739,587],{"class":500},[490,741,641],{"class":500},[490,743,745,747,750,752,754,756,758,760,762,765,767,769,772,774,776,779,781],{"class":492,"line":744},14,[490,746,647],{"class":500},[490,748,749],{"class":650},"75%, 100%",[490,751,631],{"class":500},[490,753,656],{"class":500},[490,755,501],{"class":500},[490,757,661],{"class":650},[490,759,656],{"class":500},[490,761,666],{"class":500},[490,763,764],{"class":517},"scale(2)",[490,766,631],{"class":500},[490,768,587],{"class":500},[490,770,771],{"class":650}," opacity",[490,773,656],{"class":500},[490,775,666],{"class":500},[490,777,778],{"class":517},"0",[490,780,631],{"class":500},[490,782,674],{"class":500},[490,784,786,788,790],{"class":492,"line":785},15,[490,787,593],{"class":500},[490,789,709],{"class":504},[490,791,524],{"class":500},[490,793,795],{"class":492,"line":794},16,[490,796,553],{"emptyLinePlaceholder":206},[490,798,800,802,805,807,809,811,813,816,818,820],{"class":492,"line":799},17,[490,801,560],{"class":559},[490,803,804],{"class":504}," pulse ",[490,806,566],{"class":500},[490,808,584],{"class":569},[490,810,628],{"class":504},[490,812,631],{"class":500},[490,814,815],{"class":517},"pulse",[490,817,631],{"class":500},[490,819,587],{"class":500},[490,821,641],{"class":500},[490,823,825,827,830,832,834,836,838,840,842,845,847],{"class":492,"line":824},18,[490,826,647],{"class":500},[490,828,829],{"class":650},"0%, 100%",[490,831,631],{"class":500},[490,833,656],{"class":500},[490,835,501],{"class":500},[490,837,771],{"class":650},[490,839,656],{"class":500},[490,841,666],{"class":500},[490,843,844],{"class":517},"1",[490,846,631],{"class":500},[490,848,674],{"class":500},[490,850,852,854,857,859,861,863,865,867,869,872,874],{"class":492,"line":851},19,[490,853,647],{"class":500},[490,855,856],{"class":650},"50%",[490,858,631],{"class":500},[490,860,656],{"class":500},[490,862,501],{"class":500},[490,864,771],{"class":650},[490,866,656],{"class":500},[490,868,666],{"class":500},[490,870,871],{"class":517},".5",[490,873,631],{"class":500},[490,875,674],{"class":500},[490,877,879,881,883],{"class":492,"line":878},20,[490,880,593],{"class":500},[490,882,709],{"class":504},[490,884,524],{"class":500},[490,886,888],{"class":492,"line":887},21,[490,889,553],{"emptyLinePlaceholder":206},[490,891,893,895,898,900,902,904,906,909,911,913],{"class":492,"line":892},22,[490,894,560],{"class":559},[490,896,897],{"class":504}," bounce ",[490,899,566],{"class":500},[490,901,584],{"class":569},[490,903,628],{"class":504},[490,905,631],{"class":500},[490,907,908],{"class":517},"bounce",[490,910,631],{"class":500},[490,912,587],{"class":500},[490,914,641],{"class":500},[490,916,918,920,922,924,926,928,930,932,934,937,939,941,944,946,948,951,953],{"class":492,"line":917},23,[490,919,647],{"class":500},[490,921,829],{"class":650},[490,923,631],{"class":500},[490,925,656],{"class":500},[490,927,501],{"class":500},[490,929,661],{"class":650},[490,931,656],{"class":500},[490,933,666],{"class":500},[490,935,936],{"class":517},"translateY(-25%)",[490,938,631],{"class":500},[490,940,587],{"class":500},[490,942,943],{"class":650}," animationTimingFunction",[490,945,656],{"class":500},[490,947,666],{"class":500},[490,949,950],{"class":517},"cubic-bezier(0.8, 0, 1, 1)",[490,952,631],{"class":500},[490,954,674],{"class":500},[490,956,958,960,962,964,966,968,970,972,974,977,979,981,983,985,987,990,992],{"class":492,"line":957},24,[490,959,647],{"class":500},[490,961,856],{"class":650},[490,963,631],{"class":500},[490,965,656],{"class":500},[490,967,501],{"class":500},[490,969,661],{"class":650},[490,971,656],{"class":500},[490,973,666],{"class":500},[490,975,976],{"class":517},"translateY(0)",[490,978,631],{"class":500},[490,980,587],{"class":500},[490,982,943],{"class":650},[490,984,656],{"class":500},[490,986,666],{"class":500},[490,988,989],{"class":517},"cubic-bezier(0, 0, 0.2, 1)",[490,991,631],{"class":500},[490,993,674],{"class":500},[490,995,997,999,1001],{"class":492,"line":996},25,[490,998,593],{"class":500},[490,1000,709],{"class":504},[490,1002,524],{"class":500},[490,1004,1006],{"class":492,"line":1005},26,[490,1007,553],{"emptyLinePlaceholder":206},[490,1009,1011,1013,1016,1018],{"class":492,"line":1010},27,[490,1012,463],{"class":569},[490,1014,1015],{"class":504},"(s",[490,1017,587],{"class":500},[490,1019,641],{"class":500},[490,1021,1023,1026,1028,1030,1033,1035],{"class":492,"line":1022},28,[490,1024,1025],{"class":650},"    none",[490,1027,656],{"class":500},[490,1029,666],{"class":500},[490,1031,1032],{"class":517},"none",[490,1034,631],{"class":500},[490,1036,1037],{"class":500},",\n",[490,1039,1041,1044,1046,1049,1052,1054,1056,1059,1062],{"class":492,"line":1040},29,[490,1042,1043],{"class":650},"    spin",[490,1045,656],{"class":500},[490,1047,1048],{"class":569}," css",[490,1050,1051],{"class":500},"`${",[490,1053,634],{"class":504},[490,1055,593],{"class":500},[490,1057,1058],{"class":517}," 1s linear infinite",[490,1060,1061],{"class":500},"`",[490,1063,1037],{"class":500},[490,1065,1067,1070,1072,1074,1076,1078,1080,1083,1085],{"class":492,"line":1066},30,[490,1068,1069],{"class":650},"    ping",[490,1071,656],{"class":500},[490,1073,1048],{"class":569},[490,1075,1051],{"class":500},[490,1077,735],{"class":504},[490,1079,593],{"class":500},[490,1081,1082],{"class":517}," 1s cubic-bezier(0, 0, 0.2, 1) infinite",[490,1084,1061],{"class":500},[490,1086,1037],{"class":500},[490,1088,1090,1093,1095,1097,1099,1101,1103,1106,1108],{"class":492,"line":1089},31,[490,1091,1092],{"class":650},"    pulse",[490,1094,656],{"class":500},[490,1096,1048],{"class":569},[490,1098,1051],{"class":500},[490,1100,815],{"class":504},[490,1102,593],{"class":500},[490,1104,1105],{"class":517}," 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",[490,1107,1061],{"class":500},[490,1109,1037],{"class":500},[490,1111,1113,1116,1118,1120,1122,1124,1126,1129,1131],{"class":492,"line":1112},32,[490,1114,1115],{"class":650},"    bounce",[490,1117,656],{"class":500},[490,1119,1048],{"class":569},[490,1121,1051],{"class":500},[490,1123,908],{"class":504},[490,1125,593],{"class":500},[490,1127,1128],{"class":517}," 1s infinite",[490,1130,1061],{"class":500},[490,1132,1037],{"class":500},[490,1134,1136,1138,1140],{"class":492,"line":1135},33,[490,1137,593],{"class":500},[490,1139,709],{"class":504},[490,1141,524],{"class":500},[490,1143,1145],{"class":492,"line":1144},34,[490,1146,553],{"emptyLinePlaceholder":206},[490,1148,1150,1153,1156,1158],{"class":492,"line":1149},35,[490,1151,1152],{"class":496},"export",[490,1154,1155],{"class":496}," default",[490,1157,599],{"class":504},[490,1159,524],{"class":500},[475,1161,1163],{"icon":140,"label":1162},"Output",[480,1164,1169],{"className":1165,"code":1166,"filename":1167,"language":1168,"meta":486,"style":486},"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/index.css","css",[461,1170,1171,1182,1210,1232,1237,1241,1250,1289,1293,1297,1306,1328,1346,1350,1354,1363,1416,1461,1465,1469,1496,1524,1571,1620],{"__ignoreMap":486},[490,1172,1173,1176,1180],{"class":492,"line":493},[490,1174,1175],{"class":496},"@keyframes",[490,1177,1179],{"class":1178},"sHdIc"," spin",[490,1181,641],{"class":500},[490,1183,1184,1188,1190,1193,1195,1198,1200,1204,1207],{"class":492,"line":527},[490,1185,1187],{"class":1186},"sBMFI","    from",[490,1189,501],{"class":500},[490,1191,661],{"class":1192},"sqsOY",[490,1194,656],{"class":500},[490,1196,1197],{"class":569}," rotate",[490,1199,628],{"class":500},[490,1201,1203],{"class":1202},"sbssI","0deg",[490,1205,1206],{"class":500},");",[490,1208,1209],{"class":500}," }\n",[490,1211,1212,1215,1217,1219,1221,1223,1225,1228,1230],{"class":492,"line":550},[490,1213,1214],{"class":1186},"    to",[490,1216,501],{"class":500},[490,1218,661],{"class":1192},[490,1220,656],{"class":500},[490,1222,1197],{"class":569},[490,1224,628],{"class":500},[490,1226,1227],{"class":1202},"360deg",[490,1229,1206],{"class":500},[490,1231,1209],{"class":500},[490,1233,1234],{"class":492,"line":556},[490,1235,1236],{"class":500},"}\n",[490,1238,1239],{"class":492,"line":577},[490,1240,553],{"emptyLinePlaceholder":206},[490,1242,1243,1245,1248],{"class":492,"line":604},[490,1244,1175],{"class":496},[490,1246,1247],{"class":1178}," ping",[490,1249,641],{"class":500},[490,1251,1252,1255,1258,1261,1263,1265,1267,1270,1272,1275,1277,1279,1281,1284,1287],{"class":492,"line":609},[490,1253,1254],{"class":1186},"    75%",[490,1256,1257],{"class":504},", ",[490,1259,1260],{"class":1186},"100%",[490,1262,501],{"class":500},[490,1264,661],{"class":1192},[490,1266,656],{"class":500},[490,1268,1269],{"class":569}," scale",[490,1271,628],{"class":500},[490,1273,1274],{"class":1202},"2",[490,1276,1206],{"class":500},[490,1278,771],{"class":1192},[490,1280,656],{"class":500},[490,1282,1283],{"class":1202}," 0",[490,1285,1286],{"class":500},";",[490,1288,1209],{"class":500},[490,1290,1291],{"class":492,"line":616},[490,1292,1236],{"class":500},[490,1294,1295],{"class":492,"line":644},[490,1296,553],{"emptyLinePlaceholder":206},[490,1298,1299,1301,1304],{"class":492,"line":677},[490,1300,1175],{"class":496},[490,1302,1303],{"class":1178}," pulse",[490,1305,641],{"class":500},[490,1307,1308,1311,1313,1315,1317,1319,1321,1324,1326],{"class":492,"line":704},[490,1309,1310],{"class":1186},"    0%",[490,1312,1257],{"class":504},[490,1314,1260],{"class":1186},[490,1316,501],{"class":500},[490,1318,771],{"class":1192},[490,1320,656],{"class":500},[490,1322,1323],{"class":1202}," 1",[490,1325,1286],{"class":500},[490,1327,1209],{"class":500},[490,1329,1330,1333,1335,1337,1339,1342,1344],{"class":492,"line":714},[490,1331,1332],{"class":1186},"    50%",[490,1334,501],{"class":500},[490,1336,771],{"class":1192},[490,1338,656],{"class":500},[490,1340,1341],{"class":1202}," .5",[490,1343,1286],{"class":500},[490,1345,1209],{"class":500},[490,1347,1348],{"class":492,"line":719},[490,1349,1236],{"class":500},[490,1351,1352],{"class":492,"line":744},[490,1353,553],{"emptyLinePlaceholder":206},[490,1355,1356,1358,1361],{"class":492,"line":785},[490,1357,1175],{"class":496},[490,1359,1360],{"class":1178}," bounce",[490,1362,641],{"class":500},[490,1364,1365,1367,1369,1371,1373,1375,1377,1380,1382,1385,1387,1390,1392,1395,1397,1400,1402,1404,1406,1408,1410,1412,1414],{"class":492,"line":794},[490,1366,1310],{"class":1186},[490,1368,1257],{"class":504},[490,1370,1260],{"class":1186},[490,1372,501],{"class":500},[490,1374,661],{"class":1192},[490,1376,656],{"class":500},[490,1378,1379],{"class":569}," translateY",[490,1381,628],{"class":500},[490,1383,1384],{"class":1202},"-25%",[490,1386,1206],{"class":500},[490,1388,1389],{"class":1192}," animation-timing-function",[490,1391,656],{"class":500},[490,1393,1394],{"class":569}," cubic-bezier",[490,1396,628],{"class":500},[490,1398,1399],{"class":1202},"0.8",[490,1401,587],{"class":500},[490,1403,1283],{"class":1202},[490,1405,587],{"class":500},[490,1407,1323],{"class":1202},[490,1409,587],{"class":500},[490,1411,1323],{"class":1202},[490,1413,1206],{"class":500},[490,1415,1209],{"class":500},[490,1417,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1453,1455,1457,1459],{"class":492,"line":799},[490,1419,1332],{"class":1186},[490,1421,501],{"class":500},[490,1423,661],{"class":1192},[490,1425,656],{"class":500},[490,1427,1379],{"class":569},[490,1429,628],{"class":500},[490,1431,778],{"class":1202},[490,1433,1206],{"class":500},[490,1435,1389],{"class":1192},[490,1437,656],{"class":500},[490,1439,1394],{"class":569},[490,1441,628],{"class":500},[490,1443,778],{"class":1202},[490,1445,587],{"class":500},[490,1447,1283],{"class":1202},[490,1449,587],{"class":500},[490,1451,1452],{"class":1202}," 0.2",[490,1454,587],{"class":500},[490,1456,1323],{"class":1202},[490,1458,1206],{"class":500},[490,1460,1209],{"class":500},[490,1462,1463],{"class":492,"line":824},[490,1464,1236],{"class":500},[490,1466,1467],{"class":492,"line":851},[490,1468,553],{"emptyLinePlaceholder":206},[490,1470,1471,1474,1477,1480,1482,1484,1487,1489,1492,1494],{"class":492,"line":878},[490,1472,1473],{"class":500},".",[490,1475,1476],{"class":1186},"_animation",[490,1478,1479],{"class":504},"\\:",[490,1481,1032],{"class":1186},[490,1483,501],{"class":500},[490,1485,1486],{"class":1192}," animation",[490,1488,656],{"class":500},[490,1490,1491],{"class":504}," none",[490,1493,1286],{"class":500},[490,1495,1209],{"class":500},[490,1497,1498,1500,1502,1504,1506,1508,1510,1512,1514,1517,1520,1522],{"class":492,"line":887},[490,1499,1473],{"class":500},[490,1501,1476],{"class":1186},[490,1503,1479],{"class":504},[490,1505,634],{"class":1186},[490,1507,501],{"class":500},[490,1509,1486],{"class":1192},[490,1511,656],{"class":500},[490,1513,621],{"class":504},[490,1515,1516],{"class":1202},"1s",[490,1518,1519],{"class":504}," linear infinite",[490,1521,1286],{"class":500},[490,1523,1209],{"class":500},[490,1525,1526,1528,1530,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1567,1569],{"class":492,"line":892},[490,1527,1473],{"class":500},[490,1529,1476],{"class":1186},[490,1531,1479],{"class":504},[490,1533,735],{"class":1186},[490,1535,501],{"class":500},[490,1537,1486],{"class":1192},[490,1539,656],{"class":500},[490,1541,724],{"class":504},[490,1543,1516],{"class":1202},[490,1545,1394],{"class":569},[490,1547,628],{"class":500},[490,1549,778],{"class":1202},[490,1551,587],{"class":500},[490,1553,1283],{"class":1202},[490,1555,587],{"class":500},[490,1557,1452],{"class":1202},[490,1559,587],{"class":500},[490,1561,1323],{"class":1202},[490,1563,709],{"class":500},[490,1565,1566],{"class":504}," infinite",[490,1568,1286],{"class":500},[490,1570,1209],{"class":500},[490,1572,1573,1575,1577,1579,1581,1583,1585,1587,1589,1592,1594,1596,1599,1601,1603,1605,1608,1610,1612,1614,1616,1618],{"class":492,"line":917},[490,1574,1473],{"class":500},[490,1576,1476],{"class":1186},[490,1578,1479],{"class":504},[490,1580,815],{"class":1186},[490,1582,501],{"class":500},[490,1584,1486],{"class":1192},[490,1586,656],{"class":500},[490,1588,804],{"class":504},[490,1590,1591],{"class":1202},"2s",[490,1593,1394],{"class":569},[490,1595,628],{"class":500},[490,1597,1598],{"class":1202},"0.4",[490,1600,587],{"class":500},[490,1602,1283],{"class":1202},[490,1604,587],{"class":500},[490,1606,1607],{"class":1202}," 0.6",[490,1609,587],{"class":500},[490,1611,1323],{"class":1202},[490,1613,709],{"class":500},[490,1615,1566],{"class":504},[490,1617,1286],{"class":500},[490,1619,1209],{"class":500},[490,1621,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644],{"class":492,"line":957},[490,1623,1473],{"class":500},[490,1625,1476],{"class":1186},[490,1627,1479],{"class":504},[490,1629,908],{"class":1186},[490,1631,501],{"class":500},[490,1633,1486],{"class":1192},[490,1635,656],{"class":500},[490,1637,897],{"class":504},[490,1639,1516],{"class":1202},[490,1641,1566],{"class":504},[490,1643,1286],{"class":500},[490,1645,1209],{"class":500},[475,1647,1650],{"icon":1648,"label":1649},"i-lucide-layout","Usage",[480,1651,1655],{"className":1652,"code":1653,"language":1654,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg class=\"_animation:spin\">\u003C!-- Loading spinner -->\u003C/svg>\n\u003Cspan class=\"_animation:ping\">\u003C!-- Notification dot -->\u003C/span>\n\u003Cdiv class=\"_animation:pulse\">\u003C!-- Skeleton loader -->\u003C/div>\n\u003Cdiv class=\"_animation:bounce\">\u003C!-- Bouncing element -->\u003C/div>\n","html",[461,1656,1657,1691,1719,1748],{"__ignoreMap":486},[490,1658,1659,1662,1665,1668,1670,1672,1675,1677,1680,1683,1686,1688],{"class":492,"line":493},[490,1660,1661],{"class":500},"\u003C",[490,1663,1664],{"class":650},"svg",[490,1666,1667],{"class":559}," class",[490,1669,566],{"class":500},[490,1671,521],{"class":500},[490,1673,1674],{"class":517},"_animation:spin",[490,1676,521],{"class":500},[490,1678,1679],{"class":500},">",[490,1681,1682],{"class":612},"\u003C!-- Loading spinner -->",[490,1684,1685],{"class":500},"\u003C/",[490,1687,1664],{"class":650},[490,1689,1690],{"class":500},">\n",[490,1692,1693,1695,1697,1699,1701,1703,1706,1708,1710,1713,1715,1717],{"class":492,"line":527},[490,1694,1661],{"class":500},[490,1696,490],{"class":650},[490,1698,1667],{"class":559},[490,1700,566],{"class":500},[490,1702,521],{"class":500},[490,1704,1705],{"class":517},"_animation:ping",[490,1707,521],{"class":500},[490,1709,1679],{"class":500},[490,1711,1712],{"class":612},"\u003C!-- Notification dot -->",[490,1714,1685],{"class":500},[490,1716,490],{"class":650},[490,1718,1690],{"class":500},[490,1720,1721,1723,1726,1728,1730,1732,1735,1737,1739,1742,1744,1746],{"class":492,"line":550},[490,1722,1661],{"class":500},[490,1724,1725],{"class":650},"div",[490,1727,1667],{"class":559},[490,1729,566],{"class":500},[490,1731,521],{"class":500},[490,1733,1734],{"class":517},"_animation:pulse",[490,1736,521],{"class":500},[490,1738,1679],{"class":500},[490,1740,1741],{"class":612},"\u003C!-- Skeleton loader -->",[490,1743,1685],{"class":500},[490,1745,1725],{"class":650},[490,1747,1690],{"class":500},[490,1749,1750,1752,1754,1756,1758,1760,1763,1765,1767,1770,1772,1774],{"class":492,"line":556},[490,1751,1661],{"class":500},[490,1753,1725],{"class":650},[490,1755,1667],{"class":559},[490,1757,566],{"class":500},[490,1759,521],{"class":500},[490,1761,1762],{"class":517},"_animation:bounce",[490,1764,521],{"class":500},[490,1766,1679],{"class":500},[490,1768,1769],{"class":612},"\u003C!-- Bouncing element -->",[490,1771,1685],{"class":500},[490,1773,1725],{"class":650},[490,1775,1690],{"class":500},[414,1777,1779],{"id":1778},"examples","Examples",[1781,1782,1784],"h3",{"id":1783},"loading-spinner","Loading Spinner",[472,1786,1787,2010],{},[475,1788,1789],{"icon":477,"label":478},[480,1790,1792],{"className":482,"code":1791,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useAnimationUtility } from \"@styleframe/theme\";\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",[461,1793,1794,1814,1834,1838,1852,1872,1876,1898,1922,1946,1954,1958,1968,1988,1996,2000],{"__ignoreMap":486},[490,1795,1796,1798,1800,1802,1804,1806,1808,1810,1812],{"class":492,"line":493},[490,1797,497],{"class":496},[490,1799,501],{"class":500},[490,1801,505],{"class":504},[490,1803,508],{"class":500},[490,1805,511],{"class":496},[490,1807,514],{"class":500},[490,1809,518],{"class":517},[490,1811,521],{"class":500},[490,1813,524],{"class":500},[490,1815,1816,1818,1820,1822,1824,1826,1828,1830,1832],{"class":492,"line":527},[490,1817,497],{"class":496},[490,1819,501],{"class":500},[490,1821,534],{"class":504},[490,1823,508],{"class":500},[490,1825,511],{"class":496},[490,1827,514],{"class":500},[490,1829,543],{"class":517},[490,1831,521],{"class":500},[490,1833,524],{"class":500},[490,1835,1836],{"class":492,"line":550},[490,1837,553],{"emptyLinePlaceholder":206},[490,1839,1840,1842,1844,1846,1848,1850],{"class":492,"line":556},[490,1841,560],{"class":559},[490,1843,563],{"class":504},[490,1845,566],{"class":500},[490,1847,505],{"class":569},[490,1849,572],{"class":504},[490,1851,524],{"class":500},[490,1853,1854,1856,1858,1860,1862,1864,1866,1868,1870],{"class":492,"line":577},[490,1855,560],{"class":559},[490,1857,501],{"class":500},[490,1859,584],{"class":504},[490,1861,587],{"class":500},[490,1863,590],{"class":504},[490,1865,593],{"class":500},[490,1867,596],{"class":500},[490,1869,599],{"class":504},[490,1871,524],{"class":500},[490,1873,1874],{"class":492,"line":604},[490,1875,553],{"emptyLinePlaceholder":206},[490,1877,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896],{"class":492,"line":609},[490,1879,560],{"class":559},[490,1881,621],{"class":504},[490,1883,566],{"class":500},[490,1885,584],{"class":569},[490,1887,628],{"class":504},[490,1889,631],{"class":500},[490,1891,634],{"class":517},[490,1893,631],{"class":500},[490,1895,587],{"class":500},[490,1897,641],{"class":500},[490,1899,1900,1902,1904,1906,1908,1910,1912,1914,1916,1918,1920],{"class":492,"line":616},[490,1901,647],{"class":500},[490,1903,651],{"class":650},[490,1905,631],{"class":500},[490,1907,656],{"class":500},[490,1909,501],{"class":500},[490,1911,661],{"class":650},[490,1913,656],{"class":500},[490,1915,666],{"class":500},[490,1917,669],{"class":517},[490,1919,631],{"class":500},[490,1921,674],{"class":500},[490,1923,1924,1926,1928,1930,1932,1934,1936,1938,1940,1942,1944],{"class":492,"line":644},[490,1925,647],{"class":500},[490,1927,682],{"class":650},[490,1929,631],{"class":500},[490,1931,656],{"class":500},[490,1933,501],{"class":500},[490,1935,661],{"class":650},[490,1937,656],{"class":500},[490,1939,666],{"class":500},[490,1941,697],{"class":517},[490,1943,631],{"class":500},[490,1945,674],{"class":500},[490,1947,1948,1950,1952],{"class":492,"line":677},[490,1949,593],{"class":500},[490,1951,709],{"class":504},[490,1953,524],{"class":500},[490,1955,1956],{"class":492,"line":704},[490,1957,553],{"emptyLinePlaceholder":206},[490,1959,1960,1962,1964,1966],{"class":492,"line":714},[490,1961,463],{"class":569},[490,1963,1015],{"class":504},[490,1965,587],{"class":500},[490,1967,641],{"class":500},[490,1969,1970,1972,1974,1976,1978,1980,1982,1984,1986],{"class":492,"line":719},[490,1971,1043],{"class":650},[490,1973,656],{"class":500},[490,1975,1048],{"class":569},[490,1977,1051],{"class":500},[490,1979,634],{"class":504},[490,1981,593],{"class":500},[490,1983,1058],{"class":517},[490,1985,1061],{"class":500},[490,1987,1037],{"class":500},[490,1989,1990,1992,1994],{"class":492,"line":744},[490,1991,593],{"class":500},[490,1993,709],{"class":504},[490,1995,524],{"class":500},[490,1997,1998],{"class":492,"line":785},[490,1999,553],{"emptyLinePlaceholder":206},[490,2001,2002,2004,2006,2008],{"class":492,"line":794},[490,2003,1152],{"class":496},[490,2005,1155],{"class":496},[490,2007,599],{"class":504},[490,2009,524],{"class":500},[475,2011,2012],{"icon":140,"label":1162},[480,2013,2015],{"className":1165,"code":2014,"filename":1167,"language":1168,"meta":486,"style":486},"@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n._animation\\:spin { animation: spin 1s linear infinite; }\n",[461,2016,2017,2025,2045,2065,2069,2073],{"__ignoreMap":486},[490,2018,2019,2021,2023],{"class":492,"line":493},[490,2020,1175],{"class":496},[490,2022,1179],{"class":1178},[490,2024,641],{"class":500},[490,2026,2027,2029,2031,2033,2035,2037,2039,2041,2043],{"class":492,"line":527},[490,2028,1187],{"class":1186},[490,2030,501],{"class":500},[490,2032,661],{"class":1192},[490,2034,656],{"class":500},[490,2036,1197],{"class":569},[490,2038,628],{"class":500},[490,2040,1203],{"class":1202},[490,2042,1206],{"class":500},[490,2044,1209],{"class":500},[490,2046,2047,2049,2051,2053,2055,2057,2059,2061,2063],{"class":492,"line":550},[490,2048,1214],{"class":1186},[490,2050,501],{"class":500},[490,2052,661],{"class":1192},[490,2054,656],{"class":500},[490,2056,1197],{"class":569},[490,2058,628],{"class":500},[490,2060,1227],{"class":1202},[490,2062,1206],{"class":500},[490,2064,1209],{"class":500},[490,2066,2067],{"class":492,"line":556},[490,2068,1236],{"class":500},[490,2070,2071],{"class":492,"line":577},[490,2072,553],{"emptyLinePlaceholder":206},[490,2074,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093,2095,2097],{"class":492,"line":604},[490,2076,1473],{"class":500},[490,2078,1476],{"class":1186},[490,2080,1479],{"class":504},[490,2082,634],{"class":1186},[490,2084,501],{"class":500},[490,2086,1486],{"class":1192},[490,2088,656],{"class":500},[490,2090,621],{"class":504},[490,2092,1516],{"class":1202},[490,2094,1519],{"class":504},[490,2096,1286],{"class":500},[490,2098,1209],{"class":500},[418,2100,2101],{},"Usage in HTML:",[480,2103,2105],{"className":1652,"code":2104,"language":1654,"meta":486,"style":486},"\u003Csvg class=\"_animation:spin\" width=\"24\" height=\"24\">\n    \u003Ccircle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\" fill=\"none\" />\n\u003C/svg>\n",[461,2106,2107,2148,2229],{"__ignoreMap":486},[490,2108,2109,2111,2113,2115,2117,2119,2121,2123,2126,2128,2130,2133,2135,2138,2140,2142,2144,2146],{"class":492,"line":493},[490,2110,1661],{"class":500},[490,2112,1664],{"class":650},[490,2114,1667],{"class":559},[490,2116,566],{"class":500},[490,2118,521],{"class":500},[490,2120,1674],{"class":517},[490,2122,521],{"class":500},[490,2124,2125],{"class":559}," width",[490,2127,566],{"class":500},[490,2129,521],{"class":500},[490,2131,2132],{"class":517},"24",[490,2134,521],{"class":500},[490,2136,2137],{"class":559}," height",[490,2139,566],{"class":500},[490,2141,521],{"class":500},[490,2143,2132],{"class":517},[490,2145,521],{"class":500},[490,2147,1690],{"class":500},[490,2149,2150,2153,2156,2159,2161,2163,2166,2168,2171,2173,2175,2177,2179,2182,2184,2186,2189,2191,2194,2196,2198,2201,2203,2206,2208,2210,2213,2215,2218,2220,2222,2224,2226],{"class":492,"line":527},[490,2151,2152],{"class":500},"    \u003C",[490,2154,2155],{"class":650},"circle",[490,2157,2158],{"class":559}," cx",[490,2160,566],{"class":500},[490,2162,521],{"class":500},[490,2164,2165],{"class":517},"12",[490,2167,521],{"class":500},[490,2169,2170],{"class":559}," cy",[490,2172,566],{"class":500},[490,2174,521],{"class":500},[490,2176,2165],{"class":517},[490,2178,521],{"class":500},[490,2180,2181],{"class":559}," r",[490,2183,566],{"class":500},[490,2185,521],{"class":500},[490,2187,2188],{"class":517},"10",[490,2190,521],{"class":500},[490,2192,2193],{"class":559}," stroke",[490,2195,566],{"class":500},[490,2197,521],{"class":500},[490,2199,2200],{"class":517},"currentColor",[490,2202,521],{"class":500},[490,2204,2205],{"class":559}," stroke-width",[490,2207,566],{"class":500},[490,2209,521],{"class":500},[490,2211,2212],{"class":517},"4",[490,2214,521],{"class":500},[490,2216,2217],{"class":559}," fill",[490,2219,566],{"class":500},[490,2221,521],{"class":500},[490,2223,1032],{"class":517},[490,2225,521],{"class":500},[490,2227,2228],{"class":500}," />\n",[490,2230,2231,2233,2235],{"class":492,"line":550},[490,2232,1685],{"class":500},[490,2234,1664],{"class":650},[490,2236,1690],{"class":500},[414,2238,2240],{"id":2239},"best-practices","Best Practices",[429,2242,2243,2249,2255,2261,2267],{},[432,2244,2245,2248],{},[435,2246,2247],{},"Use purposeful animation",": Animations should enhance UX, not distract",[432,2250,2251,2254],{},[435,2252,2253],{},"Respect reduced motion",": Consider users who prefer reduced motion",[432,2256,2257,2260],{},[435,2258,2259],{},"Avoid animating layout",": Prefer transform and opacity for performance",[432,2262,2263,2266],{},[435,2264,2265],{},"Be consistent",": Use the same animation patterns across similar interactions",[432,2268,2269,2272],{},[435,2270,2271],{},"Define keyframes alongside animations",": Keep keyframe definitions close to where they're used for maintainability",[414,2274,2276],{"id":2275},"faq","FAQ",[2278,2279,2280,2286],"accordion",{},[2281,2282,2285],"accordion-item",{"icon":2283,"label":2284},"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.",[2281,2287,2289,2290,2293,2294,2297],{"icon":2283,"label":2288},"How do I support users who prefer reduced motion?","Use the ",[461,2291,2292],{},"prefers-reduced-motion"," media query to disable or reduce animations. Consider creating a modifier that respects this preference, or set ",[461,2295,2296],{},"animation: none"," globally for these users.",[2299,2300,2301],"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":486,"searchDepth":527,"depth":527,"links":2303},[2304,2305,2306,2307,2310,2311],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":1778,"depth":527,"text":1779,"children":2308},[2309],{"id":1783,"depth":550,"text":1784},{"id":2239,"depth":527,"text":2240},{"id":2275,"depth":527,"text":2276},"Create animation utilities for continuous motion effects and keyframe-based animations with full type safety.","md",null,{},{"title":306,"icon":7},{"title":409,"description":2312},{"loc":307},"vx010NeFDv5rr4EYiGXMduXlHxe-ufBhaZEVWXWjDrY",[2321,2323],{"title":302,"path":303,"stem":304,"description":2322,"icon":7,"children":-1},"Create accessibility utilities for screen reader visibility and forced color adjustments with full type safety.",{"title":310,"path":311,"stem":312,"description":2324,"icon":7,"children":-1},"Create background utilities for colors, images, sizing, positioning, and more with full type safety.",1776621146781]