[{"data":1,"prerenderedAt":3238},["ShallowReactive",2],{"navigation_en":3,"-docs-theme-utilities-composables-transitions":407,"-docs-theme-utilities-composables-transitions-surround":3233},{"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":3225,"extension":3226,"links":3227,"meta":3228,"navigation":3229,"path":357,"seo":3230,"sitemap":3231,"stem":358,"__hash__":3232},"docs_theme/docs/theme/utilities/02.composables/14.transitions.md","Transitions Utilities",{"type":411,"value":412,"toc":3210},"minimark",[413,417,421,425,428,457,464,471,1419,1425,1439,1748,1769,1775,1781,2167,2172,2228,2234,2244,2540,2544,2548,3109,3112,3149,3153,3185,3189,3206],[414,415,64],"h2",{"id":416},"overview",[418,419,420],"p",{},"Transition utilities help you create smooth visual state changes. These utilities control which properties animate, how long transitions take, what easing functions to use, and how long to delay before starting.",[414,422,424],{"id":423},"why-use-transition-utilities","Why Use Transition Utilities?",[418,426,427],{},"Transition utilities help you:",[429,430,431,439,445,451],"ul",{},[432,433,434,438],"li",{},[435,436,437],"strong",{},"Create smooth interactions",": Add polish with animated hover and focus states",[432,440,441,444],{},[435,442,443],{},"Control timing",": Define consistent transition durations across your application",[432,446,447,450],{},[435,448,449],{},"Apply easing functions",": Use predefined timing functions for natural motion",[432,452,453,456],{},[435,454,455],{},"Improve user experience",": Guide attention with purposeful state changes",[414,458,460],{"id":459},"usetransitionpropertyutility",[461,462,463],"code",{},"useTransitionPropertyUtility",[418,465,466,467,470],{},"The ",[461,468,469],{},"useTransitionPropertyUtility()"," function creates utility classes for specifying which properties should animate.",[472,473,474,748,1318],"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 { useTransitionPropertyUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTransitionPropertyUtility(s, {\n    none: 'none',\n    all: 'all',\n    default: 'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',\n    colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',\n    opacity: 'opacity',\n    shadow: 'box-shadow',\n    transform: 'transform',\n});\n\nexport default s;\n","styleframe.config.ts","ts","",[461,488,489,525,548,554,575,580,594,616,633,650,667,684,701,718,729,734],{"__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}," useTransitionPropertyUtility",[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],{"class":492,"line":577},5,[490,579,553],{"emptyLinePlaceholder":206},[490,581,583,585,588,591],{"class":492,"line":582},6,[490,584,463],{"class":569},[490,586,587],{"class":504},"(s",[490,589,590],{"class":500},",",[490,592,593],{"class":500}," {\n",[490,595,597,601,604,607,610,613],{"class":492,"line":596},7,[490,598,600],{"class":599},"swJcz","    none",[490,602,603],{"class":500},":",[490,605,606],{"class":500}," '",[490,608,609],{"class":517},"none",[490,611,612],{"class":500},"'",[490,614,615],{"class":500},",\n",[490,617,619,622,624,626,629,631],{"class":492,"line":618},8,[490,620,621],{"class":599},"    all",[490,623,603],{"class":500},[490,625,606],{"class":500},[490,627,628],{"class":517},"all",[490,630,612],{"class":500},[490,632,615],{"class":500},[490,634,636,639,641,643,646,648],{"class":492,"line":635},9,[490,637,638],{"class":599},"    default",[490,640,603],{"class":500},[490,642,606],{"class":500},[490,644,645],{"class":517},"color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",[490,647,612],{"class":500},[490,649,615],{"class":500},[490,651,653,656,658,660,663,665],{"class":492,"line":652},10,[490,654,655],{"class":599},"    colors",[490,657,603],{"class":500},[490,659,606],{"class":500},[490,661,662],{"class":517},"color, background-color, border-color, text-decoration-color, fill, stroke",[490,664,612],{"class":500},[490,666,615],{"class":500},[490,668,670,673,675,677,680,682],{"class":492,"line":669},11,[490,671,672],{"class":599},"    opacity",[490,674,603],{"class":500},[490,676,606],{"class":500},[490,678,679],{"class":517},"opacity",[490,681,612],{"class":500},[490,683,615],{"class":500},[490,685,687,690,692,694,697,699],{"class":492,"line":686},12,[490,688,689],{"class":599},"    shadow",[490,691,603],{"class":500},[490,693,606],{"class":500},[490,695,696],{"class":517},"box-shadow",[490,698,612],{"class":500},[490,700,615],{"class":500},[490,702,704,707,709,711,714,716],{"class":492,"line":703},13,[490,705,706],{"class":599},"    transform",[490,708,603],{"class":500},[490,710,606],{"class":500},[490,712,713],{"class":517},"transform",[490,715,612],{"class":500},[490,717,615],{"class":500},[490,719,721,724,727],{"class":492,"line":720},14,[490,722,723],{"class":500},"}",[490,725,726],{"class":504},")",[490,728,524],{"class":500},[490,730,732],{"class":492,"line":731},15,[490,733,553],{"emptyLinePlaceholder":206},[490,735,737,740,743,746],{"class":492,"line":736},16,[490,738,739],{"class":496},"export",[490,741,742],{"class":496}," default",[490,744,745],{"class":504}," s",[490,747,524],{"class":500},[475,749,751],{"icon":140,"label":750},"Output",[480,752,757],{"className":753,"code":754,"filename":755,"language":756,"meta":486,"style":486},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","._transition\\:none {\n    transition-property: none;\n}\n\n._transition\\:all {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:colors {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:shadow {\n    transition-property: box-shadow;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition\\:transform {\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n","styleframe/index.css","css",[461,758,759,775,788,793,797,809,820,855,872,876,880,888,949,975,989,993,997,1011,1042,1069,1084,1089,1094,1107,1118,1145,1160,1165,1170,1184,1195,1222,1237,1242,1247,1260,1271,1298,1313],{"__ignoreMap":486},[490,760,761,764,768,771,773],{"class":492,"line":493},[490,762,763],{"class":500},".",[490,765,767],{"class":766},"sBMFI","_transition",[490,769,770],{"class":504},"\\:",[490,772,609],{"class":766},[490,774,593],{"class":500},[490,776,777,781,783,786],{"class":492,"line":527},[490,778,780],{"class":779},"sqsOY","    transition-property",[490,782,603],{"class":500},[490,784,785],{"class":504}," none",[490,787,524],{"class":500},[490,789,790],{"class":492,"line":550},[490,791,792],{"class":500},"}\n",[490,794,795],{"class":492,"line":556},[490,796,553],{"emptyLinePlaceholder":206},[490,798,799,801,803,805,807],{"class":492,"line":577},[490,800,763],{"class":500},[490,802,767],{"class":766},[490,804,770],{"class":504},[490,806,628],{"class":766},[490,808,593],{"class":500},[490,810,811,813,815,818],{"class":492,"line":582},[490,812,780],{"class":779},[490,814,603],{"class":500},[490,816,817],{"class":504}," all",[490,819,524],{"class":500},[490,821,822,825,827,830,833,837,839,842,844,847,849,852],{"class":492,"line":596},[490,823,824],{"class":779},"    transition-timing-function",[490,826,603],{"class":500},[490,828,829],{"class":569}," cubic-bezier",[490,831,832],{"class":500},"(",[490,834,836],{"class":835},"sbssI","0.4",[490,838,590],{"class":500},[490,840,841],{"class":835}," 0",[490,843,590],{"class":500},[490,845,846],{"class":835}," 0.2",[490,848,590],{"class":500},[490,850,851],{"class":835}," 1",[490,853,854],{"class":500},");\n",[490,856,857,860,862,865,867,870],{"class":492,"line":618},[490,858,859],{"class":779},"    transition-duration",[490,861,603],{"class":500},[490,863,864],{"class":569}," var",[490,866,832],{"class":500},[490,868,869],{"class":504},"--duration--fast",[490,871,854],{"class":500},[490,873,874],{"class":492,"line":635},[490,875,792],{"class":500},[490,877,878],{"class":492,"line":652},[490,879,553],{"emptyLinePlaceholder":206},[490,881,882,884,886],{"class":492,"line":669},[490,883,763],{"class":500},[490,885,767],{"class":766},[490,887,593],{"class":500},[490,889,890,892,894,897,899,902,904,907,909,912,914,917,919,922,924,927,929,932,934,937,939,942,944,947],{"class":492,"line":686},[490,891,780],{"class":779},[490,893,603],{"class":500},[490,895,896],{"class":504}," color",[490,898,590],{"class":500},[490,900,901],{"class":504}," background-color",[490,903,590],{"class":500},[490,905,906],{"class":504}," border-color",[490,908,590],{"class":500},[490,910,911],{"class":504}," text-decoration-color",[490,913,590],{"class":500},[490,915,916],{"class":504}," fill",[490,918,590],{"class":500},[490,920,921],{"class":504}," stroke",[490,923,590],{"class":500},[490,925,926],{"class":504}," opacity",[490,928,590],{"class":500},[490,930,931],{"class":504}," box-shadow",[490,933,590],{"class":500},[490,935,936],{"class":504}," transform",[490,938,590],{"class":500},[490,940,941],{"class":504}," filter",[490,943,590],{"class":500},[490,945,946],{"class":504}," backdrop-filter",[490,948,524],{"class":500},[490,950,951,953,955,957,959,961,963,965,967,969,971,973],{"class":492,"line":703},[490,952,824],{"class":779},[490,954,603],{"class":500},[490,956,829],{"class":569},[490,958,832],{"class":500},[490,960,836],{"class":835},[490,962,590],{"class":500},[490,964,841],{"class":835},[490,966,590],{"class":500},[490,968,846],{"class":835},[490,970,590],{"class":500},[490,972,851],{"class":835},[490,974,854],{"class":500},[490,976,977,979,981,983,985,987],{"class":492,"line":720},[490,978,859],{"class":779},[490,980,603],{"class":500},[490,982,864],{"class":569},[490,984,832],{"class":500},[490,986,869],{"class":504},[490,988,854],{"class":500},[490,990,991],{"class":492,"line":731},[490,992,792],{"class":500},[490,994,995],{"class":492,"line":736},[490,996,553],{"emptyLinePlaceholder":206},[490,998,1000,1002,1004,1006,1009],{"class":492,"line":999},17,[490,1001,763],{"class":500},[490,1003,767],{"class":766},[490,1005,770],{"class":504},[490,1007,1008],{"class":766},"colors",[490,1010,593],{"class":500},[490,1012,1014,1016,1018,1020,1022,1024,1026,1028,1030,1032,1034,1036,1038,1040],{"class":492,"line":1013},18,[490,1015,780],{"class":779},[490,1017,603],{"class":500},[490,1019,896],{"class":504},[490,1021,590],{"class":500},[490,1023,901],{"class":504},[490,1025,590],{"class":500},[490,1027,906],{"class":504},[490,1029,590],{"class":500},[490,1031,911],{"class":504},[490,1033,590],{"class":500},[490,1035,916],{"class":504},[490,1037,590],{"class":500},[490,1039,921],{"class":504},[490,1041,524],{"class":500},[490,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063,1065,1067],{"class":492,"line":1044},19,[490,1046,824],{"class":779},[490,1048,603],{"class":500},[490,1050,829],{"class":569},[490,1052,832],{"class":500},[490,1054,836],{"class":835},[490,1056,590],{"class":500},[490,1058,841],{"class":835},[490,1060,590],{"class":500},[490,1062,846],{"class":835},[490,1064,590],{"class":500},[490,1066,851],{"class":835},[490,1068,854],{"class":500},[490,1070,1072,1074,1076,1078,1080,1082],{"class":492,"line":1071},20,[490,1073,859],{"class":779},[490,1075,603],{"class":500},[490,1077,864],{"class":569},[490,1079,832],{"class":500},[490,1081,869],{"class":504},[490,1083,854],{"class":500},[490,1085,1087],{"class":492,"line":1086},21,[490,1088,792],{"class":500},[490,1090,1092],{"class":492,"line":1091},22,[490,1093,553],{"emptyLinePlaceholder":206},[490,1095,1097,1099,1101,1103,1105],{"class":492,"line":1096},23,[490,1098,763],{"class":500},[490,1100,767],{"class":766},[490,1102,770],{"class":504},[490,1104,679],{"class":766},[490,1106,593],{"class":500},[490,1108,1110,1112,1114,1116],{"class":492,"line":1109},24,[490,1111,780],{"class":779},[490,1113,603],{"class":500},[490,1115,926],{"class":504},[490,1117,524],{"class":500},[490,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143],{"class":492,"line":1120},25,[490,1122,824],{"class":779},[490,1124,603],{"class":500},[490,1126,829],{"class":569},[490,1128,832],{"class":500},[490,1130,836],{"class":835},[490,1132,590],{"class":500},[490,1134,841],{"class":835},[490,1136,590],{"class":500},[490,1138,846],{"class":835},[490,1140,590],{"class":500},[490,1142,851],{"class":835},[490,1144,854],{"class":500},[490,1146,1148,1150,1152,1154,1156,1158],{"class":492,"line":1147},26,[490,1149,859],{"class":779},[490,1151,603],{"class":500},[490,1153,864],{"class":569},[490,1155,832],{"class":500},[490,1157,869],{"class":504},[490,1159,854],{"class":500},[490,1161,1163],{"class":492,"line":1162},27,[490,1164,792],{"class":500},[490,1166,1168],{"class":492,"line":1167},28,[490,1169,553],{"emptyLinePlaceholder":206},[490,1171,1173,1175,1177,1179,1182],{"class":492,"line":1172},29,[490,1174,763],{"class":500},[490,1176,767],{"class":766},[490,1178,770],{"class":504},[490,1180,1181],{"class":766},"shadow",[490,1183,593],{"class":500},[490,1185,1187,1189,1191,1193],{"class":492,"line":1186},30,[490,1188,780],{"class":779},[490,1190,603],{"class":500},[490,1192,931],{"class":504},[490,1194,524],{"class":500},[490,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220],{"class":492,"line":1197},31,[490,1199,824],{"class":779},[490,1201,603],{"class":500},[490,1203,829],{"class":569},[490,1205,832],{"class":500},[490,1207,836],{"class":835},[490,1209,590],{"class":500},[490,1211,841],{"class":835},[490,1213,590],{"class":500},[490,1215,846],{"class":835},[490,1217,590],{"class":500},[490,1219,851],{"class":835},[490,1221,854],{"class":500},[490,1223,1225,1227,1229,1231,1233,1235],{"class":492,"line":1224},32,[490,1226,859],{"class":779},[490,1228,603],{"class":500},[490,1230,864],{"class":569},[490,1232,832],{"class":500},[490,1234,869],{"class":504},[490,1236,854],{"class":500},[490,1238,1240],{"class":492,"line":1239},33,[490,1241,792],{"class":500},[490,1243,1245],{"class":492,"line":1244},34,[490,1246,553],{"emptyLinePlaceholder":206},[490,1248,1250,1252,1254,1256,1258],{"class":492,"line":1249},35,[490,1251,763],{"class":500},[490,1253,767],{"class":766},[490,1255,770],{"class":504},[490,1257,713],{"class":766},[490,1259,593],{"class":500},[490,1261,1263,1265,1267,1269],{"class":492,"line":1262},36,[490,1264,780],{"class":779},[490,1266,603],{"class":500},[490,1268,936],{"class":504},[490,1270,524],{"class":500},[490,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296],{"class":492,"line":1273},37,[490,1275,824],{"class":779},[490,1277,603],{"class":500},[490,1279,829],{"class":569},[490,1281,832],{"class":500},[490,1283,836],{"class":835},[490,1285,590],{"class":500},[490,1287,841],{"class":835},[490,1289,590],{"class":500},[490,1291,846],{"class":835},[490,1293,590],{"class":500},[490,1295,851],{"class":835},[490,1297,854],{"class":500},[490,1299,1301,1303,1305,1307,1309,1311],{"class":492,"line":1300},38,[490,1302,859],{"class":779},[490,1304,603],{"class":500},[490,1306,864],{"class":569},[490,1308,832],{"class":500},[490,1310,869],{"class":504},[490,1312,854],{"class":500},[490,1314,1316],{"class":492,"line":1315},39,[490,1317,792],{"class":500},[475,1319,1322],{"icon":1320,"label":1321},"i-lucide-layout","Usage",[480,1323,1327],{"className":1324,"code":1325,"language":1326,"meta":486,"style":486},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton class=\"_transition:colors\">Animated color changes\u003C/button>\n\u003Cdiv class=\"_transition:transform\">Animated transform\u003C/div>\n\u003Cdiv class=\"_transition\">All common properties animate\u003C/div>\n","html",[461,1328,1329,1363,1392],{"__ignoreMap":486},[490,1330,1331,1334,1337,1340,1342,1344,1347,1349,1352,1355,1358,1360],{"class":492,"line":493},[490,1332,1333],{"class":500},"\u003C",[490,1335,1336],{"class":599},"button",[490,1338,1339],{"class":559}," class",[490,1341,566],{"class":500},[490,1343,521],{"class":500},[490,1345,1346],{"class":517},"_transition:colors",[490,1348,521],{"class":500},[490,1350,1351],{"class":500},">",[490,1353,1354],{"class":504},"Animated color changes",[490,1356,1357],{"class":500},"\u003C/",[490,1359,1336],{"class":599},[490,1361,1362],{"class":500},">\n",[490,1364,1365,1367,1370,1372,1374,1376,1379,1381,1383,1386,1388,1390],{"class":492,"line":527},[490,1366,1333],{"class":500},[490,1368,1369],{"class":599},"div",[490,1371,1339],{"class":559},[490,1373,566],{"class":500},[490,1375,521],{"class":500},[490,1377,1378],{"class":517},"_transition:transform",[490,1380,521],{"class":500},[490,1382,1351],{"class":500},[490,1384,1385],{"class":504},"Animated transform",[490,1387,1357],{"class":500},[490,1389,1369],{"class":599},[490,1391,1362],{"class":500},[490,1393,1394,1396,1398,1400,1402,1404,1406,1408,1410,1413,1415,1417],{"class":492,"line":550},[490,1395,1333],{"class":500},[490,1397,1369],{"class":599},[490,1399,1339],{"class":559},[490,1401,566],{"class":500},[490,1403,521],{"class":500},[490,1405,767],{"class":517},[490,1407,521],{"class":500},[490,1409,1351],{"class":500},[490,1411,1412],{"class":504},"All common properties animate",[490,1414,1357],{"class":500},[490,1416,1369],{"class":599},[490,1418,1362],{"class":500},[414,1420,1422],{"id":1421},"usetransitiondurationutility",[461,1423,1424],{},"useTransitionDurationUtility",[418,1426,466,1427,1430,1431,1434,1435,1438],{},[461,1428,1429],{},"useTransitionDurationUtility()"," function creates utility classes for setting transition duration. It uses the ",[461,1432,1433],{},"duration"," namespace, so you can reference duration design tokens with the ",[461,1436,1437],{},"@"," prefix.",[472,1440,1441,1591,1685],{},[475,1442,1443],{"icon":477,"label":478},[480,1444,1446],{"className":482,"code":1445,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTransitionDurationUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTransitionDurationUtility(s, {\n    fast: '@fast',\n    normal: '@normal',\n    slow: '@slow',\n});\n\nexport default s;\n",[461,1447,1448,1468,1489,1493,1507,1511,1521,1537,1553,1569,1577,1581],{"__ignoreMap":486},[490,1449,1450,1452,1454,1456,1458,1460,1462,1464,1466],{"class":492,"line":493},[490,1451,497],{"class":496},[490,1453,501],{"class":500},[490,1455,505],{"class":504},[490,1457,508],{"class":500},[490,1459,511],{"class":496},[490,1461,514],{"class":500},[490,1463,518],{"class":517},[490,1465,521],{"class":500},[490,1467,524],{"class":500},[490,1469,1470,1472,1474,1477,1479,1481,1483,1485,1487],{"class":492,"line":527},[490,1471,497],{"class":496},[490,1473,501],{"class":500},[490,1475,1476],{"class":504}," useTransitionDurationUtility",[490,1478,508],{"class":500},[490,1480,511],{"class":496},[490,1482,514],{"class":500},[490,1484,543],{"class":517},[490,1486,521],{"class":500},[490,1488,524],{"class":500},[490,1490,1491],{"class":492,"line":550},[490,1492,553],{"emptyLinePlaceholder":206},[490,1494,1495,1497,1499,1501,1503,1505],{"class":492,"line":556},[490,1496,560],{"class":559},[490,1498,563],{"class":504},[490,1500,566],{"class":500},[490,1502,505],{"class":569},[490,1504,572],{"class":504},[490,1506,524],{"class":500},[490,1508,1509],{"class":492,"line":577},[490,1510,553],{"emptyLinePlaceholder":206},[490,1512,1513,1515,1517,1519],{"class":492,"line":582},[490,1514,1424],{"class":569},[490,1516,587],{"class":504},[490,1518,590],{"class":500},[490,1520,593],{"class":500},[490,1522,1523,1526,1528,1530,1533,1535],{"class":492,"line":596},[490,1524,1525],{"class":599},"    fast",[490,1527,603],{"class":500},[490,1529,606],{"class":500},[490,1531,1532],{"class":517},"@fast",[490,1534,612],{"class":500},[490,1536,615],{"class":500},[490,1538,1539,1542,1544,1546,1549,1551],{"class":492,"line":618},[490,1540,1541],{"class":599},"    normal",[490,1543,603],{"class":500},[490,1545,606],{"class":500},[490,1547,1548],{"class":517},"@normal",[490,1550,612],{"class":500},[490,1552,615],{"class":500},[490,1554,1555,1558,1560,1562,1565,1567],{"class":492,"line":635},[490,1556,1557],{"class":599},"    slow",[490,1559,603],{"class":500},[490,1561,606],{"class":500},[490,1563,1564],{"class":517},"@slow",[490,1566,612],{"class":500},[490,1568,615],{"class":500},[490,1570,1571,1573,1575],{"class":492,"line":652},[490,1572,723],{"class":500},[490,1574,726],{"class":504},[490,1576,524],{"class":500},[490,1578,1579],{"class":492,"line":669},[490,1580,553],{"emptyLinePlaceholder":206},[490,1582,1583,1585,1587,1589],{"class":492,"line":686},[490,1584,739],{"class":496},[490,1586,742],{"class":496},[490,1588,745],{"class":504},[490,1590,524],{"class":500},[475,1592,1593],{"icon":140,"label":750},[480,1594,1596],{"className":753,"code":1595,"filename":755,"language":756,"meta":486,"style":486},"._transition-duration\\:fast { transition-duration: var(--duration--fast); }\n._transition-duration\\:normal { transition-duration: var(--duration--normal); }\n._transition-duration\\:slow { transition-duration: var(--duration--slow); }\n",[461,1597,1598,1629,1657],{"__ignoreMap":486},[490,1599,1600,1602,1605,1607,1610,1612,1615,1617,1619,1621,1623,1626],{"class":492,"line":493},[490,1601,763],{"class":500},[490,1603,1604],{"class":766},"_transition-duration",[490,1606,770],{"class":504},[490,1608,1609],{"class":766},"fast",[490,1611,501],{"class":500},[490,1613,1614],{"class":779}," transition-duration",[490,1616,603],{"class":500},[490,1618,864],{"class":569},[490,1620,832],{"class":500},[490,1622,869],{"class":504},[490,1624,1625],{"class":500},");",[490,1627,1628],{"class":500}," }\n",[490,1630,1631,1633,1635,1637,1640,1642,1644,1646,1648,1650,1653,1655],{"class":492,"line":527},[490,1632,763],{"class":500},[490,1634,1604],{"class":766},[490,1636,770],{"class":504},[490,1638,1639],{"class":766},"normal",[490,1641,501],{"class":500},[490,1643,1614],{"class":779},[490,1645,603],{"class":500},[490,1647,864],{"class":569},[490,1649,832],{"class":500},[490,1651,1652],{"class":504},"--duration--normal",[490,1654,1625],{"class":500},[490,1656,1628],{"class":500},[490,1658,1659,1661,1663,1665,1668,1670,1672,1674,1676,1678,1681,1683],{"class":492,"line":550},[490,1660,763],{"class":500},[490,1662,1604],{"class":766},[490,1664,770],{"class":504},[490,1666,1667],{"class":766},"slow",[490,1669,501],{"class":500},[490,1671,1614],{"class":779},[490,1673,603],{"class":500},[490,1675,864],{"class":569},[490,1677,832],{"class":500},[490,1679,1680],{"class":504},"--duration--slow",[490,1682,1625],{"class":500},[490,1684,1628],{"class":500},[475,1686,1687],{"icon":1320,"label":1321},[480,1688,1690],{"className":1324,"code":1689,"language":1326,"meta":486,"style":486},"\u003Cbutton class=\"_transition:colors _transition-duration:fast\">Fast transition\u003C/button>\n\u003Cdiv class=\"_transition:opacity _transition-duration:slow\">Slower fade\u003C/div>\n",[461,1691,1692,1720],{"__ignoreMap":486},[490,1693,1694,1696,1698,1700,1702,1704,1707,1709,1711,1714,1716,1718],{"class":492,"line":493},[490,1695,1333],{"class":500},[490,1697,1336],{"class":599},[490,1699,1339],{"class":559},[490,1701,566],{"class":500},[490,1703,521],{"class":500},[490,1705,1706],{"class":517},"_transition:colors _transition-duration:fast",[490,1708,521],{"class":500},[490,1710,1351],{"class":500},[490,1712,1713],{"class":504},"Fast transition",[490,1715,1357],{"class":500},[490,1717,1336],{"class":599},[490,1719,1362],{"class":500},[490,1721,1722,1724,1726,1728,1730,1732,1735,1737,1739,1742,1744,1746],{"class":492,"line":527},[490,1723,1333],{"class":500},[490,1725,1369],{"class":599},[490,1727,1339],{"class":559},[490,1729,566],{"class":500},[490,1731,521],{"class":500},[490,1733,1734],{"class":517},"_transition:opacity _transition-duration:slow",[490,1736,521],{"class":500},[490,1738,1351],{"class":500},[490,1740,1741],{"class":504},"Slower fade",[490,1743,1357],{"class":500},[490,1745,1369],{"class":599},[490,1747,1362],{"class":500},[1749,1750,1751,1754,1755,1757,1758,1760,1761,1764,1765,1768],"tip",{},[435,1752,1753],{},"Pro tip:"," The ",[461,1756,1433],{}," namespace means ",[461,1759,1532],{}," automatically resolves to ",[461,1762,1763],{},"var(--duration--fast)",". You can also pass explicit values like ",[461,1766,1767],{},"'200ms'"," for one-off durations.",[414,1770,1772],{"id":1771},"usetransitiontimingfunctionutility",[461,1773,1774],{},"useTransitionTimingFunctionUtility",[418,1776,466,1777,1780],{},[461,1778,1779],{},"useTransitionTimingFunctionUtility()"," function creates utility classes for setting easing functions.",[472,1782,1783,1954,2104],{},[475,1784,1785],{"icon":477,"label":478},[480,1786,1788],{"className":482,"code":1787,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTransitionTimingFunctionUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTransitionTimingFunctionUtility(s, {\n    linear: 'linear',\n    in: 'cubic-bezier(0.4, 0, 1, 1)',\n    out: 'cubic-bezier(0, 0, 0.2, 1)',\n    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',\n});\n\nexport default s;\n",[461,1789,1790,1810,1831,1835,1849,1853,1863,1879,1895,1911,1932,1940,1944],{"__ignoreMap":486},[490,1791,1792,1794,1796,1798,1800,1802,1804,1806,1808],{"class":492,"line":493},[490,1793,497],{"class":496},[490,1795,501],{"class":500},[490,1797,505],{"class":504},[490,1799,508],{"class":500},[490,1801,511],{"class":496},[490,1803,514],{"class":500},[490,1805,518],{"class":517},[490,1807,521],{"class":500},[490,1809,524],{"class":500},[490,1811,1812,1814,1816,1819,1821,1823,1825,1827,1829],{"class":492,"line":527},[490,1813,497],{"class":496},[490,1815,501],{"class":500},[490,1817,1818],{"class":504}," useTransitionTimingFunctionUtility",[490,1820,508],{"class":500},[490,1822,511],{"class":496},[490,1824,514],{"class":500},[490,1826,543],{"class":517},[490,1828,521],{"class":500},[490,1830,524],{"class":500},[490,1832,1833],{"class":492,"line":550},[490,1834,553],{"emptyLinePlaceholder":206},[490,1836,1837,1839,1841,1843,1845,1847],{"class":492,"line":556},[490,1838,560],{"class":559},[490,1840,563],{"class":504},[490,1842,566],{"class":500},[490,1844,505],{"class":569},[490,1846,572],{"class":504},[490,1848,524],{"class":500},[490,1850,1851],{"class":492,"line":577},[490,1852,553],{"emptyLinePlaceholder":206},[490,1854,1855,1857,1859,1861],{"class":492,"line":582},[490,1856,1774],{"class":569},[490,1858,587],{"class":504},[490,1860,590],{"class":500},[490,1862,593],{"class":500},[490,1864,1865,1868,1870,1872,1875,1877],{"class":492,"line":596},[490,1866,1867],{"class":599},"    linear",[490,1869,603],{"class":500},[490,1871,606],{"class":500},[490,1873,1874],{"class":517},"linear",[490,1876,612],{"class":500},[490,1878,615],{"class":500},[490,1880,1881,1884,1886,1888,1891,1893],{"class":492,"line":618},[490,1882,1883],{"class":599},"    in",[490,1885,603],{"class":500},[490,1887,606],{"class":500},[490,1889,1890],{"class":517},"cubic-bezier(0.4, 0, 1, 1)",[490,1892,612],{"class":500},[490,1894,615],{"class":500},[490,1896,1897,1900,1902,1904,1907,1909],{"class":492,"line":635},[490,1898,1899],{"class":599},"    out",[490,1901,603],{"class":500},[490,1903,606],{"class":500},[490,1905,1906],{"class":517},"cubic-bezier(0, 0, 0.2, 1)",[490,1908,612],{"class":500},[490,1910,615],{"class":500},[490,1912,1913,1916,1919,1921,1923,1925,1928,1930],{"class":492,"line":652},[490,1914,1915],{"class":500},"    '",[490,1917,1918],{"class":599},"in-out",[490,1920,612],{"class":500},[490,1922,603],{"class":500},[490,1924,606],{"class":500},[490,1926,1927],{"class":517},"cubic-bezier(0.4, 0, 0.2, 1)",[490,1929,612],{"class":500},[490,1931,615],{"class":500},[490,1933,1934,1936,1938],{"class":492,"line":669},[490,1935,723],{"class":500},[490,1937,726],{"class":504},[490,1939,524],{"class":500},[490,1941,1942],{"class":492,"line":686},[490,1943,553],{"emptyLinePlaceholder":206},[490,1945,1946,1948,1950,1952],{"class":492,"line":703},[490,1947,739],{"class":496},[490,1949,742],{"class":496},[490,1951,745],{"class":504},[490,1953,524],{"class":500},[475,1955,1956],{"icon":140,"label":750},[480,1957,1959],{"className":753,"code":1958,"filename":755,"language":756,"meta":486,"style":486},"._transition-timing\\:linear { transition-timing-function: linear; }\n._transition-timing\\:in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }\n._transition-timing\\:out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }\n._transition-timing\\:in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }\n",[461,1960,1961,1987,2026,2066],{"__ignoreMap":486},[490,1962,1963,1965,1968,1970,1972,1974,1977,1979,1982,1985],{"class":492,"line":493},[490,1964,763],{"class":500},[490,1966,1967],{"class":766},"_transition-timing",[490,1969,770],{"class":504},[490,1971,1874],{"class":766},[490,1973,501],{"class":500},[490,1975,1976],{"class":779}," transition-timing-function",[490,1978,603],{"class":500},[490,1980,1981],{"class":504}," linear",[490,1983,1984],{"class":500},";",[490,1986,1628],{"class":500},[490,1988,1989,1991,1993,1995,1998,2000,2002,2004,2006,2008,2010,2012,2014,2016,2018,2020,2022,2024],{"class":492,"line":527},[490,1990,763],{"class":500},[490,1992,1967],{"class":766},[490,1994,770],{"class":504},[490,1996,1997],{"class":766},"in",[490,1999,501],{"class":500},[490,2001,1976],{"class":779},[490,2003,603],{"class":500},[490,2005,829],{"class":569},[490,2007,832],{"class":500},[490,2009,836],{"class":835},[490,2011,590],{"class":500},[490,2013,841],{"class":835},[490,2015,590],{"class":500},[490,2017,851],{"class":835},[490,2019,590],{"class":500},[490,2021,851],{"class":835},[490,2023,1625],{"class":500},[490,2025,1628],{"class":500},[490,2027,2028,2030,2032,2034,2037,2039,2041,2043,2045,2047,2050,2052,2054,2056,2058,2060,2062,2064],{"class":492,"line":550},[490,2029,763],{"class":500},[490,2031,1967],{"class":766},[490,2033,770],{"class":504},[490,2035,2036],{"class":766},"out",[490,2038,501],{"class":500},[490,2040,1976],{"class":779},[490,2042,603],{"class":500},[490,2044,829],{"class":569},[490,2046,832],{"class":500},[490,2048,2049],{"class":835},"0",[490,2051,590],{"class":500},[490,2053,841],{"class":835},[490,2055,590],{"class":500},[490,2057,846],{"class":835},[490,2059,590],{"class":500},[490,2061,851],{"class":835},[490,2063,1625],{"class":500},[490,2065,1628],{"class":500},[490,2067,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2100,2102],{"class":492,"line":556},[490,2069,763],{"class":500},[490,2071,1967],{"class":766},[490,2073,770],{"class":504},[490,2075,1918],{"class":766},[490,2077,501],{"class":500},[490,2079,1976],{"class":779},[490,2081,603],{"class":500},[490,2083,829],{"class":569},[490,2085,832],{"class":500},[490,2087,836],{"class":835},[490,2089,590],{"class":500},[490,2091,841],{"class":835},[490,2093,590],{"class":500},[490,2095,846],{"class":835},[490,2097,590],{"class":500},[490,2099,851],{"class":835},[490,2101,1625],{"class":500},[490,2103,1628],{"class":500},[475,2105,2106],{"icon":1320,"label":1321},[480,2107,2109],{"className":1324,"code":2108,"language":1326,"meta":486,"style":486},"\u003Cdiv class=\"_transition:transform _transition-timing:out\">Ease out\u003C/div>\n\u003Cdiv class=\"_transition:opacity _transition-timing:in-out\">Smooth in and out\u003C/div>\n",[461,2110,2111,2139],{"__ignoreMap":486},[490,2112,2113,2115,2117,2119,2121,2123,2126,2128,2130,2133,2135,2137],{"class":492,"line":493},[490,2114,1333],{"class":500},[490,2116,1369],{"class":599},[490,2118,1339],{"class":559},[490,2120,566],{"class":500},[490,2122,521],{"class":500},[490,2124,2125],{"class":517},"_transition:transform _transition-timing:out",[490,2127,521],{"class":500},[490,2129,1351],{"class":500},[490,2131,2132],{"class":504},"Ease out",[490,2134,1357],{"class":500},[490,2136,1369],{"class":599},[490,2138,1362],{"class":500},[490,2140,2141,2143,2145,2147,2149,2151,2154,2156,2158,2161,2163,2165],{"class":492,"line":527},[490,2142,1333],{"class":500},[490,2144,1369],{"class":599},[490,2146,1339],{"class":559},[490,2148,566],{"class":500},[490,2150,521],{"class":500},[490,2152,2153],{"class":517},"_transition:opacity _transition-timing:in-out",[490,2155,521],{"class":500},[490,2157,1351],{"class":500},[490,2159,2160],{"class":504},"Smooth in and out",[490,2162,1357],{"class":500},[490,2164,1369],{"class":599},[490,2166,1362],{"class":500},[2168,2169,2171],"h3",{"id":2170},"easing-functions","Easing Functions",[2173,2174,2175,2188],"table",{},[2176,2177,2178],"thead",{},[2179,2180,2181,2185],"tr",{},[2182,2183,2184],"th",{},"Value",[2182,2186,2187],{},"Description",[2189,2190,2191,2201,2210,2219],"tbody",{},[2179,2192,2193,2198],{},[2194,2195,2196],"td",{},[461,2197,1874],{},[2194,2199,2200],{},"Constant speed throughout",[2179,2202,2203,2207],{},[2194,2204,2205],{},[461,2206,1997],{},[2194,2208,2209],{},"Starts slow, accelerates (ease-in)",[2179,2211,2212,2216],{},[2194,2213,2214],{},[461,2215,2036],{},[2194,2217,2218],{},"Starts fast, decelerates (ease-out)",[2179,2220,2221,2225],{},[2194,2222,2223],{},[461,2224,1918],{},[2194,2226,2227],{},"Slow start and end (ease-in-out)",[414,2229,2231],{"id":2230},"usetransitiondelayutility",[461,2232,2233],{},"useTransitionDelayUtility",[418,2235,466,2236,2239,2240,1434,2242,1438],{},[461,2237,2238],{},"useTransitionDelayUtility()"," function creates utility classes for delaying transitions. It uses the ",[461,2241,1433],{},[461,2243,1437],{},[472,2245,2246,2390,2477],{},[475,2247,2248],{"icon":477,"label":478},[480,2249,2251],{"className":482,"code":2250,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTransitionDelayUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\n\nuseTransitionDelayUtility(s, {\n    fast: '@fast',\n    normal: '@normal',\n    slow: '@slow',\n});\n\nexport default s;\n",[461,2252,2253,2273,2294,2298,2312,2316,2326,2340,2354,2368,2376,2380],{"__ignoreMap":486},[490,2254,2255,2257,2259,2261,2263,2265,2267,2269,2271],{"class":492,"line":493},[490,2256,497],{"class":496},[490,2258,501],{"class":500},[490,2260,505],{"class":504},[490,2262,508],{"class":500},[490,2264,511],{"class":496},[490,2266,514],{"class":500},[490,2268,518],{"class":517},[490,2270,521],{"class":500},[490,2272,524],{"class":500},[490,2274,2275,2277,2279,2282,2284,2286,2288,2290,2292],{"class":492,"line":527},[490,2276,497],{"class":496},[490,2278,501],{"class":500},[490,2280,2281],{"class":504}," useTransitionDelayUtility",[490,2283,508],{"class":500},[490,2285,511],{"class":496},[490,2287,514],{"class":500},[490,2289,543],{"class":517},[490,2291,521],{"class":500},[490,2293,524],{"class":500},[490,2295,2296],{"class":492,"line":550},[490,2297,553],{"emptyLinePlaceholder":206},[490,2299,2300,2302,2304,2306,2308,2310],{"class":492,"line":556},[490,2301,560],{"class":559},[490,2303,563],{"class":504},[490,2305,566],{"class":500},[490,2307,505],{"class":569},[490,2309,572],{"class":504},[490,2311,524],{"class":500},[490,2313,2314],{"class":492,"line":577},[490,2315,553],{"emptyLinePlaceholder":206},[490,2317,2318,2320,2322,2324],{"class":492,"line":582},[490,2319,2233],{"class":569},[490,2321,587],{"class":504},[490,2323,590],{"class":500},[490,2325,593],{"class":500},[490,2327,2328,2330,2332,2334,2336,2338],{"class":492,"line":596},[490,2329,1525],{"class":599},[490,2331,603],{"class":500},[490,2333,606],{"class":500},[490,2335,1532],{"class":517},[490,2337,612],{"class":500},[490,2339,615],{"class":500},[490,2341,2342,2344,2346,2348,2350,2352],{"class":492,"line":618},[490,2343,1541],{"class":599},[490,2345,603],{"class":500},[490,2347,606],{"class":500},[490,2349,1548],{"class":517},[490,2351,612],{"class":500},[490,2353,615],{"class":500},[490,2355,2356,2358,2360,2362,2364,2366],{"class":492,"line":635},[490,2357,1557],{"class":599},[490,2359,603],{"class":500},[490,2361,606],{"class":500},[490,2363,1564],{"class":517},[490,2365,612],{"class":500},[490,2367,615],{"class":500},[490,2369,2370,2372,2374],{"class":492,"line":652},[490,2371,723],{"class":500},[490,2373,726],{"class":504},[490,2375,524],{"class":500},[490,2377,2378],{"class":492,"line":669},[490,2379,553],{"emptyLinePlaceholder":206},[490,2381,2382,2384,2386,2388],{"class":492,"line":686},[490,2383,739],{"class":496},[490,2385,742],{"class":496},[490,2387,745],{"class":504},[490,2389,524],{"class":500},[475,2391,2392],{"icon":140,"label":750},[480,2393,2395],{"className":753,"code":2394,"filename":755,"language":756,"meta":486,"style":486},"._transition-delay\\:fast { transition-delay: var(--duration--fast); }\n._transition-delay\\:normal { transition-delay: var(--duration--normal); }\n._transition-delay\\:slow { transition-delay: var(--duration--slow); }\n",[461,2396,2397,2425,2451],{"__ignoreMap":486},[490,2398,2399,2401,2404,2406,2408,2410,2413,2415,2417,2419,2421,2423],{"class":492,"line":493},[490,2400,763],{"class":500},[490,2402,2403],{"class":766},"_transition-delay",[490,2405,770],{"class":504},[490,2407,1609],{"class":766},[490,2409,501],{"class":500},[490,2411,2412],{"class":779}," transition-delay",[490,2414,603],{"class":500},[490,2416,864],{"class":569},[490,2418,832],{"class":500},[490,2420,869],{"class":504},[490,2422,1625],{"class":500},[490,2424,1628],{"class":500},[490,2426,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449],{"class":492,"line":527},[490,2428,763],{"class":500},[490,2430,2403],{"class":766},[490,2432,770],{"class":504},[490,2434,1639],{"class":766},[490,2436,501],{"class":500},[490,2438,2412],{"class":779},[490,2440,603],{"class":500},[490,2442,864],{"class":569},[490,2444,832],{"class":500},[490,2446,1652],{"class":504},[490,2448,1625],{"class":500},[490,2450,1628],{"class":500},[490,2452,2453,2455,2457,2459,2461,2463,2465,2467,2469,2471,2473,2475],{"class":492,"line":550},[490,2454,763],{"class":500},[490,2456,2403],{"class":766},[490,2458,770],{"class":504},[490,2460,1667],{"class":766},[490,2462,501],{"class":500},[490,2464,2412],{"class":779},[490,2466,603],{"class":500},[490,2468,864],{"class":569},[490,2470,832],{"class":500},[490,2472,1680],{"class":504},[490,2474,1625],{"class":500},[490,2476,1628],{"class":500},[475,2478,2479],{"icon":1320,"label":1321},[480,2480,2482],{"className":1324,"code":2481,"language":1326,"meta":486,"style":486},"\u003Cdiv class=\"_transition:colors _transition-delay:fast\">Delayed color transition\u003C/div>\n\u003Cdiv class=\"_transition:transform _transition-delay:slow\">Delayed transform\u003C/div>\n",[461,2483,2484,2512],{"__ignoreMap":486},[490,2485,2486,2488,2490,2492,2494,2496,2499,2501,2503,2506,2508,2510],{"class":492,"line":493},[490,2487,1333],{"class":500},[490,2489,1369],{"class":599},[490,2491,1339],{"class":559},[490,2493,566],{"class":500},[490,2495,521],{"class":500},[490,2497,2498],{"class":517},"_transition:colors _transition-delay:fast",[490,2500,521],{"class":500},[490,2502,1351],{"class":500},[490,2504,2505],{"class":504},"Delayed color transition",[490,2507,1357],{"class":500},[490,2509,1369],{"class":599},[490,2511,1362],{"class":500},[490,2513,2514,2516,2518,2520,2522,2524,2527,2529,2531,2534,2536,2538],{"class":492,"line":527},[490,2515,1333],{"class":500},[490,2517,1369],{"class":599},[490,2519,1339],{"class":559},[490,2521,566],{"class":500},[490,2523,521],{"class":500},[490,2525,2526],{"class":517},"_transition:transform _transition-delay:slow",[490,2528,521],{"class":500},[490,2530,1351],{"class":500},[490,2532,2533],{"class":504},"Delayed transform",[490,2535,1357],{"class":500},[490,2537,1369],{"class":599},[490,2539,1362],{"class":500},[414,2541,2543],{"id":2542},"examples","Examples",[2168,2545,2547],{"id":2546},"hover-transition","Hover Transition",[472,2549,2550,2909],{},[475,2551,2552],{"icon":477,"label":478},[480,2553,2555],{"className":482,"code":2554,"filename":484,"language":485,"meta":486,"style":486},"import { styleframe } from \"styleframe\";\nimport { useTransitionPropertyUtility, useTransitionDurationUtility } from \"@styleframe/theme\";\nimport { useBackgroundColorUtility } from \"@styleframe/theme\";\n\nconst s = styleframe();\nconst { modifier } = s;\n\nconst hover = modifier('hover', ({ declarations }) => ({\n    '&:hover': declarations,\n}));\n\nuseTransitionPropertyUtility(s, {\n    colors: 'color, background-color, border-color',\n});\n\nuseTransitionDurationUtility(s, {\n    '200': '200ms',\n});\n\nuseBackgroundColorUtility(s, {\n    gray: '#f3f4f6',\n    primary: '#006cff',\n});\n\nuseBackgroundColorUtility(s, { primary: '#006cff' }, [hover]);\n\nexport default s;\n",[461,2556,2557,2577,2601,2622,2626,2640,2658,2662,2704,2719,2728,2732,2742,2757,2765,2769,2779,2799,2807,2811,2822,2838,2854,2862,2866,2895,2899],{"__ignoreMap":486},[490,2558,2559,2561,2563,2565,2567,2569,2571,2573,2575],{"class":492,"line":493},[490,2560,497],{"class":496},[490,2562,501],{"class":500},[490,2564,505],{"class":504},[490,2566,508],{"class":500},[490,2568,511],{"class":496},[490,2570,514],{"class":500},[490,2572,518],{"class":517},[490,2574,521],{"class":500},[490,2576,524],{"class":500},[490,2578,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599],{"class":492,"line":527},[490,2580,497],{"class":496},[490,2582,501],{"class":500},[490,2584,534],{"class":504},[490,2586,590],{"class":500},[490,2588,1476],{"class":504},[490,2590,508],{"class":500},[490,2592,511],{"class":496},[490,2594,514],{"class":500},[490,2596,543],{"class":517},[490,2598,521],{"class":500},[490,2600,524],{"class":500},[490,2602,2603,2605,2607,2610,2612,2614,2616,2618,2620],{"class":492,"line":550},[490,2604,497],{"class":496},[490,2606,501],{"class":500},[490,2608,2609],{"class":504}," useBackgroundColorUtility",[490,2611,508],{"class":500},[490,2613,511],{"class":496},[490,2615,514],{"class":500},[490,2617,543],{"class":517},[490,2619,521],{"class":500},[490,2621,524],{"class":500},[490,2623,2624],{"class":492,"line":556},[490,2625,553],{"emptyLinePlaceholder":206},[490,2627,2628,2630,2632,2634,2636,2638],{"class":492,"line":577},[490,2629,560],{"class":559},[490,2631,563],{"class":504},[490,2633,566],{"class":500},[490,2635,505],{"class":569},[490,2637,572],{"class":504},[490,2639,524],{"class":500},[490,2641,2642,2644,2646,2649,2651,2654,2656],{"class":492,"line":582},[490,2643,560],{"class":559},[490,2645,501],{"class":500},[490,2647,2648],{"class":504}," modifier ",[490,2650,723],{"class":500},[490,2652,2653],{"class":500}," =",[490,2655,745],{"class":504},[490,2657,524],{"class":500},[490,2659,2660],{"class":492,"line":596},[490,2661,553],{"emptyLinePlaceholder":206},[490,2663,2664,2666,2669,2671,2674,2676,2678,2681,2683,2685,2688,2692,2695,2698,2701],{"class":492,"line":618},[490,2665,560],{"class":559},[490,2667,2668],{"class":504}," hover ",[490,2670,566],{"class":500},[490,2672,2673],{"class":569}," modifier",[490,2675,832],{"class":504},[490,2677,612],{"class":500},[490,2679,2680],{"class":517},"hover",[490,2682,612],{"class":500},[490,2684,590],{"class":500},[490,2686,2687],{"class":500}," ({",[490,2689,2691],{"class":2690},"sHdIc"," declarations",[490,2693,2694],{"class":500}," })",[490,2696,2697],{"class":559}," =>",[490,2699,2700],{"class":504}," (",[490,2702,2703],{"class":500},"{\n",[490,2705,2706,2708,2711,2713,2715,2717],{"class":492,"line":635},[490,2707,1915],{"class":500},[490,2709,2710],{"class":599},"&:hover",[490,2712,612],{"class":500},[490,2714,603],{"class":500},[490,2716,2691],{"class":504},[490,2718,615],{"class":500},[490,2720,2721,2723,2726],{"class":492,"line":652},[490,2722,723],{"class":500},[490,2724,2725],{"class":504},"))",[490,2727,524],{"class":500},[490,2729,2730],{"class":492,"line":669},[490,2731,553],{"emptyLinePlaceholder":206},[490,2733,2734,2736,2738,2740],{"class":492,"line":686},[490,2735,463],{"class":569},[490,2737,587],{"class":504},[490,2739,590],{"class":500},[490,2741,593],{"class":500},[490,2743,2744,2746,2748,2750,2753,2755],{"class":492,"line":703},[490,2745,655],{"class":599},[490,2747,603],{"class":500},[490,2749,606],{"class":500},[490,2751,2752],{"class":517},"color, background-color, border-color",[490,2754,612],{"class":500},[490,2756,615],{"class":500},[490,2758,2759,2761,2763],{"class":492,"line":720},[490,2760,723],{"class":500},[490,2762,726],{"class":504},[490,2764,524],{"class":500},[490,2766,2767],{"class":492,"line":731},[490,2768,553],{"emptyLinePlaceholder":206},[490,2770,2771,2773,2775,2777],{"class":492,"line":736},[490,2772,1424],{"class":569},[490,2774,587],{"class":504},[490,2776,590],{"class":500},[490,2778,593],{"class":500},[490,2780,2781,2783,2786,2788,2790,2792,2795,2797],{"class":492,"line":999},[490,2782,1915],{"class":500},[490,2784,2785],{"class":599},"200",[490,2787,612],{"class":500},[490,2789,603],{"class":500},[490,2791,606],{"class":500},[490,2793,2794],{"class":517},"200ms",[490,2796,612],{"class":500},[490,2798,615],{"class":500},[490,2800,2801,2803,2805],{"class":492,"line":1013},[490,2802,723],{"class":500},[490,2804,726],{"class":504},[490,2806,524],{"class":500},[490,2808,2809],{"class":492,"line":1044},[490,2810,553],{"emptyLinePlaceholder":206},[490,2812,2813,2816,2818,2820],{"class":492,"line":1071},[490,2814,2815],{"class":569},"useBackgroundColorUtility",[490,2817,587],{"class":504},[490,2819,590],{"class":500},[490,2821,593],{"class":500},[490,2823,2824,2827,2829,2831,2834,2836],{"class":492,"line":1086},[490,2825,2826],{"class":599},"    gray",[490,2828,603],{"class":500},[490,2830,606],{"class":500},[490,2832,2833],{"class":517},"#f3f4f6",[490,2835,612],{"class":500},[490,2837,615],{"class":500},[490,2839,2840,2843,2845,2847,2850,2852],{"class":492,"line":1091},[490,2841,2842],{"class":599},"    primary",[490,2844,603],{"class":500},[490,2846,606],{"class":500},[490,2848,2849],{"class":517},"#006cff",[490,2851,612],{"class":500},[490,2853,615],{"class":500},[490,2855,2856,2858,2860],{"class":492,"line":1096},[490,2857,723],{"class":500},[490,2859,726],{"class":504},[490,2861,524],{"class":500},[490,2863,2864],{"class":492,"line":1109},[490,2865,553],{"emptyLinePlaceholder":206},[490,2867,2868,2870,2872,2874,2876,2879,2881,2883,2885,2887,2890,2893],{"class":492,"line":1120},[490,2869,2815],{"class":569},[490,2871,587],{"class":504},[490,2873,590],{"class":500},[490,2875,501],{"class":500},[490,2877,2878],{"class":599}," primary",[490,2880,603],{"class":500},[490,2882,606],{"class":500},[490,2884,2849],{"class":517},[490,2886,612],{"class":500},[490,2888,2889],{"class":500}," },",[490,2891,2892],{"class":504}," [hover])",[490,2894,524],{"class":500},[490,2896,2897],{"class":492,"line":1147},[490,2898,553],{"emptyLinePlaceholder":206},[490,2900,2901,2903,2905,2907],{"class":492,"line":1162},[490,2902,739],{"class":496},[490,2904,742],{"class":496},[490,2906,745],{"class":504},[490,2908,524],{"class":500},[475,2910,2911],{"icon":140,"label":750},[480,2912,2914],{"className":753,"code":2913,"filename":755,"language":756,"meta":486,"style":486},"._transition\\:colors {\n    transition-property: color, background-color, border-color;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: var(--duration--fast);\n}\n\n._transition-duration\\:200 { transition-duration: 200ms; }\n\n._bg\\:gray { background-color: #f3f4f6; }\n._bg\\:primary { background-color: #006cff; }\n._hover\\:bg\\:primary:hover { background-color: #006cff; }\n",[461,2915,2916,2928,2946,2972,2986,2990,2994,3017,3021,3049,3075],{"__ignoreMap":486},[490,2917,2918,2920,2922,2924,2926],{"class":492,"line":493},[490,2919,763],{"class":500},[490,2921,767],{"class":766},[490,2923,770],{"class":504},[490,2925,1008],{"class":766},[490,2927,593],{"class":500},[490,2929,2930,2932,2934,2936,2938,2940,2942,2944],{"class":492,"line":527},[490,2931,780],{"class":779},[490,2933,603],{"class":500},[490,2935,896],{"class":504},[490,2937,590],{"class":500},[490,2939,901],{"class":504},[490,2941,590],{"class":500},[490,2943,906],{"class":504},[490,2945,524],{"class":500},[490,2947,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970],{"class":492,"line":550},[490,2949,824],{"class":779},[490,2951,603],{"class":500},[490,2953,829],{"class":569},[490,2955,832],{"class":500},[490,2957,836],{"class":835},[490,2959,590],{"class":500},[490,2961,841],{"class":835},[490,2963,590],{"class":500},[490,2965,846],{"class":835},[490,2967,590],{"class":500},[490,2969,851],{"class":835},[490,2971,854],{"class":500},[490,2973,2974,2976,2978,2980,2982,2984],{"class":492,"line":556},[490,2975,859],{"class":779},[490,2977,603],{"class":500},[490,2979,864],{"class":569},[490,2981,832],{"class":500},[490,2983,869],{"class":504},[490,2985,854],{"class":500},[490,2987,2988],{"class":492,"line":577},[490,2989,792],{"class":500},[490,2991,2992],{"class":492,"line":582},[490,2993,553],{"emptyLinePlaceholder":206},[490,2995,2996,2998,3000,3002,3004,3006,3008,3010,3013,3015],{"class":492,"line":596},[490,2997,763],{"class":500},[490,2999,1604],{"class":766},[490,3001,770],{"class":504},[490,3003,2785],{"class":766},[490,3005,501],{"class":500},[490,3007,1614],{"class":779},[490,3009,603],{"class":500},[490,3011,3012],{"class":835}," 200ms",[490,3014,1984],{"class":500},[490,3016,1628],{"class":500},[490,3018,3019],{"class":492,"line":618},[490,3020,553],{"emptyLinePlaceholder":206},[490,3022,3023,3025,3028,3030,3033,3035,3037,3039,3042,3045,3047],{"class":492,"line":635},[490,3024,763],{"class":500},[490,3026,3027],{"class":766},"_bg",[490,3029,770],{"class":504},[490,3031,3032],{"class":766},"gray",[490,3034,501],{"class":500},[490,3036,901],{"class":779},[490,3038,603],{"class":500},[490,3040,3041],{"class":500}," #",[490,3043,3044],{"class":504},"f3f4f6",[490,3046,1984],{"class":500},[490,3048,1628],{"class":500},[490,3050,3051,3053,3055,3057,3060,3062,3064,3066,3068,3071,3073],{"class":492,"line":652},[490,3052,763],{"class":500},[490,3054,3027],{"class":766},[490,3056,770],{"class":504},[490,3058,3059],{"class":766},"primary",[490,3061,501],{"class":500},[490,3063,901],{"class":779},[490,3065,603],{"class":500},[490,3067,3041],{"class":500},[490,3069,3070],{"class":504},"006cff",[490,3072,1984],{"class":500},[490,3074,1628],{"class":500},[490,3076,3077,3079,3082,3084,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105,3107],{"class":492,"line":669},[490,3078,763],{"class":500},[490,3080,3081],{"class":766},"_hover",[490,3083,770],{"class":504},[490,3085,3086],{"class":766},"bg",[490,3088,770],{"class":504},[490,3090,3059],{"class":766},[490,3092,603],{"class":500},[490,3094,2680],{"class":559},[490,3096,501],{"class":500},[490,3098,901],{"class":779},[490,3100,603],{"class":500},[490,3102,3041],{"class":500},[490,3104,3070],{"class":504},[490,3106,1984],{"class":500},[490,3108,1628],{"class":500},[418,3110,3111],{},"Usage in HTML:",[480,3113,3115],{"className":1324,"code":3114,"language":1326,"meta":486,"style":486},"\u003Cbutton class=\"_bg:gray _hover:bg:primary _transition:colors _transition-duration:200\">\n    Hover me\n\u003C/button>\n",[461,3116,3117,3136,3141],{"__ignoreMap":486},[490,3118,3119,3121,3123,3125,3127,3129,3132,3134],{"class":492,"line":493},[490,3120,1333],{"class":500},[490,3122,1336],{"class":599},[490,3124,1339],{"class":559},[490,3126,566],{"class":500},[490,3128,521],{"class":500},[490,3130,3131],{"class":517},"_bg:gray _hover:bg:primary _transition:colors _transition-duration:200",[490,3133,521],{"class":500},[490,3135,1362],{"class":500},[490,3137,3138],{"class":492,"line":527},[490,3139,3140],{"class":504},"    Hover me\n",[490,3142,3143,3145,3147],{"class":492,"line":550},[490,3144,1357],{"class":500},[490,3146,1336],{"class":599},[490,3148,1362],{"class":500},[414,3150,3152],{"id":3151},"best-practices","Best Practices",[429,3154,3155,3161,3167,3173,3179],{},[432,3156,3157,3160],{},[435,3158,3159],{},"Keep durations short",": Most UI transitions should be 150-300ms",[432,3162,3163,3166],{},[435,3164,3165],{},"Use appropriate easing",": Ease-out for entering, ease-in for leaving",[432,3168,3169,3172],{},[435,3170,3171],{},"Avoid animating layout",": Prefer transform and opacity for performance",[432,3174,3175,3178],{},[435,3176,3177],{},"Be consistent",": Use the same timing across similar interactions",[432,3180,3181,3184],{},[435,3182,3183],{},"Respect reduced motion",": Consider users who prefer reduced motion",[414,3186,3188],{"id":3187},"faq","FAQ",[3190,3191,3192,3198,3202],"accordion",{},[3193,3194,3197],"accordion-item",{"icon":3195,"label":3196},"i-lucide-circle-help","What's the best duration for hover effects?","For hover effects, 150-200ms is typically ideal. Fast enough to feel responsive, slow enough to be smooth. Longer durations (300ms+) can make the UI feel sluggish.",[3193,3199,3201],{"icon":3195,"label":3200},"When should I use transitions vs animations?","Use transitions for state changes (hover, focus, active). Use animations for continuous or complex motion (loading spinners, attention-grabbing effects). Transitions are simpler and triggered by state; animations can run independently.",[3193,3203,3205],{"icon":3195,"label":3204},"Why is ease-out recommended for most transitions?","Ease-out (starting fast, ending slow) feels more natural for UI transitions because it mimics how physical objects move due to friction. The fast start provides responsiveness while the slow end feels smooth and settled.",[3207,3208,3209],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":486,"searchDepth":527,"depth":527,"links":3211},[3212,3213,3214,3215,3216,3219,3220,3223,3224],{"id":416,"depth":527,"text":64},{"id":423,"depth":527,"text":424},{"id":459,"depth":527,"text":463},{"id":1421,"depth":527,"text":1424},{"id":1771,"depth":527,"text":1774,"children":3217},[3218],{"id":2170,"depth":550,"text":2171},{"id":2230,"depth":527,"text":2233},{"id":2542,"depth":527,"text":2543,"children":3221},[3222],{"id":2546,"depth":550,"text":2547},{"id":3151,"depth":527,"text":3152},{"id":3187,"depth":527,"text":3188},"Create transition utilities for smooth state changes with full type safety. Control which properties animate, timing, easing, and delays.","md",null,{},{"title":356,"icon":7},{"title":409,"description":3225},{"loc":357},"Fc3zswP-y5c6c3MRMN6FCcXvsjEGzfYTzKI5wBLSkfk",[3234,3236],{"title":352,"path":353,"stem":354,"description":3235,"icon":7,"children":-1},"Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.",{"title":216,"path":360,"stem":361,"description":3237,"icon":7,"children":-1},"Create typography utilities for font families, sizes, weights, colors, alignment, and text decoration with full type safety.",1776621149973]