[{"data":1,"prerenderedAt":870},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":420,"/docs/utilities/shimmer":433,"surround-/docs/utilities/shimmer":868},[4],{"title":5,"path":6,"stem":7,"children":8,"page":18},"Docs","/docs","docs",[9,273,299,317,330,356,365],{"title":10,"path":11,"stem":12,"children":13,"new":18,"type":272},"Components","/docs/components","docs/02.components",[14,20,24,28,32,36,40,44,48,52,56,60,64,68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268],{"title":15,"path":16,"stem":17,"new":18,"type":19,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion",false,"component",{"title":21,"path":22,"stem":23,"new":18,"type":19,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":25,"path":26,"stem":27,"new":18,"type":19,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":29,"path":30,"stem":31,"new":18,"type":19,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":33,"path":34,"stem":35,"new":18,"type":19,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":37,"path":38,"stem":39,"new":18,"type":19,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":41,"path":42,"stem":43,"new":18,"type":19,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":45,"path":46,"stem":47,"new":18,"type":19,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":49,"path":50,"stem":51,"new":18,"type":19,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",{"title":53,"path":54,"stem":55,"new":18,"type":19,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":57,"path":58,"stem":59,"new":18,"type":19,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":61,"path":62,"stem":63,"new":18,"type":19,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":65,"path":66,"stem":67,"new":18,"type":19,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":69,"path":70,"stem":71,"new":18,"type":19,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":73,"path":74,"stem":75,"new":18,"type":19,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":77,"path":78,"stem":79,"new":18,"type":19,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":81,"path":82,"stem":83,"new":18,"type":19,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":85,"path":86,"stem":87,"new":18,"type":19,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":89,"path":90,"stem":91,"new":18,"type":19,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":93,"path":94,"stem":95,"new":18,"type":19,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":97,"path":98,"stem":99,"new":18,"type":19,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":101,"path":102,"stem":103,"new":18,"type":19,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":105,"path":106,"stem":107,"new":18,"type":19,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":109,"path":110,"stem":111,"new":18,"type":19,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":113,"path":114,"stem":115,"new":18,"type":19,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":117,"path":118,"stem":119,"new":18,"type":19,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":121,"path":122,"stem":123,"new":18,"type":19,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":125,"path":126,"stem":127,"new":18,"type":19,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":129,"path":130,"stem":131,"new":18,"type":19,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":133,"path":134,"stem":135,"new":18,"type":19,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":137,"path":138,"stem":139,"new":18,"type":19,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":141,"path":142,"stem":143,"new":18,"type":19,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":145,"path":146,"stem":147,"new":18,"type":19,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":149,"path":150,"stem":151,"new":18,"type":19,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":153,"path":154,"stem":155,"new":18,"type":19,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":157,"path":158,"stem":159,"new":18,"type":19,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":161,"path":162,"stem":163,"new":18,"type":19,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":165,"path":166,"stem":167,"new":18,"type":19,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":169,"path":170,"stem":171,"new":18,"type":19,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":173,"path":174,"stem":175,"new":18,"type":19,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":177,"path":178,"stem":179,"new":18,"type":19,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":181,"path":182,"stem":183,"new":18,"type":19,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":185,"path":186,"stem":187,"new":18,"type":19,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":189,"path":190,"stem":191,"new":18,"type":19,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":193,"path":194,"stem":195,"new":18,"type":19,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":197,"path":198,"stem":199,"new":18,"type":19,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":201,"path":202,"stem":203,"new":18,"type":19,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":205,"path":206,"stem":207,"new":18,"type":19,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":209,"path":210,"stem":211,"new":18,"type":19,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":213,"path":214,"stem":215,"new":18,"type":19,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":217,"path":218,"stem":219,"new":18,"type":19,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":221,"path":222,"stem":223,"new":18,"type":19,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":225,"path":226,"stem":227,"new":18,"type":19,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":229,"path":230,"stem":231,"new":18,"type":19,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":233,"path":234,"stem":235,"new":18,"type":19,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":237,"path":238,"stem":239,"new":18,"type":19,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":241,"path":242,"stem":243,"new":18,"type":19,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":245,"path":246,"stem":247,"new":18,"type":19,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":249,"path":250,"stem":251,"new":18,"type":19,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":253,"path":254,"stem":255,"new":18,"type":19,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":257,"path":258,"stem":259,"new":18,"type":19,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":261,"path":262,"stem":263,"new":18,"type":19,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":265,"path":266,"stem":267,"new":18,"type":19,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":269,"path":270,"stem":271,"new":18,"type":19,"children":-1},"Typography","/docs/components/typography","docs/components/typography","group",{"title":274,"path":275,"stem":276,"children":277,"new":18,"type":272},"Installation","/docs/installation","docs/02.installation",[278,283,287,291,295],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite","page",{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":300,"path":301,"stem":302,"children":303,"new":18,"type":272},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[304,307,310,314],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":318,"path":319,"stem":320,"children":321,"new":18,"type":272},"Forms","/docs/forms","docs/forms",[322,326],{"title":323,"path":324,"stem":325,"new":18,"type":282,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":327,"path":328,"stem":329,"new":18,"type":282,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":331,"path":332,"stem":333,"children":334,"new":18,"type":272},"Registry","/docs/registry","docs/registry/index",[335,336,340,344,348,352],{"title":331,"path":332,"stem":333,"new":18,"type":282,"children":-1},{"title":337,"path":338,"stem":339,"new":18,"type":282,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":341,"path":342,"stem":343,"new":18,"type":282,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":345,"path":346,"stem":347,"new":18,"type":282,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":349,"path":350,"stem":351,"new":18,"type":282,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":353,"path":354,"stem":355,"new":18,"type":282,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"title":357,"path":358,"stem":359,"children":360,"page":18,"type":272},"Utilities","/docs/utilities","docs/utilities",[361],{"title":362,"path":363,"stem":364,"new":18,"type":282,"children":-1},"shimmer","/docs/utilities/shimmer","docs/utilities/shimmer",{"path":6,"stem":7,"title":366,"type":272,"children":367},"Get Started",[368,372,379,383,387,393,397,401,405,409,413,417],{"title":369,"path":370,"stem":371,"new":18,"type":282,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",{"title":274,"path":275,"stem":276,"children":373,"new":18,"type":272},[374,375,376,377,378],{"title":279,"path":280,"stem":281,"new":18,"type":282,"children":-1},{"title":284,"path":285,"stem":286,"new":18,"type":282,"children":-1},{"title":288,"path":289,"stem":290,"new":18,"type":282,"children":-1},{"title":292,"path":293,"stem":294,"new":18,"type":282,"children":-1},{"title":296,"path":297,"stem":298,"new":18,"type":282,"children":-1},{"title":380,"path":381,"stem":382,"new":18,"type":282,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":384,"path":385,"stem":386,"new":18,"type":282,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":300,"path":301,"stem":302,"children":388,"new":18,"type":272},[389,390,391,392],{"title":279,"path":305,"stem":306,"new":18,"type":282,"children":-1},{"title":284,"path":308,"stem":309,"new":18,"type":282,"children":-1},{"title":311,"path":312,"stem":313,"new":18,"type":282,"children":-1},{"title":288,"path":315,"stem":316,"new":18,"type":282,"children":-1},{"title":394,"path":395,"stem":396,"new":18,"type":282,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":398,"path":399,"stem":400,"new":18,"type":282,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":402,"path":403,"stem":404,"new":18,"type":282,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":406,"path":407,"stem":408,"new":18,"type":282,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":410,"path":411,"stem":412,"new":18,"type":282,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":414,"path":415,"stem":416,"new":18,"type":282,"children":-1},"Skills","/docs/skills","docs/skills",{"title":357,"path":358,"stem":359,"children":418,"page":18,"type":272},[419],{"title":362,"path":363,"stem":364,"new":18,"type":282,"children":-1},{"repo":421},{"id":422,"name":423,"repo":424,"description":425,"createdAt":426,"updatedAt":427,"pushedAt":428,"stars":429,"watchers":430,"forks":431,"defaultBranch":432},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-07-01T07:54:00Z","2026-07-01T07:53:54Z",10204,37,664,"dev",{"id":434,"title":362,"body":435,"description":860,"extension":861,"links":862,"meta":863,"navigation":864,"new":18,"path":363,"rawbody":865,"seo":866,"stem":364,"__hash__":867},"content/docs/utilities/shimmer.md",{"type":436,"value":437,"toc":845},"minimark",[438,442,446,461,465,628,634,644,651,668,675,679,685,688,692,705,708,712,725,728,731,737,741,749,752,756,766,770,778,781,785,790,793,797,818,826,830,833,836,842],[439,440],"component-preview",{"name":441},"ShimmerDemo",[443,444,274],"h2",{"id":445},"installation",[447,448,449,450,454,455,457,458,460],"p",{},"If your project was set up with ",[451,452,453],"code",{},"npx shadcn-vue@latest init",", you already have ",[451,456,362],{},". It ships with the ",[451,459,423],{}," package, which the CLI imports in your global CSS file.",[443,462,464],{"id":463},"usage","Usage",[466,467,468,481],"table",{},[469,470,471],"thead",{},[472,473,474,478],"tr",{},[475,476,477],"th",{},"Class",[475,479,480],{},"Styles",[482,483,484,503,515,527,544,556,568,580,592,604,616],"tbody",{},[472,485,486,491],{},[487,488,489],"td",{},[451,490,362],{},[487,492,493,496,497,496,500],{},[451,494,495],{},"background-clip: text;"," ",[498,499],"br",{},[451,501,502],{},"animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;",[472,504,505,510],{},[487,506,507],{},[451,508,509],{},"shimmer-once",[487,511,512],{},[451,513,514],{},"animation-iteration-count: 1;",[472,516,517,522],{},[487,518,519],{},[451,520,521],{},"shimmer-reverse",[487,523,524],{},[451,525,526],{},"animation-direction: reverse;",[472,528,529,534],{},[487,530,531],{},[451,532,533],{},"shimmer-none",[487,535,536,496,539,496,541],{},[451,537,538],{},"--shimmer-image: none;",[498,540],{},[451,542,543],{},"--shimmer-text-fill: currentColor;",[472,545,546,551],{},[487,547,548],{},[451,549,550],{},"shimmer-color-\u003Ccolor>",[487,552,553],{},[451,554,555],{},"--shimmer-color: \u003Ccolor>;",[472,557,558,563],{},[487,559,560],{},[451,561,562],{},"shimmer-color-[\u003Cvalue>]",[487,564,565],{},[451,566,567],{},"--shimmer-color: \u003Cvalue>;",[472,569,570,575],{},[487,571,572],{},[451,573,574],{},"shimmer-color-\u003Ccolor>/\u003Cpct>",[487,576,577],{},[451,578,579],{},"--shimmer-color: color-mix(in oklch, \u003Ccolor> \u003Cpct>, transparent);",[472,581,582,587],{},[487,583,584],{},[451,585,586],{},"shimmer-duration-\u003Cnumber>",[487,588,589],{},[451,590,591],{},"--shimmer-duration: calc(\u003Cnumber> * 1ms);",[472,593,594,599],{},[487,595,596],{},[451,597,598],{},"shimmer-spread-\u003Cnumber>",[487,600,601],{},[451,602,603],{},"--shimmer-spread: calc(var(--spacing) * \u003Cnumber>);",[472,605,606,611],{},[487,607,608],{},[451,609,610],{},"shimmer-spread-[\u003Cvalue>]",[487,612,613],{},[451,614,615],{},"--shimmer-spread: \u003Cvalue>;",[472,617,618,623],{},[487,619,620],{},[451,621,622],{},"shimmer-angle-\u003Cnumber>",[487,624,625],{},[451,626,627],{},"--shimmer-angle: calc(\u003Cnumber> * 1deg);",[447,629,630,631,633],{},"Add ",[451,632,362],{}," to a text element.",[635,636,642],"pre",{"className":637,"code":639,"language":640,"meta":641},[638],"language-tsx","\u003Cp class=\"shimmer text-muted-foreground\">Generating response…\u003C/p>\n","tsx","",[451,643,639],{"__ignoreMap":641},[447,645,646,647,650],{},"The shimmer is built on ",[451,648,649],{},"currentColor",", so it adapts to the element:",[652,653,654,658,665],"ul",{},[655,656,657],"li",{},"The highlight is derived from the text color, with no configuration needed.",[655,659,660,661,664],{},"It works on any color, from ",[451,662,663],{},"text-muted-foreground"," to brand colors.",[655,666,667],{},"In dark mode, the highlight automatically brightens to stay visible.",[447,669,670,671,674],{},"The effect is pure CSS. The text is painted with ",[451,672,673],{},"background-clip: text",", and the highlight sweeps across it in a seamless loop.",[443,676,678],{"id":677},"color","Color",[447,680,681,682,684],{},"Use ",[451,683,550],{}," to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.",[439,686],{"name":687},"ShimmerColorDemo",[443,689,691],{"id":690},"duration","Duration",[447,693,681,694,696,697,700,701,704],{},[451,695,586],{}," to set the duration of one sweep in milliseconds. The default is ",[451,698,699],{},"2000",", i.e. ",[451,702,703],{},"2s",".",[439,706],{"name":707},"ShimmerDurationDemo",[443,709,711],{"id":710},"spread","Spread",[447,713,681,714,716,717,720,721,724],{},[451,715,598],{}," to set the width of the highlight band using the spacing scale. The default is ",[451,718,719],{},"calc(3ch + 40px)",": a fixed base plus a ",[451,722,723],{},"3ch"," term that scales with the font size.",[439,726],{"name":727},"ShimmerSpreadDemo",[447,729,730],{},"For one-off values, use an arbitrary length or percentage:",[635,732,735],{"className":733,"code":734,"language":640,"meta":641},[638],"\u003Cp class=\"shimmer shimmer-spread-[5rem]\">Generating response…\u003C/p>\n",[451,736,734],{"__ignoreMap":641},[443,738,740],{"id":739},"angle","Angle",[447,742,681,743,745,746,704],{},[451,744,622],{}," to set the tilt of the highlight band in degrees. The default is ",[451,747,748],{},"20",[439,750],{"name":751},"ShimmerAngleDemo",[443,753,755],{"id":754},"reverse","Reverse",[447,757,681,758,760,761,704],{},[451,759,521],{}," to sweep the highlight in the opposite direction. In RTL layouts the sweep already follows the reading direction. See ",[762,763,765],"a",{"href":764},"#rtl","RTL",[443,767,769],{"id":768},"play-once","Play Once",[447,771,681,772,774,775,777],{},[451,773,509],{}," to play a single sweep instead of looping, useful as a reveal when streaming completes. Pair it with ",[451,776,586],{}," to control how long the sweep takes.",[439,779],{"name":780},"ShimmerPlayOnceDemo",[443,782,784],{"id":783},"disabling-the-shimmer","Disabling the Shimmer",[447,786,681,787,789],{},[451,788,533],{}," to turn the effect off and render the text normally. It works in any class order, so the typical use is responsive or stateful:",[439,791],{"name":792},"ShimmerDisablingDemo",[443,794,796],{"id":795},"fallback","Fallback",[447,798,799,800,806,807,810,811,813,814,817],{},"The shimmer is built on modern color features, ",[762,801,805],{"href":802,"rel":803},"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors",[804],"nofollow","relative color syntax"," and ",[451,808,809],{},"color-mix()",", which are available in all current browsers. In older browsers without support, the highlight gradient is dropped and the text can render transparent. If you target older browsers, apply ",[451,812,362],{}," conditionally with a ",[451,815,816],{},"supports-*"," variant:",[635,819,824],{"className":820,"code":822,"language":823,"meta":641},[821],"language-vue","\u003Cp class=\"supports-[color:oklch(from_white_l_c_h)]:shimmer\">\n  Generating response…\n\u003C/p>\n","vue",[451,825,822],{"__ignoreMap":641},[443,827,829],{"id":828},"reduced-motion","Reduced Motion",[447,831,832],{},"When the user prefers reduced motion, the animation is disabled automatically and the text renders normally. There is nothing to configure.",[443,834,765],{"id":835},"rtl",[447,837,838,839,841],{},"The sweep follows the reading direction, left to right in LTR and right to left in RTL, with no extra classes. Use ",[451,840,521],{}," to flip the direction manually.",[439,843],{"name":844},"ShimmerRTLDemo",{"title":641,"searchDepth":846,"depth":846,"links":847},2,[848,849,850,851,852,853,854,855,856,857,858,859],{"id":445,"depth":846,"text":274},{"id":463,"depth":846,"text":464},{"id":677,"depth":846,"text":678},{"id":690,"depth":846,"text":691},{"id":710,"depth":846,"text":711},{"id":739,"depth":846,"text":740},{"id":754,"depth":846,"text":755},{"id":768,"depth":846,"text":769},{"id":783,"depth":846,"text":784},{"id":795,"depth":846,"text":796},{"id":828,"depth":846,"text":829},{"id":835,"depth":846,"text":765},"Utilities for adding a shimmer effect to text elements.","md",null,{},true,"---\ntitle: shimmer\ndescription: Utilities for adding a shimmer effect to text elements.\n---\n\n::component-preview\n---\nname: ShimmerDemo\n---\n::\n\n\n## Installation\n\nIf your project was set up with `npx shadcn-vue@latest init`, you already have `shimmer`. It ships with the `shadcn-vue` package, which the CLI imports in your global CSS file.\n\n\n## Usage\n\n| Class                         | Styles                                                                                               |\n| ----------------------------- | ---------------------------------------------------------------------------------------------------- |\n| `shimmer`                     | `background-clip: text;` \u003Cbr /> `animation: tw-shimmer var(--shimmer-duration, 2s) linear infinite;` |\n| `shimmer-once`                | `animation-iteration-count: 1;`                                                                      |\n| `shimmer-reverse`             | `animation-direction: reverse;`                                                                      |\n| `shimmer-none`                | `--shimmer-image: none;` \u003Cbr /> `--shimmer-text-fill: currentColor;`                                 |\n| `shimmer-color-\u003Ccolor>`       | `--shimmer-color: \u003Ccolor>;`                                                                          |\n| `shimmer-color-[\u003Cvalue>]`     | `--shimmer-color: \u003Cvalue>;`                                                                          |\n| `shimmer-color-\u003Ccolor>/\u003Cpct>` | `--shimmer-color: color-mix(in oklch, \u003Ccolor> \u003Cpct>, transparent);`                                  |\n| `shimmer-duration-\u003Cnumber>`   | `--shimmer-duration: calc(\u003Cnumber> * 1ms);`                                                          |\n| `shimmer-spread-\u003Cnumber>`     | `--shimmer-spread: calc(var(--spacing) * \u003Cnumber>);`                                                 |\n| `shimmer-spread-[\u003Cvalue>]`    | `--shimmer-spread: \u003Cvalue>;`                                                                         |\n| `shimmer-angle-\u003Cnumber>`      | `--shimmer-angle: calc(\u003Cnumber> * 1deg);`                                                            |\n\nAdd `shimmer` to a text element.\n\n```tsx\n\u003Cp class=\"shimmer text-muted-foreground\">Generating response…\u003C/p>\n```\n\nThe shimmer is built on `currentColor`, so it adapts to the element:\n\n- The highlight is derived from the text color, with no configuration needed.\n- It works on any color, from `text-muted-foreground` to brand colors.\n- In dark mode, the highlight automatically brightens to stay visible.\n\nThe effect is pure CSS. The text is painted with `background-clip: text`, and the highlight sweeps across it in a seamless loop.\n\n\n## Color\n\nUse `shimmer-color-\u003Ccolor>` to set the highlight color explicitly. It accepts theme colors with an optional opacity modifier, or any arbitrary color value.\n\n::component-preview\n---\nname: ShimmerColorDemo\n---\n::\n\n\n## Duration\n\nUse `shimmer-duration-\u003Cnumber>` to set the duration of one sweep in milliseconds. The default is `2000`, i.e. `2s`.\n\n::component-preview\n---\nname: ShimmerDurationDemo\n---\n::\n\n\n## Spread\n\nUse `shimmer-spread-\u003Cnumber>` to set the width of the highlight band using the spacing scale. The default is `calc(3ch + 40px)`: a fixed base plus a `3ch` term that scales with the font size.\n\n::component-preview\n---\nname: ShimmerSpreadDemo\n---\n::\n\nFor one-off values, use an arbitrary length or percentage:\n\n```tsx\n\u003Cp class=\"shimmer shimmer-spread-[5rem]\">Generating response…\u003C/p>\n```\n\n\n## Angle\n\nUse `shimmer-angle-\u003Cnumber>` to set the tilt of the highlight band in degrees. The default is `20`.\n\n::component-preview\n---\nname: ShimmerAngleDemo\n---\n::\n\n\n## Reverse\n\nUse `shimmer-reverse` to sweep the highlight in the opposite direction. In RTL layouts the sweep already follows the reading direction. See [RTL](#rtl).\n\n\n## Play Once\n\nUse `shimmer-once` to play a single sweep instead of looping, useful as a reveal when streaming completes. Pair it with `shimmer-duration-\u003Cnumber>` to control how long the sweep takes.\n\n::component-preview\n---\nname: ShimmerPlayOnceDemo\n---\n::\n\n\n## Disabling the Shimmer\n\nUse `shimmer-none` to turn the effect off and render the text normally. It works in any class order, so the typical use is responsive or stateful:\n\n::component-preview\n---\nname: ShimmerDisablingDemo\n---\n::\n\n\n## Fallback\n\nThe shimmer is built on modern color features, [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors) and `color-mix()`, which are available in all current browsers. In older browsers without support, the highlight gradient is dropped and the text can render transparent. If you target older browsers, apply `shimmer` conditionally with a `supports-*` variant:\n\n```vue\n\u003Cp class=\"supports-[color:oklch(from_white_l_c_h)]:shimmer\">\n  Generating response…\n\u003C/p>\n```\n\n\n## Reduced Motion\n\nWhen the user prefers reduced motion, the animation is disabled automatically and the text renders normally. There is nothing to configure.\n\n\n## RTL\n\nThe sweep follows the reading direction, left to right in LTR and right to left in RTL, with no extra classes. Use `shimmer-reverse` to flip the direction manually.\n\n::component-preview\n---\nname: ShimmerRTLDemo\n---\n::\n",{"title":362,"description":860},"4rFBlq7KiCIEnIsyeMKkek5WbEAiYS5y1FjlqZT3J3I",[869,862],{"title":414,"path":415,"stem":416,"children":-1},1782892695988]