[{"data":1,"prerenderedAt":2956},["ShallowReactive",2],{"navigation_docs":3,"-components-scroll-svg-draw-on-scroll":1514,"-components-scroll-svg-draw-on-scroll-surround":2951},[4,28,35,1298,1321,1328,1483,1507],{"title":5,"path":6,"stem":7,"children":8,"icon":27},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,11,15,19,23],{"title":10,"path":6,"stem":7},"Introduction",{"title":12,"path":13,"stem":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":16,"path":17,"stem":18},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage",{"title":20,"path":21,"stem":22},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming",{"title":24,"path":25,"stem":26},"AI Agents","\u002Fgetting-started\u002Fai-agents","1.getting-started\u002F5.ai-agents","i-lucide-rocket",{"title":29,"path":30,"stem":31,"children":32,"icon":34},"Core Concepts","\u002Fcore-concepts","2.core-concepts\u002Findex",[33],{"title":29,"path":30,"stem":31},"i-lucide-lightbulb",{"title":36,"icon":37,"path":38,"stem":39,"children":40},"Components","i-lucide-component","\u002Fcomponents","3.components",[41,43,62,152,254,312,434,452,466,600,690,876,906,936,970,1004,1042,1268],{"title":36,"path":38,"stem":42},"3.components\u002Findex",{"title":44,"icon":45,"path":46,"stem":47,"children":48,"page":61},"3D","i-lucide-box","\u002Fcomponents\u002F3d","3.components\u002F3d",[49,53,57],{"title":50,"path":51,"stem":52},"3D Card","\u002Fcomponents\u002F3d\u002F3d-card","3.components\u002F3d\u002F3d-card",{"title":54,"path":55,"stem":56},"Book","\u002Fcomponents\u002F3d\u002Fbook","3.components\u002F3d\u002Fbook",{"title":58,"path":59,"stem":60},"Globe","\u002Fcomponents\u002F3d\u002Fglobe","3.components\u002F3d\u002Fglobe",false,{"title":63,"icon":64,"path":65,"stem":66,"children":67,"page":61},"AI","i-lucide-sparkles","\u002Fcomponents\u002Fai","3.components\u002Fai",[68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148],{"title":69,"path":70,"stem":71},"Agent Avatar","\u002Fcomponents\u002Fai\u002Fagent-avatar","3.components\u002Fai\u002Fagent-avatar",{"title":73,"path":74,"stem":75},"AI Approval","\u002Fcomponents\u002Fai\u002Fai-approval","3.components\u002Fai\u002Fai-approval",{"title":77,"path":78,"stem":79},"AI Artifact","\u002Fcomponents\u002Fai\u002Fai-artifact","3.components\u002Fai\u002Fai-artifact",{"title":81,"path":82,"stem":83},"AI Branch","\u002Fcomponents\u002Fai\u002Fai-branch","3.components\u002Fai\u002Fai-branch",{"title":85,"path":86,"stem":87},"AI Citation","\u002Fcomponents\u002Fai\u002Fai-citation","3.components\u002Fai\u002Fai-citation",{"title":89,"path":90,"stem":91},"AI Context Meter","\u002Fcomponents\u002Fai\u002Fai-context-meter","3.components\u002Fai\u002Fai-context-meter",{"title":93,"path":94,"stem":95},"AI Conversation","\u002Fcomponents\u002Fai\u002Fai-conversation","3.components\u002Fai\u002Fai-conversation",{"title":97,"path":98,"stem":99},"AI Diff","\u002Fcomponents\u002Fai\u002Fai-diff","3.components\u002Fai\u002Fai-diff",{"title":101,"path":102,"stem":103},"AI Message","\u002Fcomponents\u002Fai\u002Fai-message","3.components\u002Fai\u002Fai-message",{"title":105,"path":106,"stem":107},"AI Messages","\u002Fcomponents\u002Fai\u002Fai-messages","3.components\u002Fai\u002Fai-messages",{"title":109,"path":110,"stem":111},"AI Orb","\u002Fcomponents\u002Fai\u002Fai-orb","3.components\u002Fai\u002Fai-orb",{"title":113,"path":114,"stem":115},"AI Orb Face","\u002Fcomponents\u002Fai\u002Fai-orb-face","3.components\u002Fai\u002Fai-orb-face",{"title":117,"path":118,"stem":119},"AI Orb Face Mouth","\u002Fcomponents\u002Fai\u002Fai-orb-face-mouth","3.components\u002Fai\u002Fai-orb-face-mouth",{"title":121,"path":122,"stem":123},"AI Prompt Input","\u002Fcomponents\u002Fai\u002Fai-prompt-input","3.components\u002Fai\u002Fai-prompt-input",{"title":125,"path":126,"stem":127},"AI Reasoning","\u002Fcomponents\u002Fai\u002Fai-reasoning","3.components\u002Fai\u002Fai-reasoning",{"title":129,"path":130,"stem":131},"AI Response","\u002Fcomponents\u002Fai\u002Fai-response","3.components\u002Fai\u002Fai-response",{"title":133,"path":134,"stem":135},"AI Sources","\u002Fcomponents\u002Fai\u002Fai-sources","3.components\u002Fai\u002Fai-sources",{"title":137,"path":138,"stem":139},"AI Suggestions","\u002Fcomponents\u002Fai\u002Fai-suggestions","3.components\u002Fai\u002Fai-suggestions",{"title":141,"path":142,"stem":143},"AI Task List","\u002Fcomponents\u002Fai\u002Fai-task-list","3.components\u002Fai\u002Fai-task-list",{"title":145,"path":146,"stem":147},"AI Tool Call","\u002Fcomponents\u002Fai\u002Fai-tool-call","3.components\u002Fai\u002Fai-tool-call",{"title":149,"path":150,"stem":151},"Image Generation Panel","\u002Fcomponents\u002Fai\u002Fimage-generation-panel","3.components\u002Fai\u002Fimage-generation-panel",{"title":153,"icon":154,"path":155,"stem":156,"children":157,"page":61},"Backgrounds","i-lucide-layers","\u002Fcomponents\u002Fbackgrounds","3.components\u002Fbackgrounds",[158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250],{"title":159,"path":160,"stem":161},"Animated Background","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-background","3.components\u002Fbackgrounds\u002Fanimated-background",{"title":163,"path":164,"stem":165},"Animated Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-grid-pattern","3.components\u002Fbackgrounds\u002Fanimated-grid-pattern",{"title":167,"path":168,"stem":169},"Animated Spotlight","\u002Fcomponents\u002Fbackgrounds\u002Fanimated-spotlight","3.components\u002Fbackgrounds\u002Fanimated-spotlight",{"title":171,"path":172,"stem":173},"Aurora Background","\u002Fcomponents\u002Fbackgrounds\u002Faurora-background","3.components\u002Fbackgrounds\u002Faurora-background",{"title":175,"path":176,"stem":177},"Aurora Curtain","\u002Fcomponents\u002Fbackgrounds\u002Faurora-curtain","3.components\u002Fbackgrounds\u002Faurora-curtain",{"title":179,"path":180,"stem":181},"Background Beams","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-beams","3.components\u002Fbackgrounds\u002Fbackground-beams",{"title":183,"path":184,"stem":185},"Background Gradient Animation","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-gradient-animation","3.components\u002Fbackgrounds\u002Fbackground-gradient-animation",{"title":187,"path":188,"stem":189},"Background Lines","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-lines","3.components\u002Fbackgrounds\u002Fbackground-lines",{"title":191,"path":192,"stem":193},"Background Ripple Effect","\u002Fcomponents\u002Fbackgrounds\u002Fbackground-ripple-effect","3.components\u002Fbackgrounds\u002Fbackground-ripple-effect",{"title":195,"path":196,"stem":197},"Boxes Core","\u002Fcomponents\u002Fbackgrounds\u002Fboxes-core","3.components\u002Fbackgrounds\u002Fboxes-core",{"title":199,"path":200,"stem":201},"Directional Light","\u002Fcomponents\u002Fbackgrounds\u002Fdirectional-light","3.components\u002Fbackgrounds\u002Fdirectional-light",{"title":203,"path":204,"stem":205},"Dotted Glow Background","\u002Fcomponents\u002Fbackgrounds\u002Fdotted-glow-background","3.components\u002Fbackgrounds\u002Fdotted-glow-background",{"title":207,"path":208,"stem":209},"Flickering Grid","\u002Fcomponents\u002Fbackgrounds\u002Fflickering-grid","3.components\u002Fbackgrounds\u002Fflickering-grid",{"title":211,"path":212,"stem":213},"Interactive Grid Pattern","\u002Fcomponents\u002Fbackgrounds\u002Finteractive-grid-pattern","3.components\u002Fbackgrounds\u002Finteractive-grid-pattern",{"title":215,"path":216,"stem":217},"Lamp Container","\u002Fcomponents\u002Fbackgrounds\u002Flamp-container","3.components\u002Fbackgrounds\u002Flamp-container",{"title":219,"path":220,"stem":221},"Light Rays","\u002Fcomponents\u002Fbackgrounds\u002Flight-rays","3.components\u002Fbackgrounds\u002Flight-rays",{"title":223,"path":224,"stem":225},"Meteors","\u002Fcomponents\u002Fbackgrounds\u002Fmeteors","3.components\u002Fbackgrounds\u002Fmeteors",{"title":227,"path":228,"stem":229},"Particles","\u002Fcomponents\u002Fbackgrounds\u002Fparticles","3.components\u002Fbackgrounds\u002Fparticles",{"title":231,"path":232,"stem":233},"Retro Grid","\u002Fcomponents\u002Fbackgrounds\u002Fretro-grid","3.components\u002Fbackgrounds\u002Fretro-grid",{"title":235,"path":236,"stem":237},"Shooting Stars","\u002Fcomponents\u002Fbackgrounds\u002Fshooting-stars","3.components\u002Fbackgrounds\u002Fshooting-stars",{"title":239,"path":240,"stem":241},"Stars Background","\u002Fcomponents\u002Fbackgrounds\u002Fstars-background","3.components\u002Fbackgrounds\u002Fstars-background",{"title":243,"path":244,"stem":245},"Striped Pattern","\u002Fcomponents\u002Fbackgrounds\u002Fstriped-pattern","3.components\u002Fbackgrounds\u002Fstriped-pattern",{"title":247,"path":248,"stem":249},"Vortex","\u002Fcomponents\u002Fbackgrounds\u002Fvortex","3.components\u002Fbackgrounds\u002Fvortex",{"title":251,"path":252,"stem":253},"Warp Background","\u002Fcomponents\u002Fbackgrounds\u002Fwarp-background","3.components\u002Fbackgrounds\u002Fwarp-background",{"title":255,"icon":256,"path":257,"stem":258,"children":259,"page":61},"Buttons","i-lucide-mouse-pointer-click","\u002Fcomponents\u002Fbuttons","3.components\u002Fbuttons",[260,264,268,272,276,280,284,288,292,296,300,304,308],{"title":261,"path":262,"stem":263},"Button Copy","\u002Fcomponents\u002Fbuttons\u002Fbutton-copy","3.components\u002Fbuttons\u002Fbutton-copy",{"title":265,"path":266,"stem":267},"Clip Corners Button","\u002Fcomponents\u002Fbuttons\u002Fclip-corners-button","3.components\u002Fbuttons\u002Fclip-corners-button",{"title":269,"path":270,"stem":271},"Dot Morph Button","\u002Fcomponents\u002Fbuttons\u002Fdot-morph-button","3.components\u002Fbuttons\u002Fdot-morph-button",{"title":273,"path":274,"stem":275},"Interactive Hover Button","\u002Fcomponents\u002Fbuttons\u002Finteractive-hover-button","3.components\u002Fbuttons\u002Finteractive-hover-button",{"title":277,"path":278,"stem":279},"Magnetic Button","\u002Fcomponents\u002Fbuttons\u002Fmagnetic-button","3.components\u002Fbuttons\u002Fmagnetic-button",{"title":281,"path":282,"stem":283},"Music Toggle","\u002Fcomponents\u002Fbuttons\u002Fmusic-toggle","3.components\u002Fbuttons\u002Fmusic-toggle",{"title":285,"path":286,"stem":287},"Pulsating Button","\u002Fcomponents\u002Fbuttons\u002Fpulsating-button","3.components\u002Fbuttons\u002Fpulsating-button",{"title":289,"path":290,"stem":291},"Rainbow Button","\u002Fcomponents\u002Fbuttons\u002Frainbow-button","3.components\u002Fbuttons\u002Frainbow-button",{"title":293,"path":294,"stem":295},"Ripple Button","\u002Fcomponents\u002Fbuttons\u002Fripple-button","3.components\u002Fbuttons\u002Fripple-button",{"title":297,"path":298,"stem":299},"Shimmer Button","\u002Fcomponents\u002Fbuttons\u002Fshimmer-button","3.components\u002Fbuttons\u002Fshimmer-button",{"title":301,"path":302,"stem":303},"Shiny Button","\u002Fcomponents\u002Fbuttons\u002Fshiny-button","3.components\u002Fbuttons\u002Fshiny-button",{"title":305,"path":306,"stem":307},"Smooth Button","\u002Fcomponents\u002Fbuttons\u002Fsmooth-button","3.components\u002Fbuttons\u002Fsmooth-button",{"title":309,"path":310,"stem":311},"Theme Toggle","\u002Fcomponents\u002Fbuttons\u002Ftheme-toggle","3.components\u002Fbuttons\u002Ftheme-toggle",{"title":313,"icon":314,"path":315,"stem":316,"children":317,"page":61},"Cards","i-lucide-layout-panel-top","\u002Fcomponents\u002Fcards","3.components\u002Fcards",[318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430],{"title":319,"path":320,"stem":321},"App Download Stack","\u002Fcomponents\u002Fcards\u002Fapp-download-stack","3.components\u002Fcards\u002Fapp-download-stack",{"title":323,"path":324,"stem":325},"Apple Invites","\u002Fcomponents\u002Fcards\u002Fapple-invites","3.components\u002Fcards\u002Fapple-invites",{"title":327,"path":328,"stem":329},"Bento Grid","\u002Fcomponents\u002Fcards\u002Fbento-grid","3.components\u002Fcards\u002Fbento-grid",{"title":331,"path":332,"stem":333},"Stacked Cards","\u002Fcomponents\u002Fcards\u002Fcard-stack","3.components\u002Fcards\u002Fcard-stack",{"title":335,"path":336,"stem":337},"Card Swipe Deck","\u002Fcomponents\u002Fcards\u002Fcard-swipe-deck","3.components\u002Fcards\u002Fcard-swipe-deck",{"title":339,"path":340,"stem":341},"Draggable Card","\u002Fcomponents\u002Fcards\u002Fdraggable-card","3.components\u002Fcards\u002Fdraggable-card",{"title":343,"path":344,"stem":345},"Evervault Card","\u002Fcomponents\u002Fcards\u002Fever-vault-card","3.components\u002Fcards\u002Fever-vault-card",{"title":347,"path":348,"stem":349},"Expandable Cards","\u002Fcomponents\u002Fcards\u002Fexpandable-cards","3.components\u002Fcards\u002Fexpandable-cards",{"title":351,"path":352,"stem":353},"Figma Comment","\u002Fcomponents\u002Fcards\u002Ffigma-comment","3.components\u002Fcards\u002Ffigma-comment",{"title":355,"path":356,"stem":357},"Focus Cards","\u002Fcomponents\u002Fcards\u002Ffocus-cards","3.components\u002Fcards\u002Ffocus-cards",{"title":359,"path":360,"stem":361},"Glare Card","\u002Fcomponents\u002Fcards\u002Fglare-card","3.components\u002Fcards\u002Fglare-card",{"title":363,"path":364,"stem":365},"Glass Card","\u002Fcomponents\u002Fcards\u002Fglass-card","3.components\u002Fcards\u002Fglass-card",{"title":367,"path":368,"stem":369},"Glass Panel","\u002Fcomponents\u002Fcards\u002Fglass-panel","3.components\u002Fcards\u002Fglass-panel",{"title":371,"path":372,"stem":373},"Glow Hover Cards","\u002Fcomponents\u002Fcards\u002Fglow-hover-cards","3.components\u002Fcards\u002Fglow-hover-cards",{"title":375,"path":376,"stem":377},"Glowing Stars Card","\u002Fcomponents\u002Fcards\u002Fglowing-stars-card","3.components\u002Fcards\u002Fglowing-stars-card",{"title":379,"path":380,"stem":381},"Mac Terminal","\u002Fcomponents\u002Fcards\u002Fmac-terminal","3.components\u002Fcards\u002Fmac-terminal",{"title":383,"path":384,"stem":385},"Magic Card","\u002Fcomponents\u002Fcards\u002Fmagic-card","3.components\u002Fcards\u002Fmagic-card",{"title":387,"path":388,"stem":389},"Mail Card","\u002Fcomponents\u002Fcards\u002Fmail-card","3.components\u002Fcards\u002Fmail-card",{"title":391,"path":392,"stem":393},"Photo Stack","\u002Fcomponents\u002Fcards\u002Fphoto-stack","3.components\u002Fcards\u002Fphoto-stack",{"title":395,"path":396,"stem":397},"Price Flow","\u002Fcomponents\u002Fcards\u002Fprice-flow","3.components\u002Fcards\u002Fprice-flow",{"title":399,"path":400,"stem":401},"Product Card","\u002Fcomponents\u002Fcards\u002Fproduct-card","3.components\u002Fcards\u002Fproduct-card",{"title":403,"path":404,"stem":405},"Scrollable Card Stack","\u002Fcomponents\u002Fcards\u002Fscrollable-card-stack","3.components\u002Fcards\u002Fscrollable-card-stack",{"title":407,"path":408,"stem":409},"Shine Border","\u002Fcomponents\u002Fcards\u002Fshine-border","3.components\u002Fcards\u002Fshine-border",{"title":411,"path":412,"stem":413},"Social Hover Card","\u002Fcomponents\u002Fcards\u002Fsocial-hover-card","3.components\u002Fcards\u002Fsocial-hover-card",{"title":415,"path":416,"stem":417},"Switchboard Card","\u002Fcomponents\u002Fcards\u002Fswitchboard-card","3.components\u002Fcards\u002Fswitchboard-card",{"title":419,"path":420,"stem":421},"Tilt Card","\u002Fcomponents\u002Fcards\u002Ftilt-card","3.components\u002Fcards\u002Ftilt-card",{"title":423,"path":424,"stem":425},"Tweet Card","\u002Fcomponents\u002Fcards\u002Ftweet-card","3.components\u002Fcards\u002Ftweet-card",{"title":427,"path":428,"stem":429},"Wallet Card","\u002Fcomponents\u002Fcards\u002Fwallet-card","3.components\u002Fcards\u002Fwallet-card",{"title":431,"path":432,"stem":433},"Wobble Card","\u002Fcomponents\u002Fcards\u002Fwobble-card","3.components\u002Fcards\u002Fwobble-card",{"title":435,"icon":436,"path":437,"stem":438,"children":439,"page":61},"Carousels","i-lucide-gallery-horizontal-end","\u002Fcomponents\u002Fcarousels","3.components\u002Fcarousels",[440,444,448],{"title":441,"path":442,"stem":443},"Carousel","\u002Fcomponents\u002Fcarousels\u002Fcarousel","3.components\u002Fcarousels\u002Fcarousel",{"title":445,"path":446,"stem":447},"Coverflow Carousel","\u002Fcomponents\u002Fcarousels\u002Fcoverflow-carousel","3.components\u002Fcarousels\u002Fcoverflow-carousel",{"title":449,"path":450,"stem":451},"Reviews Carousel","\u002Fcomponents\u002Fcarousels\u002Freviews-carousel","3.components\u002Fcarousels\u002Freviews-carousel",{"title":453,"icon":454,"path":455,"stem":456,"children":457,"page":61},"Directional","i-lucide-move-3d","\u002Fcomponents\u002Fdirectional","3.components\u002Fdirectional",[458,462],{"title":459,"path":460,"stem":461},"Direction Aware Hover","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover","3.components\u002Fdirectional\u002Fdirection-aware-hover",{"title":463,"path":464,"stem":465},"Direction Aware Hover New","\u002Fcomponents\u002Fdirectional\u002Fdirection-aware-hover-new","3.components\u002Fdirectional\u002Fdirection-aware-hover-new",{"title":467,"icon":468,"path":469,"stem":470,"children":471,"page":61},"Visual Effects","i-lucide-wand-sparkles","\u002Fcomponents\u002Feffects","3.components\u002Feffects",[472,476,480,484,488,492,496,500,504,508,512,516,520,524,528,532,536,540,544,548,552,556,560,564,568,572,576,580,584,588,592,596],{"title":473,"path":474,"stem":475},"Animated Beam","\u002Fcomponents\u002Feffects\u002Fanimated-beam","3.components\u002Feffects\u002Fanimated-beam",{"title":477,"path":478,"stem":479},"Arcade Pixel","\u002Fcomponents\u002Feffects\u002Farcade-pixel","3.components\u002Feffects\u002Farcade-pixel",{"title":481,"path":482,"stem":483},"ASCII Render","\u002Fcomponents\u002Feffects\u002Fascii-render","3.components\u002Feffects\u002Fascii-render",{"title":485,"path":486,"stem":487},"Border Beam","\u002Fcomponents\u002Feffects\u002Fborder-beam","3.components\u002Feffects\u002Fborder-beam",{"title":489,"path":490,"stem":491},"Border Trail","\u002Fcomponents\u002Feffects\u002Fborder-trail","3.components\u002Feffects\u002Fborder-trail",{"title":493,"path":494,"stem":495},"Confetti","\u002Fcomponents\u002Feffects\u002Fconfetti","3.components\u002Feffects\u002Fconfetti",{"title":497,"path":498,"stem":499},"Dither Chart","\u002Fcomponents\u002Feffects\u002Fdither-chart","3.components\u002Feffects\u002Fdither-chart",{"title":501,"path":502,"stem":503},"Dither Image","\u002Fcomponents\u002Feffects\u002Fdither-image","3.components\u002Feffects\u002Fdither-image",{"title":505,"path":506,"stem":507},"Div Grid","\u002Fcomponents\u002Feffects\u002Fdiv-grid","3.components\u002Feffects\u002Fdiv-grid",{"title":509,"path":510,"stem":511},"Drawing Cursor","\u002Fcomponents\u002Feffects\u002Fdrawing-cursor","3.components\u002Feffects\u002Fdrawing-cursor",{"title":513,"path":514,"stem":515},"Emboss Surface","\u002Fcomponents\u002Feffects\u002Femboss-surface","3.components\u002Feffects\u002Femboss-surface",{"title":517,"path":518,"stem":519},"Brightness slider","\u002Fcomponents\u002Feffects\u002Fexposure-slider","3.components\u002Feffects\u002Fexposure-slider",{"title":521,"path":522,"stem":523},"Flowing Stroke","\u002Fcomponents\u002Feffects\u002Fflowing-stroke","3.components\u002Feffects\u002Fflowing-stroke",{"title":525,"path":526,"stem":527},"Glow Effect","\u002Fcomponents\u002Feffects\u002Fglow-effect","3.components\u002Feffects\u002Fglow-effect",{"title":529,"path":530,"stem":531},"Glowing Effect","\u002Fcomponents\u002Feffects\u002Fglowing-effect","3.components\u002Feffects\u002Fglowing-effect",{"title":533,"path":534,"stem":535},"Gooey Filter","\u002Fcomponents\u002Feffects\u002Fgooey-filter","3.components\u002Feffects\u002Fgooey-filter",{"title":537,"path":538,"stem":539},"Gravity Stars","\u002Fcomponents\u002Feffects\u002Fgravity-stars","3.components\u002Feffects\u002Fgravity-stars",{"title":541,"path":542,"stem":543},"Iridescent foil","\u002Fcomponents\u002Feffects\u002Fholographic-foil","3.components\u002Feffects\u002Fholographic-foil",{"title":545,"path":546,"stem":547},"Icon Cloud","\u002Fcomponents\u002Feffects\u002Ficon-cloud","3.components\u002Feffects\u002Ficon-cloud",{"title":549,"path":550,"stem":551},"Liquid Metal","\u002Fcomponents\u002Feffects\u002Fliquid-metal","3.components\u002Feffects\u002Fliquid-metal",{"title":553,"path":554,"stem":555},"Mask Container","\u002Fcomponents\u002Feffects\u002Fmask-container","3.components\u002Feffects\u002Fmask-container",{"title":557,"path":558,"stem":559},"Orbiting Circles","\u002Fcomponents\u002Feffects\u002Forbiting-circles","3.components\u002Feffects\u002Forbiting-circles",{"title":561,"path":562,"stem":563},"Depth layers","\u002Fcomponents\u002Feffects\u002Fparallax-layers","3.components\u002Feffects\u002Fparallax-layers",{"title":565,"path":566,"stem":567},"Pixel Flow Field","\u002Fcomponents\u002Feffects\u002Fpixel-flow-field","3.components\u002Feffects\u002Fpixel-flow-field",{"title":569,"path":570,"stem":571},"Pixelated Canvas","\u002Fcomponents\u002Feffects\u002Fpixelated-canvas","3.components\u002Feffects\u002Fpixelated-canvas",{"title":573,"path":574,"stem":575},"Progressive Blur","\u002Fcomponents\u002Feffects\u002Fprogressive-blur","3.components\u002Feffects\u002Fprogressive-blur",{"title":577,"path":578,"stem":579},"Siri Orb","\u002Fcomponents\u002Feffects\u002Fsiri-orb","3.components\u002Feffects\u002Fsiri-orb",{"title":581,"path":582,"stem":583},"Spotlight","\u002Fcomponents\u002Feffects\u002Fspotlight","3.components\u002Feffects\u002Fspotlight",{"title":585,"path":586,"stem":587},"Squircle","\u002Fcomponents\u002Feffects\u002Fsquircle","3.components\u002Feffects\u002Fsquircle",{"title":589,"path":590,"stem":591},"SVG Clip Mask","\u002Fcomponents\u002Feffects\u002Fsvg-clip-mask","3.components\u002Feffects\u002Fsvg-clip-mask",{"title":593,"path":594,"stem":595},"Tracing Beam","\u002Fcomponents\u002Feffects\u002Ftracing-beam","3.components\u002Feffects\u002Ftracing-beam",{"title":597,"path":598,"stem":599},"Video Ambient","\u002Fcomponents\u002Feffects\u002Fvideo-ambient","3.components\u002Feffects\u002Fvideo-ambient",{"title":601,"icon":602,"path":603,"stem":604,"children":605,"page":61},"Forms","i-lucide-text-cursor-input","\u002Fcomponents\u002Fforms","3.components\u002Fforms",[606,610,614,618,622,626,630,634,638,642,646,650,654,658,662,666,670,674,678,682,686],{"title":607,"path":608,"stem":609},"Animated File Upload","\u002Fcomponents\u002Fforms\u002Fanimated-file-upload","3.components\u002Fforms\u002Fanimated-file-upload",{"title":611,"path":612,"stem":613},"Animated Input","\u002Fcomponents\u002Fforms\u002Fanimated-input","3.components\u002Fforms\u002Fanimated-input",{"title":615,"path":616,"stem":617},"Animated Number Input","\u002Fcomponents\u002Fforms\u002Fanimated-number-input","3.components\u002Fforms\u002Fanimated-number-input",{"title":619,"path":620,"stem":621},"Animated OTP Input","\u002Fcomponents\u002Fforms\u002Fanimated-otp-input","3.components\u002Fforms\u002Fanimated-otp-input",{"title":623,"path":624,"stem":625},"Animated Progress Bar","\u002Fcomponents\u002Fforms\u002Fanimated-progress-bar","3.components\u002Fforms\u002Fanimated-progress-bar",{"title":627,"path":628,"stem":629},"Animated Stepper","\u002Fcomponents\u002Fforms\u002Fanimated-stepper","3.components\u002Fforms\u002Fanimated-stepper",{"title":631,"path":632,"stem":633},"Animated Tags","\u002Fcomponents\u002Fforms\u002Fanimated-tags","3.components\u002Fforms\u002Fanimated-tags",{"title":635,"path":636,"stem":637},"Animated Toggle","\u002Fcomponents\u002Fforms\u002Fanimated-toggle","3.components\u002Fforms\u002Fanimated-toggle",{"title":639,"path":640,"stem":641},"Auth Form","\u002Fcomponents\u002Fforms\u002Fauth-form","3.components\u002Fforms\u002Fauth-form",{"title":643,"path":644,"stem":645},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","3.components\u002Fforms\u002Fcheckbox",{"title":647,"path":648,"stem":649},"Country Picker","\u002Fcomponents\u002Fforms\u002Fcountry-picker","3.components\u002Fforms\u002Fcountry-picker",{"title":651,"path":652,"stem":653},"Digit Roll","\u002Fcomponents\u002Fforms\u002Fdigit-roll","3.components\u002Fforms\u002Fdigit-roll",{"title":655,"path":656,"stem":657},"Duration Picker","\u002Fcomponents\u002Fforms\u002Fduration-picker","3.components\u002Fforms\u002Fduration-picker",{"title":659,"path":660,"stem":661},"Favicon Search","\u002Fcomponents\u002Fforms\u002Ffavicon-search","3.components\u002Fforms\u002Ffavicon-search",{"title":663,"path":664,"stem":665},"Float Input","\u002Fcomponents\u002Fforms\u002Ffloat-input","3.components\u002Fforms\u002Ffloat-input",{"title":667,"path":668,"stem":669},"Form","\u002Fcomponents\u002Fforms\u002Fform","3.components\u002Fforms\u002Fform",{"title":671,"path":672,"stem":673},"Morph Toggle","\u002Fcomponents\u002Fforms\u002Fmorph-toggle","3.components\u002Fforms\u002Fmorph-toggle",{"title":675,"path":676,"stem":677},"Radio Group","\u002Fcomponents\u002Fforms\u002Fradio-group","3.components\u002Fforms\u002Fradio-group",{"title":679,"path":680,"stem":681},"Scrubber","\u002Fcomponents\u002Fforms\u002Fscrubber","3.components\u002Fforms\u002Fscrubber",{"title":683,"path":684,"stem":685},"Social Selector","\u002Fcomponents\u002Fforms\u002Fsocial-selector","3.components\u002Fforms\u002Fsocial-selector",{"title":687,"path":688,"stem":689},"Swap Panel","\u002Fcomponents\u002Fforms\u002Fswap-panel","3.components\u002Fforms\u002Fswap-panel",{"title":691,"icon":692,"path":693,"stem":694,"children":695,"page":61},"Interactive","i-lucide-hand","\u002Fcomponents\u002Finteractive","3.components\u002Finteractive",[696,700,704,708,712,716,720,724,728,732,736,740,744,748,752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812,816,820,824,828,832,836,840,844,848,852,856,860,864,868,872],{"title":697,"path":698,"stem":699},"Accordion","\u002Fcomponents\u002Finteractive\u002Faccordion","3.components\u002Finteractive\u002Faccordion",{"title":701,"path":702,"stem":703},"Motion dialog","\u002Fcomponents\u002Finteractive\u002Fanimated-dialog","3.components\u002Finteractive\u002Fanimated-dialog",{"title":705,"path":706,"stem":707},"Animated Tooltip","\u002Fcomponents\u002Finteractive\u002Fanimated-tooltip","3.components\u002Finteractive\u002Fanimated-tooltip",{"title":709,"path":710,"stem":711},"Basic Dropdown","\u002Fcomponents\u002Finteractive\u002Fbasic-dropdown","3.components\u002Finteractive\u002Fbasic-dropdown",{"title":713,"path":714,"stem":715},"Basic Toast","\u002Fcomponents\u002Finteractive\u002Fbasic-toast","3.components\u002Finteractive\u002Fbasic-toast",{"title":717,"path":718,"stem":719},"Code Block","\u002Fcomponents\u002Finteractive\u002Fcode-block","3.components\u002Finteractive\u002Fcode-block",{"title":721,"path":722,"stem":723},"Code Comparison","\u002Fcomponents\u002Finteractive\u002Fcode-comparison","3.components\u002Finteractive\u002Fcode-comparison",{"title":725,"path":726,"stem":727},"Contribution Graph","\u002Fcomponents\u002Finteractive\u002Fcontribution-graph","3.components\u002Finteractive\u002Fcontribution-graph",{"title":729,"path":730,"stem":731},"Cool Mode","\u002Fcomponents\u002Finteractive\u002Fcool-mode","3.components\u002Finteractive\u002Fcool-mode",{"title":733,"path":734,"stem":735},"Count Badge","\u002Fcomponents\u002Finteractive\u002Fcount-badge","3.components\u002Finteractive\u002Fcount-badge",{"title":737,"path":738,"stem":739},"Dock","\u002Fcomponents\u002Finteractive\u002Fdock","3.components\u002Finteractive\u002Fdock",{"title":741,"path":742,"stem":743},"Drag and Drop","\u002Fcomponents\u002Finteractive\u002Fdrag-and-drop","3.components\u002Finteractive\u002Fdrag-and-drop",{"title":745,"path":746,"stem":747},"Drawer","\u002Fcomponents\u002Finteractive\u002Fdrawer","3.components\u002Finteractive\u002Fdrawer",{"title":749,"path":750,"stem":751},"Dynamic Group","\u002Fcomponents\u002Finteractive\u002Fdynamic-group","3.components\u002Finteractive\u002Fdynamic-group",{"title":753,"path":754,"stem":755},"Dynamic Island","\u002Fcomponents\u002Finteractive\u002Fdynamic-island","3.components\u002Finteractive\u002Fdynamic-island",{"title":757,"path":758,"stem":759},"Emoji Reaction","\u002Fcomponents\u002Finteractive\u002Femoji-reaction","3.components\u002Finteractive\u002Femoji-reaction",{"title":761,"path":762,"stem":763},"Fluid Hover Highlight","\u002Fcomponents\u002Finteractive\u002Ffluid-hover-highlight","3.components\u002Finteractive\u002Ffluid-hover-highlight",{"title":765,"path":766,"stem":767},"Folder Reveal","\u002Fcomponents\u002Finteractive\u002Ffolder-reveal","3.components\u002Finteractive\u002Ffolder-reveal",{"title":769,"path":770,"stem":771},"GitHub Stars Animation","\u002Fcomponents\u002Finteractive\u002Fgithub-stars-animation","3.components\u002Finteractive\u002Fgithub-stars-animation",{"title":773,"path":774,"stem":775},"Hover Expand","\u002Fcomponents\u002Finteractive\u002Fhover-expand","3.components\u002Finteractive\u002Fhover-expand",{"title":777,"path":778,"stem":779},"Hover Image List","\u002Fcomponents\u002Finteractive\u002Fhover-image-list","3.components\u002Finteractive\u002Fhover-image-list",{"title":781,"path":782,"stem":783},"Image compare","\u002Fcomponents\u002Finteractive\u002Fimage-comparison","3.components\u002Finteractive\u002Fimage-comparison",{"title":785,"path":786,"stem":787},"Image Metadata Preview","\u002Fcomponents\u002Finteractive\u002Fimage-metadata-preview","3.components\u002Finteractive\u002Fimage-metadata-preview",{"title":789,"path":790,"stem":791},"Inline Testimonials","\u002Fcomponents\u002Finteractive\u002Finline-testimonials","3.components\u002Finteractive\u002Finline-testimonials",{"title":793,"path":794,"stem":795},"Interactive Image Selector","\u002Fcomponents\u002Finteractive\u002Finteractive-image-selector","3.components\u002Finteractive\u002Finteractive-image-selector",{"title":797,"path":798,"stem":799},"Job Listing","\u002Fcomponents\u002Finteractive\u002Fjob-listing","3.components\u002Finteractive\u002Fjob-listing",{"title":801,"path":802,"stem":803},"Lens","\u002Fcomponents\u002Finteractive\u002Flens","3.components\u002Finteractive\u002Flens",{"title":805,"path":806,"stem":807},"Morph Icon","\u002Fcomponents\u002Finteractive\u002Fmorph-icon","3.components\u002Finteractive\u002Fmorph-icon",{"title":809,"path":810,"stem":811},"Morph Surface","\u002Fcomponents\u002Finteractive\u002Fmorph-surface","3.components\u002Finteractive\u002Fmorph-surface",{"title":813,"path":814,"stem":815},"Shape-shift dialog","\u002Fcomponents\u002Finteractive\u002Fmorphing-dialog","3.components\u002Finteractive\u002Fmorphing-dialog",{"title":817,"path":818,"stem":819},"Shape-shift popover","\u002Fcomponents\u002Finteractive\u002Fmorphing-popover","3.components\u002Finteractive\u002Fmorphing-popover",{"title":821,"path":822,"stem":823},"Notification Badge","\u002Fcomponents\u002Finteractive\u002Fnotification-badge","3.components\u002Finteractive\u002Fnotification-badge",{"title":825,"path":826,"stem":827},"Orbital Image Wheel","\u002Fcomponents\u002Finteractive\u002Forbital-image-wheel","3.components\u002Finteractive\u002Forbital-image-wheel",{"title":829,"path":830,"stem":831},"Phototab","\u002Fcomponents\u002Finteractive\u002Fphototab","3.components\u002Finteractive\u002Fphototab",{"title":833,"path":834,"stem":835},"Pinned List","\u002Fcomponents\u002Finteractive\u002Fpinned-list","3.components\u002Finteractive\u002Fpinned-list",{"title":837,"path":838,"stem":839},"Pixel Brush Canvas","\u002Fcomponents\u002Finteractive\u002Fpixel-brush-canvas","3.components\u002Finteractive\u002Fpixel-brush-canvas",{"title":841,"path":842,"stem":843},"Power Off Slide","\u002Fcomponents\u002Finteractive\u002Fpower-off-slide","3.components\u002Finteractive\u002Fpower-off-slide",{"title":845,"path":846,"stem":847},"Rich Popover","\u002Fcomponents\u002Finteractive\u002Frich-popover","3.components\u002Finteractive\u002Frich-popover",{"title":849,"path":850,"stem":851},"Scratch to Reveal","\u002Fcomponents\u002Finteractive\u002Fscratch-to-reveal","3.components\u002Finteractive\u002Fscratch-to-reveal",{"title":853,"path":854,"stem":855},"Time Machine Stack","\u002Fcomponents\u002Finteractive\u002Ftime-machine-stack","3.components\u002Finteractive\u002Ftime-machine-stack",{"title":857,"path":858,"stem":859},"Unlock Face ID","\u002Fcomponents\u002Finteractive\u002Funlock-face-id","3.components\u002Finteractive\u002Funlock-face-id",{"title":861,"path":862,"stem":863},"User Account Avatar","\u002Fcomponents\u002Finteractive\u002Fuser-account-avatar","3.components\u002Finteractive\u002Fuser-account-avatar",{"title":865,"path":866,"stem":867},"Vector Editor Toolbar","\u002Fcomponents\u002Finteractive\u002Fvector-editor-toolbar","3.components\u002Finteractive\u002Fvector-editor-toolbar",{"title":869,"path":870,"stem":871},"Video Modal","\u002Fcomponents\u002Finteractive\u002Fvideo-modal","3.components\u002Finteractive\u002Fvideo-modal",{"title":873,"path":874,"stem":875},"Zoomable Image","\u002Fcomponents\u002Finteractive\u002Fzoomable-image","3.components\u002Finteractive\u002Fzoomable-image",{"title":877,"icon":878,"path":879,"stem":880,"children":881,"page":61},"Layout","i-lucide-layout-grid","\u002Fcomponents\u002Flayout","3.components\u002Flayout",[882,886,890,894,898,902],{"title":883,"path":884,"stem":885},"Android","\u002Fcomponents\u002Flayout\u002Fandroid","3.components\u002Flayout\u002Fandroid",{"title":887,"path":888,"stem":889},"Animated Group","\u002Fcomponents\u002Flayout\u002Fanimated-group","3.components\u002Flayout\u002Fanimated-group",{"title":891,"path":892,"stem":893},"Breakpoint Indicator","\u002Fcomponents\u002Flayout\u002Fbreakpoint-indicator","3.components\u002Flayout\u002Fbreakpoint-indicator",{"title":895,"path":896,"stem":897},"Collision","\u002Fcomponents\u002Flayout\u002Fcollision","3.components\u002Flayout\u002Fcollision",{"title":899,"path":900,"stem":901},"iPhone 15 Pro","\u002Fcomponents\u002Flayout\u002Fiphone-15-pro","3.components\u002Flayout\u002Fiphone-15-pro",{"title":903,"path":904,"stem":905},"Safari","\u002Fcomponents\u002Flayout\u002Fsafari","3.components\u002Flayout\u002Fsafari",{"title":907,"icon":908,"path":909,"stem":910,"children":911,"page":61},"Loaders & Progress","i-lucide-loader-circle","\u002Fcomponents\u002Floaders","3.components\u002Floaders",[912,916,920,924,928,932],{"title":913,"path":914,"stem":915},"AI Loader","\u002Fcomponents\u002Floaders\u002Fai-loader","3.components\u002Floaders\u002Fai-loader",{"title":917,"path":918,"stem":919},"Circular Progress","\u002Fcomponents\u002Floaders\u002Fcircular-progress","3.components\u002Floaders\u002Fcircular-progress",{"title":921,"path":922,"stem":923},"Content Skeleton","\u002Fcomponents\u002Floaders\u002Fcontent-skeleton","3.components\u002Floaders\u002Fcontent-skeleton",{"title":925,"path":926,"stem":927},"Grid Loader","\u002Fcomponents\u002Floaders\u002Fgrid-loader","3.components\u002Floaders\u002Fgrid-loader",{"title":929,"path":930,"stem":931},"Motion Loader","\u002Fcomponents\u002Floaders\u002Fmotion-loader","3.components\u002Floaders\u002Fmotion-loader",{"title":933,"path":934,"stem":935},"Page Preloader","\u002Fcomponents\u002Floaders\u002Fpage-preloader","3.components\u002Floaders\u002Fpage-preloader",{"title":937,"icon":938,"path":939,"stem":940,"children":941,"page":61},"Interaction & Movement","i-lucide-move","\u002Fcomponents\u002Fmovement","3.components\u002Fmovement",[942,946,950,954,958,962,966],{"title":943,"path":944,"stem":945},"Cursor","\u002Fcomponents\u002Fmovement\u002Fcursor","3.components\u002Fmovement\u002Fcursor",{"title":947,"path":948,"stem":949},"Cursor Follow","\u002Fcomponents\u002Fmovement\u002Fcursor-follow","3.components\u002Fmovement\u002Fcursor-follow",{"title":951,"path":952,"stem":953},"Cursor Image Trail","\u002Fcomponents\u002Fmovement\u002Fcursor-image-trail","3.components\u002Fmovement\u002Fcursor-image-trail",{"title":955,"path":956,"stem":957},"Force Dot","\u002Fcomponents\u002Fmovement\u002Fforce-dot","3.components\u002Fmovement\u002Fforce-dot",{"title":959,"path":960,"stem":961},"Magnetic","\u002Fcomponents\u002Fmovement\u002Fmagnetic","3.components\u002Fmovement\u002Fmagnetic",{"title":963,"path":964,"stem":965},"Magnetic Field","\u002Fcomponents\u002Fmovement\u002Fmagnetic-field","3.components\u002Fmovement\u002Fmagnetic-field",{"title":967,"path":968,"stem":969},"Tilt","\u002Fcomponents\u002Fmovement\u002Ftilt","3.components\u002Fmovement\u002Ftilt",{"title":971,"icon":972,"path":973,"stem":974,"children":975,"page":61},"Navigation & Toolbars","i-lucide-menu","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation",[976,980,984,988,992,996,1000],{"title":977,"path":978,"stem":979},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","3.components\u002Fnavigation\u002Fbreadcrumb",{"title":981,"path":982,"stem":983},"Expandable Navbar","\u002Fcomponents\u002Fnavigation\u002Fexpandable-navbar","3.components\u002Fnavigation\u002Fexpandable-navbar",{"title":985,"path":986,"stem":987},"File Tree","\u002Fcomponents\u002Fnavigation\u002Ffile-tree","3.components\u002Fnavigation\u002Ffile-tree",{"title":989,"path":990,"stem":991},"Floating Navbar","\u002Fcomponents\u002Fnavigation\u002Ffloating-navbar","3.components\u002Fnavigation\u002Ffloating-navbar",{"title":993,"path":994,"stem":995},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","3.components\u002Fnavigation\u002Fpagination",{"title":997,"path":998,"stem":999},"Toolbar adaptive","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-dynamic","3.components\u002Fnavigation\u002Ftoolbar-dynamic",{"title":1001,"path":1002,"stem":1003},"Toolbar collapsible","\u002Fcomponents\u002Fnavigation\u002Ftoolbar-expandable","3.components\u002Fnavigation\u002Ftoolbar-expandable",{"title":1005,"icon":1006,"path":1007,"stem":1008,"children":1009,"page":61},"Scroll & Viewport","i-lucide-scroll-text","\u002Fcomponents\u002Fscroll","3.components\u002Fscroll",[1010,1014,1018,1022,1026,1030,1034,1038],{"title":1011,"path":1012,"stem":1013},"In View","\u002Fcomponents\u002Fscroll\u002Fin-view","3.components\u002Fscroll\u002Fin-view",{"title":1015,"path":1016,"stem":1017},"Infinite Slider","\u002Fcomponents\u002Fscroll\u002Finfinite-slider","3.components\u002Fscroll\u002Finfinite-slider",{"title":1019,"path":1020,"stem":1021},"Kinetic Type Scroll","\u002Fcomponents\u002Fscroll\u002Fkinetic-type-scroll","3.components\u002Fscroll\u002Fkinetic-type-scroll",{"title":1023,"path":1024,"stem":1025},"Marquee","\u002Fcomponents\u002Fscroll\u002Fmarquee","3.components\u002Fscroll\u002Fmarquee",{"title":1027,"path":1028,"stem":1029},"Scroll Image Reveal","\u002Fcomponents\u002Fscroll\u002Fscroll-image-reveal","3.components\u002Fscroll\u002Fscroll-image-reveal",{"title":1031,"path":1032,"stem":1033},"Scroll Progress","\u002Fcomponents\u002Fscroll\u002Fscroll-progress","3.components\u002Fscroll\u002Fscroll-progress",{"title":1035,"path":1036,"stem":1037},"Scroll Velocity","\u002Fcomponents\u002Fscroll\u002Fscroll-velocity","3.components\u002Fscroll\u002Fscroll-velocity",{"title":1039,"path":1040,"stem":1041},"Svg Draw On Scroll","\u002Fcomponents\u002Fscroll\u002Fsvg-draw-on-scroll","3.components\u002Fscroll\u002Fsvg-draw-on-scroll",{"title":1043,"icon":1044,"path":1045,"stem":1046,"children":1047,"page":61},"Text & Numbers","i-lucide-type","\u002Fcomponents\u002Ftext","3.components\u002Ftext",[1048,1052,1056,1060,1064,1068,1072,1076,1080,1084,1088,1092,1096,1100,1104,1108,1112,1116,1120,1124,1128,1132,1136,1140,1144,1148,1152,1156,1160,1164,1168,1172,1176,1180,1184,1188,1192,1196,1200,1204,1208,1212,1216,1220,1224,1228,1232,1236,1240,1244,1248,1252,1256,1260,1264],{"title":1049,"path":1050,"stem":1051},"Animated Avatar Group","\u002Fcomponents\u002Ftext\u002Fanimated-avatar-group","3.components\u002Ftext\u002Fanimated-avatar-group",{"title":1053,"path":1054,"stem":1055},"Animated List","\u002Fcomponents\u002Ftext\u002Fanimated-list","3.components\u002Ftext\u002Fanimated-list",{"title":1057,"path":1058,"stem":1059},"Animated Number","\u002Fcomponents\u002Ftext\u002Fanimated-number","3.components\u002Ftext\u002Fanimated-number",{"title":1061,"path":1062,"stem":1063},"Blur Out Up","\u002Fcomponents\u002Ftext\u002Fblur-out-up","3.components\u002Ftext\u002Fblur-out-up",{"title":1065,"path":1066,"stem":1067},"Bottom Up Letters","\u002Fcomponents\u002Ftext\u002Fbottom-up-letters","3.components\u002Ftext\u002Fbottom-up-letters",{"title":1069,"path":1070,"stem":1071},"Comic Text","\u002Fcomponents\u002Ftext\u002Fcomic-text","3.components\u002Ftext\u002Fcomic-text",{"title":1073,"path":1074,"stem":1075},"Counting Number","\u002Fcomponents\u002Ftext\u002Fcounting-number","3.components\u002Ftext\u002Fcounting-number",{"title":1077,"path":1078,"stem":1079},"Depth Parallax Words","\u002Fcomponents\u002Ftext\u002Fdepth-parallax-words","3.components\u002Ftext\u002Fdepth-parallax-words",{"title":1081,"path":1082,"stem":1083},"Fade Through","\u002Fcomponents\u002Ftext\u002Ffade-through","3.components\u002Ftext\u002Ffade-through",{"title":1085,"path":1086,"stem":1087},"Focus Blur Resolve","\u002Fcomponents\u002Ftext\u002Ffocus-blur-resolve","3.components\u002Ftext\u002Ffocus-blur-resolve",{"title":1089,"path":1090,"stem":1091},"Gravity Letters","\u002Fcomponents\u002Ftext\u002Fgravity-letters","3.components\u002Ftext\u002Fgravity-letters",{"title":1093,"path":1094,"stem":1095},"Kinetic Center Build","\u002Fcomponents\u002Ftext\u002Fkinetic-center-build","3.components\u002Ftext\u002Fkinetic-center-build",{"title":1097,"path":1098,"stem":1099},"Line By Line Slide","\u002Fcomponents\u002Ftext\u002Fline-by-line-slide","3.components\u002Ftext\u002Fline-by-line-slide",{"title":1101,"path":1102,"stem":1103},"Mask Reveal Up","\u002Fcomponents\u002Ftext\u002Fmask-reveal-up","3.components\u002Ftext\u002Fmask-reveal-up",{"title":1105,"path":1106,"stem":1107},"Micro Scale Fade","\u002Fcomponents\u002Ftext\u002Fmicro-scale-fade","3.components\u002Ftext\u002Fmicro-scale-fade",{"title":1109,"path":1110,"stem":1111},"Number Flow","\u002Fcomponents\u002Ftext\u002Fnumber-flow","3.components\u002Ftext\u002Fnumber-flow",{"title":1113,"path":1114,"stem":1115},"Per Character Rise","\u002Fcomponents\u002Ftext\u002Fper-character-rise","3.components\u002Ftext\u002Fper-character-rise",{"title":1117,"path":1118,"stem":1119},"Per Word Crossfade","\u002Fcomponents\u002Ftext\u002Fper-word-crossfade","3.components\u002Ftext\u002Fper-word-crossfade",{"title":1121,"path":1122,"stem":1123},"Perspective Text 3D","\u002Fcomponents\u002Ftext\u002Fperspective-text-3d","3.components\u002Ftext\u002Fperspective-text-3d",{"title":1125,"path":1126,"stem":1127},"Ransom Note","\u002Fcomponents\u002Ftext\u002Fransom-note","3.components\u002Ftext\u002Fransom-note",{"title":1129,"path":1130,"stem":1131},"Rolling Text","\u002Fcomponents\u002Ftext\u002Frolling-text","3.components\u002Ftext\u002Frolling-text",{"title":1133,"path":1134,"stem":1135},"Scale Down Fade","\u002Fcomponents\u002Ftext\u002Fscale-down-fade","3.components\u002Ftext\u002Fscale-down-fade",{"title":1137,"path":1138,"stem":1139},"Scroll Reveal Paragraph","\u002Fcomponents\u002Ftext\u002Fscroll-reveal-paragraph","3.components\u002Ftext\u002Fscroll-reveal-paragraph",{"title":1141,"path":1142,"stem":1143},"Shared Axis","\u002Fcomponents\u002Ftext\u002Fshared-axis","3.components\u002Ftext\u002Fshared-axis",{"title":1145,"path":1146,"stem":1147},"Shimmer Sweep","\u002Fcomponents\u002Ftext\u002Fshimmer-sweep","3.components\u002Ftext\u002Fshimmer-sweep",{"title":1149,"path":1150,"stem":1151},"Shine Text","\u002Fcomponents\u002Ftext\u002Fshine-text","3.components\u002Ftext\u002Fshine-text",{"title":1153,"path":1154,"stem":1155},"Short Lower in","\u002Fcomponents\u002Ftext\u002Fshort-slide-down","3.components\u002Ftext\u002Fshort-slide-down",{"title":1157,"path":1158,"stem":1159},"Short Slide Right","\u002Fcomponents\u002Ftext\u002Fshort-slide-right","3.components\u002Ftext\u002Fshort-slide-right",{"title":1161,"path":1162,"stem":1163},"Sliding Number","\u002Fcomponents\u002Ftext\u002Fsliding-number","3.components\u002Ftext\u002Fsliding-number",{"title":1165,"path":1166,"stem":1167},"Soft Blur In","\u002Fcomponents\u002Ftext\u002Fsoft-blur-in","3.components\u002Ftext\u002Fsoft-blur-in",{"title":1169,"path":1170,"stem":1171},"Sparkles Text","\u002Fcomponents\u002Ftext\u002Fsparkles-text","3.components\u002Ftext\u002Fsparkles-text",{"title":1173,"path":1174,"stem":1175},"Spinning Text","\u002Fcomponents\u002Ftext\u002Fspinning-text","3.components\u002Ftext\u002Fspinning-text",{"title":1177,"path":1178,"stem":1179},"Spring Scale In","\u002Fcomponents\u002Ftext\u002Fspring-scale-in","3.components\u002Ftext\u002Fspring-scale-in",{"title":1181,"path":1182,"stem":1183},"Stagger From Center","\u002Fcomponents\u002Ftext\u002Fstagger-from-center","3.components\u002Ftext\u002Fstagger-from-center",{"title":1185,"path":1186,"stem":1187},"Stagger From Edges","\u002Fcomponents\u002Ftext\u002Fstagger-from-edges","3.components\u002Ftext\u002Fstagger-from-edges",{"title":1189,"path":1190,"stem":1191},"Text Animate","\u002Fcomponents\u002Ftext\u002Ftext-animate","3.components\u002Ftext\u002Ftext-animate",{"title":1193,"path":1194,"stem":1195},"Text motion","\u002Fcomponents\u002Ftext\u002Ftext-effect","3.components\u002Ftext\u002Ftext-effect",{"title":1197,"path":1198,"stem":1199},"Text Glitch","\u002Fcomponents\u002Ftext\u002Ftext-glitch","3.components\u002Ftext\u002Ftext-glitch",{"title":1201,"path":1202,"stem":1203},"Text Glitch New","\u002Fcomponents\u002Ftext\u002Ftext-glitch-new","3.components\u002Ftext\u002Ftext-glitch-new",{"title":1205,"path":1206,"stem":1207},"Text Gradient","\u002Fcomponents\u002Ftext\u002Ftext-gradient","3.components\u002Ftext\u002Ftext-gradient",{"title":1209,"path":1210,"stem":1211},"Text Highlighter","\u002Fcomponents\u002Ftext\u002Ftext-highlighter","3.components\u002Ftext\u002Ftext-highlighter",{"title":1213,"path":1214,"stem":1215},"Text Loop","\u002Fcomponents\u002Ftext\u002Ftext-loop","3.components\u002Ftext\u002Ftext-loop",{"title":1217,"path":1218,"stem":1219},"Text Morph","\u002Fcomponents\u002Ftext\u002Ftext-morph","3.components\u002Ftext\u002Ftext-morph",{"title":1221,"path":1222,"stem":1223},"Text Reveal","\u002Fcomponents\u002Ftext\u002Ftext-reveal","3.components\u002Ftext\u002Ftext-reveal",{"title":1225,"path":1226,"stem":1227},"Text Roll","\u002Fcomponents\u002Ftext\u002Ftext-roll","3.components\u002Ftext\u002Ftext-roll",{"title":1229,"path":1230,"stem":1231},"Text Scramble","\u002Fcomponents\u002Ftext\u002Ftext-scramble","3.components\u002Ftext\u002Ftext-scramble",{"title":1233,"path":1234,"stem":1235},"Text Shimmer","\u002Fcomponents\u002Ftext\u002Ftext-shimmer","3.components\u002Ftext\u002Ftext-shimmer",{"title":1237,"path":1238,"stem":1239},"Text Shimmer Wave","\u002Fcomponents\u002Ftext\u002Ftext-shimmer-wave","3.components\u002Ftext\u002Ftext-shimmer-wave",{"title":1241,"path":1242,"stem":1243},"Top Down Letters","\u002Fcomponents\u002Ftext\u002Ftop-down-letters","3.components\u002Ftext\u002Ftop-down-letters",{"title":1245,"path":1246,"stem":1247},"True Focus","\u002Fcomponents\u002Ftext\u002Ftrue-focus","3.components\u002Ftext\u002Ftrue-focus",{"title":1249,"path":1250,"stem":1251},"Typing Text","\u002Fcomponents\u002Ftext\u002Ftyping-text","3.components\u002Ftext\u002Ftyping-text",{"title":1253,"path":1254,"stem":1255},"Variable Proximity","\u002Fcomponents\u002Ftext\u002Fvariable-proximity","3.components\u002Ftext\u002Fvariable-proximity",{"title":1257,"path":1258,"stem":1259},"Video Text","\u002Fcomponents\u002Ftext\u002Fvideo-text","3.components\u002Ftext\u002Fvideo-text",{"title":1261,"path":1262,"stem":1263},"Wave Text","\u002Fcomponents\u002Ftext\u002Fwave-text","3.components\u002Ftext\u002Fwave-text",{"title":1265,"path":1266,"stem":1267},"Word Rotate","\u002Fcomponents\u002Ftext\u002Fword-rotate","3.components\u002Ftext\u002Fword-rotate",{"title":1269,"icon":1270,"path":1271,"stem":1272,"children":1273,"page":61},"Transitions","i-lucide-git-compare","\u002Fcomponents\u002Ftransitions","3.components\u002Ftransitions",[1274,1278,1282,1286,1290,1294],{"title":1275,"path":1276,"stem":1277},"Aperture Blur Transition","\u002Fcomponents\u002Ftransitions\u002Faperture-blur-transition","3.components\u002Ftransitions\u002Faperture-blur-transition",{"title":1279,"path":1280,"stem":1281},"Chroma Blur Transition","\u002Fcomponents\u002Ftransitions\u002Fchroma-blur-transition","3.components\u002Ftransitions\u002Fchroma-blur-transition",{"title":1283,"path":1284,"stem":1285},"Prism Sweep Transition","\u002Fcomponents\u002Ftransitions\u002Fprism-sweep-transition","3.components\u002Ftransitions\u002Fprism-sweep-transition",{"title":1287,"path":1288,"stem":1289},"SDF Blob Transition","\u002Fcomponents\u002Ftransitions\u002Fsdf-blob-transition","3.components\u002Ftransitions\u002Fsdf-blob-transition",{"title":1291,"path":1292,"stem":1293},"Shader Reveal Transition","\u002Fcomponents\u002Ftransitions\u002Fshader-reveal-transition","3.components\u002Ftransitions\u002Fshader-reveal-transition",{"title":1295,"path":1296,"stem":1297},"Transition Panel","\u002Fcomponents\u002Ftransitions\u002Ftransition-panel","3.components\u002Ftransitions\u002Ftransition-panel",{"title":1299,"path":1300,"stem":1301,"children":1302,"icon":1320},"Composables","\u002Fcomposables","4.composables\u002Findex",[1303,1304,1308,1312,1316],{"title":1299,"path":1300,"stem":1301},{"title":1305,"path":1306,"stem":1307},"useCanvasCursor","\u002Fcomposables\u002Fuse-canvas-cursor","4.composables\u002Fuse-canvas-cursor",{"title":1309,"path":1310,"stem":1311},"useFluidCursor","\u002Fcomposables\u002Fuse-fluid-cursor","4.composables\u002Fuse-fluid-cursor",{"title":1313,"path":1314,"stem":1315},"useMotionBlockUI","\u002Fcomposables\u002Fuse-motion-block-ui","4.composables\u002Fuse-motion-block-ui",{"title":1317,"path":1318,"stem":1319},"useThemeColor","\u002Fcomposables\u002Fuse-theme-color","4.composables\u002Fuse-theme-color","i-lucide-puzzle",{"title":1322,"path":1323,"stem":1324,"children":1325,"icon":1327},"Guides","\u002Fguides","5.guides\u002Findex",[1326],{"title":1322,"path":1323,"stem":1324},"i-lucide-book-open",{"title":1329,"icon":1330,"path":1331,"stem":1332,"children":1333},"Blocks","i-lucide-blocks","\u002Fblocks","6.blocks",[1334,1336,1349,1358,1371,1384,1400,1413,1422,1431,1444,1453,1466,1475],{"title":1329,"path":1331,"stem":1335},"6.blocks\u002Findex",{"title":1337,"path":1338,"stem":1339,"children":1340,"page":61},"Blog","\u002Fblocks\u002Fblog","6.blocks\u002Fblog",[1341,1345],{"title":1342,"path":1343,"stem":1344},"Article Page","\u002Fblocks\u002Fblog\u002Farticle-page","6.blocks\u002Fblog\u002Farticle-page",{"title":1346,"path":1347,"stem":1348},"Blog Listing","\u002Fblocks\u002Fblog\u002Fblog-listing","6.blocks\u002Fblog\u002Fblog-listing",{"title":1350,"path":1351,"stem":1352,"children":1353,"page":61},"Cta","\u002Fblocks\u002Fcta","6.blocks\u002Fcta",[1354],{"title":1355,"path":1356,"stem":1357},"Centered CTA","\u002Fblocks\u002Fcta\u002Fcentered-cta","6.blocks\u002Fcta\u002Fcentered-cta",{"title":1359,"path":1360,"stem":1361,"children":1362,"page":61},"Dashboard Components","\u002Fblocks\u002Fdashboard-components","6.blocks\u002Fdashboard-components",[1363,1367],{"title":1364,"path":1365,"stem":1366},"Analytics Dashboard","\u002Fblocks\u002Fdashboard-components\u002Fanalytics-dashboard","6.blocks\u002Fdashboard-components\u002Fanalytics-dashboard",{"title":1368,"path":1369,"stem":1370},"User Management Table","\u002Fblocks\u002Fdashboard-components\u002Fuser-management","6.blocks\u002Fdashboard-components\u002Fuser-management",{"title":1372,"path":1373,"stem":1374,"children":1375,"page":61},"E Commerce","\u002Fblocks\u002Fe-commerce","6.blocks\u002Fe-commerce",[1376,1380],{"title":1377,"path":1378,"stem":1379},"Product Grid","\u002Fblocks\u002Fe-commerce\u002Fproduct-grid","6.blocks\u002Fe-commerce\u002Fproduct-grid",{"title":1381,"path":1382,"stem":1383},"Shopping Cart","\u002Fblocks\u002Fe-commerce\u002Fshopping-cart","6.blocks\u002Fe-commerce\u002Fshopping-cart",{"title":1385,"path":1386,"stem":1387,"children":1388,"page":61},"Featured Components","\u002Fblocks\u002Ffeatured-components","6.blocks\u002Ffeatured-components",[1389,1393,1396],{"title":1390,"path":1391,"stem":1392},"Animated Gradient","\u002Fblocks\u002Ffeatured-components\u002Fanimated-gradient","6.blocks\u002Ffeatured-components\u002Fanimated-gradient",{"title":167,"path":1394,"stem":1395},"\u002Fblocks\u002Ffeatured-components\u002Fanimated-spotlight","6.blocks\u002Ffeatured-components\u002Fanimated-spotlight",{"title":1397,"path":1398,"stem":1399},"Ripple Effect","\u002Fblocks\u002Ffeatured-components\u002Fripple-effect","6.blocks\u002Ffeatured-components\u002Fripple-effect",{"title":1401,"path":1402,"stem":1403,"children":1404,"page":61},"Features","\u002Fblocks\u002Ffeatures","6.blocks\u002Ffeatures",[1405,1409],{"title":1406,"path":1407,"stem":1408},"Feature Grid","\u002Fblocks\u002Ffeatures\u002Ffeature-grid","6.blocks\u002Ffeatures\u002Ffeature-grid",{"title":1410,"path":1411,"stem":1412},"Glare Card Features","\u002Fblocks\u002Ffeatures\u002Fglare-card-features","6.blocks\u002Ffeatures\u002Fglare-card-features",{"title":1414,"path":1415,"stem":1416,"children":1417,"page":61},"Footers","\u002Fblocks\u002Ffooters","6.blocks\u002Ffooters",[1418],{"title":1419,"path":1420,"stem":1421},"Multi-column Footer","\u002Fblocks\u002Ffooters\u002Fmulti-column-footer","6.blocks\u002Ffooters\u002Fmulti-column-footer",{"title":1423,"path":1424,"stem":1425,"children":1426,"page":61},"Hero Sections","\u002Fblocks\u002Fhero-sections","6.blocks\u002Fhero-sections",[1427],{"title":1428,"path":1429,"stem":1430},"Gradient Hero","\u002Fblocks\u002Fhero-sections\u002Fgradient-hero","6.blocks\u002Fhero-sections\u002Fgradient-hero",{"title":1432,"path":1433,"stem":1434,"children":1435,"page":61},"Landing Page","\u002Fblocks\u002Flanding-page","6.blocks\u002Flanding-page",[1436,1440],{"title":1437,"path":1438,"stem":1439},"Feature Showcase","\u002Fblocks\u002Flanding-page\u002Ffeature-showcase","6.blocks\u002Flanding-page\u002Ffeature-showcase",{"title":1441,"path":1442,"stem":1443},"Testimonial Carousel","\u002Fblocks\u002Flanding-page\u002Ftestimonial-carousel","6.blocks\u002Flanding-page\u002Ftestimonial-carousel",{"title":1445,"path":1446,"stem":1447,"children":1448,"page":61},"Navigation","\u002Fblocks\u002Fnavigation","6.blocks\u002Fnavigation",[1449],{"title":1450,"path":1451,"stem":1452},"Modern Navbar","\u002Fblocks\u002Fnavigation\u002Fmodern-navbar","6.blocks\u002Fnavigation\u002Fmodern-navbar",{"title":1454,"path":1455,"stem":1456,"children":1457,"page":61},"Portfolio","\u002Fblocks\u002Fportfolio","6.blocks\u002Fportfolio",[1458,1462],{"title":1459,"path":1460,"stem":1461},"Case Study","\u002Fblocks\u002Fportfolio\u002Fcase-study","6.blocks\u002Fportfolio\u002Fcase-study",{"title":1463,"path":1464,"stem":1465},"Project Gallery","\u002Fblocks\u002Fportfolio\u002Fproject-gallery","6.blocks\u002Fportfolio\u002Fproject-gallery",{"title":1467,"path":1468,"stem":1469,"children":1470,"page":61},"Pricing","\u002Fblocks\u002Fpricing","6.blocks\u002Fpricing",[1471],{"title":1472,"path":1473,"stem":1474},"Pricing Cards","\u002Fblocks\u002Fpricing\u002Fpricing-cards","6.blocks\u002Fpricing\u002Fpricing-cards",{"title":1476,"path":1477,"stem":1478,"children":1479,"page":61},"Testimonials","\u002Fblocks\u002Ftestimonials","6.blocks\u002Ftestimonials",[1480],{"title":1441,"path":1481,"stem":1482},"\u002Fblocks\u002Ftestimonials\u002Ftestimonial-carousel","6.blocks\u002Ftestimonials\u002Ftestimonial-carousel",{"title":1484,"icon":1485,"path":1486,"stem":1487,"children":1488},"Templates","i-lucide-layout-template","\u002Ftemplates","7.templates",[1489,1491,1495,1499,1503],{"title":1484,"path":1486,"stem":1490},"7.templates\u002Findex",{"title":1492,"path":1493,"stem":1494},"Basic Landing Page","\u002Ftemplates\u002Fbasic-landing-page","7.templates\u002F2.basic-landing-page",{"title":1496,"path":1497,"stem":1498},"SaaS Landing Page","\u002Ftemplates\u002Fsaas-landing-page","7.templates\u002F3.saas-landing-page",{"title":1500,"path":1501,"stem":1502},"E-commerce Landing Page","\u002Ftemplates\u002Fecommerce-landing-page","7.templates\u002F4.ecommerce-landing-page",{"title":1504,"path":1505,"stem":1506},"Creative Agency Landing Page","\u002Ftemplates\u002Fcreative-agency-landing-page","7.templates\u002F5.creative-agency-landing-page",{"title":1508,"path":1509,"stem":1510,"children":1511,"icon":1513},"API Reference","\u002Fapi-reference","8.api-reference\u002Findex",[1512],{"title":1508,"path":1509,"stem":1510},"i-lucide-braces",{"id":1515,"title":1039,"body":1516,"description":2945,"extension":2946,"links":2947,"meta":2948,"navigation":1703,"path":1040,"seo":2949,"stem":1041,"__hash__":2950},"docs\u002F3.components\u002Fscroll\u002Fsvg-draw-on-scroll.md",{"type":1517,"value":1518,"toc":2926},"minimark",[1519,1540,1555,1559,1590,2192,2196,2201,2217,2387,2391,2398,2576,2580,2595,2609,2613,2691,2695,2702,2706,2722,2728,2751,2755,2770,2785,2789,2855,2858,2864,2888,2894,2915,2922],[1520,1521,1522,1523,1527,1528,1531,1532,1535,1536,1539],"p",{},"An SVG path that draws itself in step with scroll. The stroke is revealed by\nanimating ",[1524,1525,1526],"code",{},"stroke-dashoffset"," on the progress value returned by ",[1524,1529,1530],{},"useScroll",", so\nthe artwork appears to be sketched in as the element moves through the viewport.\nGive it a ",[1524,1533,1534],{},"path",", or a ",[1524,1537,1538],{},"paths"," array to draw several in sequence.",[1520,1541,1542,1543,1546,1547,1550,1551,1554],{},"There is also a ",[1524,1544,1545],{},"marker"," slot: content that rides the tip of the line as it draws,\npositioned from the path's own geometry rather than CSS ",[1524,1548,1549],{},"offset-path",", so it stays\nlocked to the stroke at any size or ",[1524,1552,1553],{},"viewBox",".",[1556,1557,16],"h2",{"id":1558},"usage",[1520,1560,1561,1562,1564,1565,1568,1569,1571,1572,1576,1577,1580,1581,1586,1587,1589],{},"Give the wrapper an explicit size, pass a ",[1524,1563,1538],{}," array, and point ",[1524,1566,1567],{},"container"," at a\nscrollable ancestor so the draw is driven by that panel rather than the page.\n",[1524,1570,1567],{}," must be passed as a ",[1573,1574,1575],"strong",{},"getter"," (",[1524,1578,1579],{},":container=\"() => panel\"",") — see\n",[1582,1583,1585],"a",{"href":1584},"#notes","Notes"," for why. The ",[1524,1588,1545],{}," slot rides the tip of the stroke.",[1591,1592,1594,1607],"code-preview",{"label":1593},"Preview",[1595,1596,1602,1603],"div",{"className":1597},[1598,1599,1600,1601],"flex","justify-center","w-full","h-full","  ",[1604,1605],"component-example",{"name":1606},"svg-draw-on-scroll-basic",[1608,1609,1611],"template",{"v-slot:code":1610},"",[1612,1613,1617],"pre",{"className":1614,"code":1615,"language":1616,"meta":1610,"style":1610},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full max-w-md flex-col gap-3\">\n    \u003Cp class=\"text-sm text-muted\">\n      Scroll the panel — the four paths are drawn in sequence as it moves.\n    \u003C\u002Fp>\n\n    \u003Cdiv\n      ref=\"panel\"\n      class=\"relative h-64 overflow-y-auto overscroll-contain rounded-2xl border border-default bg-default\"\n    >\n      \u003Cdiv class=\"h-48\" \u002F>\n\n      \u003CMSvgDrawOnScroll\n        :container=\"() => panel\"\n        :offset=\"['start 0.75', 'end 0.25']\"\n        :paths=\"paths\"\n        viewBox=\"0 0 100 100\"\n        :stroke-width=\"1.4\"\n        stroke=\"var(--ui-primary)\"\n        class=\"mx-auto h-40 w-40\"\n      >\n        \u003Ctemplate #marker>\n          \u003Cspan class=\"block size-3 rounded-full bg-primary ring-4 ring-primary\u002F20\" \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002FMSvgDrawOnScroll>\n\n      \u003Cdiv class=\"h-48\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst panel = ref\u003CHTMLElement | null>(null)\n\nconst paths = [\n  'M12 78 C 26 40, 40 62, 50 38 C 60 14, 74 44, 88 22',\n  'M14 22 L 50 50 L 86 22',\n  'M50 8 L 50 92',\n  'M10 50 L 90 50',\n]\n\u003C\u002Fscript>\n","vue",[1524,1618,1619,1634,1660,1681,1688,1698,1705,1713,1729,1744,1750,1772,1777,1785,1808,1846,1861,1876,1894,1909,1924,1930,1945,1966,1976,1987,1992,2011,2020,2030,2040,2045,2070,2109,2114,2127,2141,2153,2165,2177,2183],{"__ignoreMap":1610},[1620,1621,1624,1628,1631],"span",{"class":1622,"line":1623},"line",1,[1620,1625,1627],{"class":1626},"sMK4o","\u003C",[1620,1629,1608],{"class":1630},"swJcz",[1620,1632,1633],{"class":1626},">\n",[1620,1635,1637,1640,1642,1646,1649,1652,1656,1658],{"class":1622,"line":1636},2,[1620,1638,1639],{"class":1626},"  \u003C",[1620,1641,1595],{"class":1630},[1620,1643,1645],{"class":1644},"spNyl"," class",[1620,1647,1648],{"class":1626},"=",[1620,1650,1651],{"class":1626},"\"",[1620,1653,1655],{"class":1654},"sfazB","flex w-full max-w-md flex-col gap-3",[1620,1657,1651],{"class":1626},[1620,1659,1633],{"class":1626},[1620,1661,1663,1666,1668,1670,1672,1674,1677,1679],{"class":1622,"line":1662},3,[1620,1664,1665],{"class":1626},"    \u003C",[1620,1667,1520],{"class":1630},[1620,1669,1645],{"class":1644},[1620,1671,1648],{"class":1626},[1620,1673,1651],{"class":1626},[1620,1675,1676],{"class":1654},"text-sm text-muted",[1620,1678,1651],{"class":1626},[1620,1680,1633],{"class":1626},[1620,1682,1684],{"class":1622,"line":1683},4,[1620,1685,1687],{"class":1686},"sTEyZ","      Scroll the panel — the four paths are drawn in sequence as it moves.\n",[1620,1689,1691,1694,1696],{"class":1622,"line":1690},5,[1620,1692,1693],{"class":1626},"    \u003C\u002F",[1620,1695,1520],{"class":1630},[1620,1697,1633],{"class":1626},[1620,1699,1701],{"class":1622,"line":1700},6,[1620,1702,1704],{"emptyLinePlaceholder":1703},true,"\n",[1620,1706,1708,1710],{"class":1622,"line":1707},7,[1620,1709,1665],{"class":1626},[1620,1711,1712],{"class":1630},"div\n",[1620,1714,1716,1719,1721,1723,1726],{"class":1622,"line":1715},8,[1620,1717,1718],{"class":1644},"      ref",[1620,1720,1648],{"class":1626},[1620,1722,1651],{"class":1626},[1620,1724,1725],{"class":1654},"panel",[1620,1727,1728],{"class":1626},"\"\n",[1620,1730,1732,1735,1737,1739,1742],{"class":1622,"line":1731},9,[1620,1733,1734],{"class":1644},"      class",[1620,1736,1648],{"class":1626},[1620,1738,1651],{"class":1626},[1620,1740,1741],{"class":1654},"relative h-64 overflow-y-auto overscroll-contain rounded-2xl border border-default bg-default",[1620,1743,1728],{"class":1626},[1620,1745,1747],{"class":1622,"line":1746},10,[1620,1748,1749],{"class":1626},"    >\n",[1620,1751,1753,1756,1758,1760,1762,1764,1767,1769],{"class":1622,"line":1752},11,[1620,1754,1755],{"class":1626},"      \u003C",[1620,1757,1595],{"class":1630},[1620,1759,1645],{"class":1644},[1620,1761,1648],{"class":1626},[1620,1763,1651],{"class":1626},[1620,1765,1766],{"class":1654},"h-48",[1620,1768,1651],{"class":1626},[1620,1770,1771],{"class":1626}," \u002F>\n",[1620,1773,1775],{"class":1622,"line":1774},12,[1620,1776,1704],{"emptyLinePlaceholder":1703},[1620,1778,1780,1782],{"class":1622,"line":1779},13,[1620,1781,1755],{"class":1626},[1620,1783,1784],{"class":1630},"MSvgDrawOnScroll\n",[1620,1786,1788,1791,1793,1795,1797,1800,1803,1806],{"class":1622,"line":1787},14,[1620,1789,1790],{"class":1626},"        :",[1620,1792,1567],{"class":1644},[1620,1794,1648],{"class":1626},[1620,1796,1651],{"class":1626},[1620,1798,1799],{"class":1626},"() ",[1620,1801,1802],{"class":1644},"=>",[1620,1804,1805],{"class":1686}," panel",[1620,1807,1728],{"class":1626},[1620,1809,1811,1813,1816,1818,1820,1823,1826,1829,1831,1834,1836,1839,1841,1844],{"class":1622,"line":1810},15,[1620,1812,1790],{"class":1626},[1620,1814,1815],{"class":1644},"offset",[1620,1817,1648],{"class":1626},[1620,1819,1651],{"class":1626},[1620,1821,1822],{"class":1626},"[",[1620,1824,1825],{"class":1626},"'",[1620,1827,1828],{"class":1654},"start 0.75",[1620,1830,1825],{"class":1626},[1620,1832,1833],{"class":1626},", ",[1620,1835,1825],{"class":1626},[1620,1837,1838],{"class":1654},"end 0.25",[1620,1840,1825],{"class":1626},[1620,1842,1843],{"class":1626},"]",[1620,1845,1728],{"class":1626},[1620,1847,1849,1851,1853,1855,1857,1859],{"class":1622,"line":1848},16,[1620,1850,1790],{"class":1626},[1620,1852,1538],{"class":1644},[1620,1854,1648],{"class":1626},[1620,1856,1651],{"class":1626},[1620,1858,1538],{"class":1686},[1620,1860,1728],{"class":1626},[1620,1862,1864,1867,1869,1871,1874],{"class":1622,"line":1863},17,[1620,1865,1866],{"class":1644},"        viewBox",[1620,1868,1648],{"class":1626},[1620,1870,1651],{"class":1626},[1620,1872,1873],{"class":1654},"0 0 100 100",[1620,1875,1728],{"class":1626},[1620,1877,1879,1881,1884,1886,1888,1892],{"class":1622,"line":1878},18,[1620,1880,1790],{"class":1626},[1620,1882,1883],{"class":1644},"stroke-width",[1620,1885,1648],{"class":1626},[1620,1887,1651],{"class":1626},[1620,1889,1891],{"class":1890},"sbssI","1.4",[1620,1893,1728],{"class":1626},[1620,1895,1897,1900,1902,1904,1907],{"class":1622,"line":1896},19,[1620,1898,1899],{"class":1644},"        stroke",[1620,1901,1648],{"class":1626},[1620,1903,1651],{"class":1626},[1620,1905,1906],{"class":1654},"var(--ui-primary)",[1620,1908,1728],{"class":1626},[1620,1910,1912,1915,1917,1919,1922],{"class":1622,"line":1911},20,[1620,1913,1914],{"class":1644},"        class",[1620,1916,1648],{"class":1626},[1620,1918,1651],{"class":1626},[1620,1920,1921],{"class":1654},"mx-auto h-40 w-40",[1620,1923,1728],{"class":1626},[1620,1925,1927],{"class":1622,"line":1926},21,[1620,1928,1929],{"class":1626},"      >\n",[1620,1931,1933,1936,1938,1941,1943],{"class":1622,"line":1932},22,[1620,1934,1935],{"class":1626},"        \u003C",[1620,1937,1608],{"class":1630},[1620,1939,1940],{"class":1626}," #",[1620,1942,1545],{"class":1644},[1620,1944,1633],{"class":1626},[1620,1946,1948,1951,1953,1955,1957,1959,1962,1964],{"class":1622,"line":1947},23,[1620,1949,1950],{"class":1626},"          \u003C",[1620,1952,1620],{"class":1630},[1620,1954,1645],{"class":1644},[1620,1956,1648],{"class":1626},[1620,1958,1651],{"class":1626},[1620,1960,1961],{"class":1654},"block size-3 rounded-full bg-primary ring-4 ring-primary\u002F20",[1620,1963,1651],{"class":1626},[1620,1965,1771],{"class":1626},[1620,1967,1969,1972,1974],{"class":1622,"line":1968},24,[1620,1970,1971],{"class":1626},"        \u003C\u002F",[1620,1973,1608],{"class":1630},[1620,1975,1633],{"class":1626},[1620,1977,1979,1982,1985],{"class":1622,"line":1978},25,[1620,1980,1981],{"class":1626},"      \u003C\u002F",[1620,1983,1984],{"class":1630},"MSvgDrawOnScroll",[1620,1986,1633],{"class":1626},[1620,1988,1990],{"class":1622,"line":1989},26,[1620,1991,1704],{"emptyLinePlaceholder":1703},[1620,1993,1995,1997,1999,2001,2003,2005,2007,2009],{"class":1622,"line":1994},27,[1620,1996,1755],{"class":1626},[1620,1998,1595],{"class":1630},[1620,2000,1645],{"class":1644},[1620,2002,1648],{"class":1626},[1620,2004,1651],{"class":1626},[1620,2006,1766],{"class":1654},[1620,2008,1651],{"class":1626},[1620,2010,1771],{"class":1626},[1620,2012,2014,2016,2018],{"class":1622,"line":2013},28,[1620,2015,1693],{"class":1626},[1620,2017,1595],{"class":1630},[1620,2019,1633],{"class":1626},[1620,2021,2023,2026,2028],{"class":1622,"line":2022},29,[1620,2024,2025],{"class":1626},"  \u003C\u002F",[1620,2027,1595],{"class":1630},[1620,2029,1633],{"class":1626},[1620,2031,2033,2036,2038],{"class":1622,"line":2032},30,[1620,2034,2035],{"class":1626},"\u003C\u002F",[1620,2037,1608],{"class":1630},[1620,2039,1633],{"class":1626},[1620,2041,2043],{"class":1622,"line":2042},31,[1620,2044,1704],{"emptyLinePlaceholder":1703},[1620,2046,2048,2050,2053,2056,2059,2061,2063,2066,2068],{"class":1622,"line":2047},32,[1620,2049,1627],{"class":1626},[1620,2051,2052],{"class":1630},"script",[1620,2054,2055],{"class":1644}," setup",[1620,2057,2058],{"class":1644}," lang",[1620,2060,1648],{"class":1626},[1620,2062,1651],{"class":1626},[1620,2064,2065],{"class":1654},"ts",[1620,2067,1651],{"class":1626},[1620,2069,1633],{"class":1626},[1620,2071,2073,2076,2079,2081,2085,2087,2091,2094,2097,2100,2103,2106],{"class":1622,"line":2072},33,[1620,2074,2075],{"class":1644},"const",[1620,2077,2078],{"class":1686}," panel ",[1620,2080,1648],{"class":1626},[1620,2082,2084],{"class":2083},"s2Zo4"," ref",[1620,2086,1627],{"class":1626},[1620,2088,2090],{"class":2089},"sBMFI","HTMLElement",[1620,2092,2093],{"class":1626}," |",[1620,2095,2096],{"class":2089}," null",[1620,2098,2099],{"class":1626},">",[1620,2101,2102],{"class":1686},"(",[1620,2104,2105],{"class":1626},"null",[1620,2107,2108],{"class":1686},")\n",[1620,2110,2112],{"class":1622,"line":2111},34,[1620,2113,1704],{"emptyLinePlaceholder":1703},[1620,2115,2117,2119,2122,2124],{"class":1622,"line":2116},35,[1620,2118,2075],{"class":1644},[1620,2120,2121],{"class":1686}," paths ",[1620,2123,1648],{"class":1626},[1620,2125,2126],{"class":1686}," [\n",[1620,2128,2130,2133,2136,2138],{"class":1622,"line":2129},36,[1620,2131,2132],{"class":1626},"  '",[1620,2134,2135],{"class":1654},"M12 78 C 26 40, 40 62, 50 38 C 60 14, 74 44, 88 22",[1620,2137,1825],{"class":1626},[1620,2139,2140],{"class":1626},",\n",[1620,2142,2144,2146,2149,2151],{"class":1622,"line":2143},37,[1620,2145,2132],{"class":1626},[1620,2147,2148],{"class":1654},"M14 22 L 50 50 L 86 22",[1620,2150,1825],{"class":1626},[1620,2152,2140],{"class":1626},[1620,2154,2156,2158,2161,2163],{"class":1622,"line":2155},38,[1620,2157,2132],{"class":1626},[1620,2159,2160],{"class":1654},"M50 8 L 50 92",[1620,2162,1825],{"class":1626},[1620,2164,2140],{"class":1626},[1620,2166,2168,2170,2173,2175],{"class":1622,"line":2167},39,[1620,2169,2132],{"class":1626},[1620,2171,2172],{"class":1654},"M10 50 L 90 50",[1620,2174,1825],{"class":1626},[1620,2176,2140],{"class":1626},[1620,2178,2180],{"class":1622,"line":2179},40,[1620,2181,2182],{"class":1686},"]\n",[1620,2184,2186,2188,2190],{"class":1622,"line":2185},41,[1620,2187,2035],{"class":1626},[1620,2189,2052],{"class":1630},[1620,2191,1633],{"class":1626},[1556,2193,2195],{"id":2194},"examples","Examples",[2197,2198,2200],"h3",{"id":2199},"a-single-path","A single path",[1520,2202,2203,2204,2206,2207,2210,2211,2213,2214,1554],{},"For one shape, ",[1524,2205,1534],{}," takes a bare ",[1524,2208,2209],{},"d"," string. A ",[1524,2212,1553],{}," that matches the path's\ncoordinate space keeps it from being stretched by ",[1524,2215,2216],{},"preserveAspectRatio",[1591,2218,2219,2225],{"label":1593},[1595,2220,1602,2222],{"className":2221},[1598,1599,1600,1601],[1604,2223],{"name":2224},"svg-draw-on-scroll-path",[1608,2226,2227],{"v-slot:code":1610},[1612,2228,2230],{"className":1614,"code":2229,"language":1616,"meta":1610,"style":1610},"\u003Ctemplate>\n  \u003Cdiv class=\"relative h-64 overflow-y-auto overscroll-contain rounded-2xl border border-default bg-default\">\n    \u003Cdiv class=\"h-40\" \u002F>\n\n    \u003CMSvgDrawOnScroll\n      path=\"M10 80 C 30 20, 70 20, 90 80 S 110 20, 130 80\"\n      view-box=\"0 0 140 100\"\n      :stroke-width=\"2\"\n      class=\"mx-auto h-36 w-56 text-primary\"\n    \u002F>\n\n    \u003Cdiv class=\"h-40\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1524,2231,2232,2240,2258,2277,2281,2287,2301,2315,2331,2344,2349,2353,2371,2379],{"__ignoreMap":1610},[1620,2233,2234,2236,2238],{"class":1622,"line":1623},[1620,2235,1627],{"class":1626},[1620,2237,1608],{"class":1630},[1620,2239,1633],{"class":1626},[1620,2241,2242,2244,2246,2248,2250,2252,2254,2256],{"class":1622,"line":1636},[1620,2243,1639],{"class":1626},[1620,2245,1595],{"class":1630},[1620,2247,1645],{"class":1644},[1620,2249,1648],{"class":1626},[1620,2251,1651],{"class":1626},[1620,2253,1741],{"class":1654},[1620,2255,1651],{"class":1626},[1620,2257,1633],{"class":1626},[1620,2259,2260,2262,2264,2266,2268,2270,2273,2275],{"class":1622,"line":1662},[1620,2261,1665],{"class":1626},[1620,2263,1595],{"class":1630},[1620,2265,1645],{"class":1644},[1620,2267,1648],{"class":1626},[1620,2269,1651],{"class":1626},[1620,2271,2272],{"class":1654},"h-40",[1620,2274,1651],{"class":1626},[1620,2276,1771],{"class":1626},[1620,2278,2279],{"class":1622,"line":1683},[1620,2280,1704],{"emptyLinePlaceholder":1703},[1620,2282,2283,2285],{"class":1622,"line":1690},[1620,2284,1665],{"class":1626},[1620,2286,1784],{"class":1630},[1620,2288,2289,2292,2294,2296,2299],{"class":1622,"line":1700},[1620,2290,2291],{"class":1644},"      path",[1620,2293,1648],{"class":1626},[1620,2295,1651],{"class":1626},[1620,2297,2298],{"class":1654},"M10 80 C 30 20, 70 20, 90 80 S 110 20, 130 80",[1620,2300,1728],{"class":1626},[1620,2302,2303,2306,2308,2310,2313],{"class":1622,"line":1707},[1620,2304,2305],{"class":1644},"      view-box",[1620,2307,1648],{"class":1626},[1620,2309,1651],{"class":1626},[1620,2311,2312],{"class":1654},"0 0 140 100",[1620,2314,1728],{"class":1626},[1620,2316,2317,2320,2322,2324,2326,2329],{"class":1622,"line":1715},[1620,2318,2319],{"class":1626},"      :",[1620,2321,1883],{"class":1644},[1620,2323,1648],{"class":1626},[1620,2325,1651],{"class":1626},[1620,2327,2328],{"class":1890},"2",[1620,2330,1728],{"class":1626},[1620,2332,2333,2335,2337,2339,2342],{"class":1622,"line":1731},[1620,2334,1734],{"class":1644},[1620,2336,1648],{"class":1626},[1620,2338,1651],{"class":1626},[1620,2340,2341],{"class":1654},"mx-auto h-36 w-56 text-primary",[1620,2343,1728],{"class":1626},[1620,2345,2346],{"class":1622,"line":1746},[1620,2347,2348],{"class":1626},"    \u002F>\n",[1620,2350,2351],{"class":1622,"line":1752},[1620,2352,1704],{"emptyLinePlaceholder":1703},[1620,2354,2355,2357,2359,2361,2363,2365,2367,2369],{"class":1622,"line":1774},[1620,2356,1665],{"class":1626},[1620,2358,1595],{"class":1630},[1620,2360,1645],{"class":1644},[1620,2362,1648],{"class":1626},[1620,2364,1651],{"class":1626},[1620,2366,2272],{"class":1654},[1620,2368,1651],{"class":1626},[1620,2370,1771],{"class":1626},[1620,2372,2373,2375,2377],{"class":1622,"line":1779},[1620,2374,2025],{"class":1626},[1620,2376,1595],{"class":1630},[1620,2378,1633],{"class":1626},[1620,2380,2381,2383,2385],{"class":1622,"line":1787},[1620,2382,2035],{"class":1626},[1620,2384,1608],{"class":1630},[1620,2386,1633],{"class":1626},[2197,2388,2390],{"id":2389},"draw-once","Draw once",[1520,2392,2393,2394,2397],{},"With ",[1524,2395,2396],{},"once",", the path latches fully drawn at its furthest point and is not erased\nwhen you scroll back up — useful when the draw is a one-time entrance.",[1591,2399,2400,2406],{"label":1593},[1595,2401,1602,2403],{"className":2402},[1598,1599,1600,1601],[1604,2404],{"name":2405},"svg-draw-on-scroll-once",[1608,2407,2408],{"v-slot:code":1610},[1612,2409,2411],{"className":1614,"code":2410,"language":1616,"meta":1610,"style":1610},"\u003Ctemplate>\n  \u003Cdiv class=\"relative h-64 overflow-y-auto rounded-2xl border border-default\">\n    \u003Cdiv class=\"h-40\" \u002F>\n\n    \u003CMSvgDrawOnScroll\n      once\n      :paths=\"['M10 50 C 30 10, 70 90, 90 50']\"\n      view-box=\"0 0 100 100\"\n      stroke=\"var(--ui-primary)\"\n      class=\"mx-auto h-32 w-40\"\n    \u002F>\n\n    \u003Cdiv class=\"h-40\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1524,2412,2413,2421,2440,2458,2462,2468,2473,2496,2508,2521,2534,2538,2542,2560,2568],{"__ignoreMap":1610},[1620,2414,2415,2417,2419],{"class":1622,"line":1623},[1620,2416,1627],{"class":1626},[1620,2418,1608],{"class":1630},[1620,2420,1633],{"class":1626},[1620,2422,2423,2425,2427,2429,2431,2433,2436,2438],{"class":1622,"line":1636},[1620,2424,1639],{"class":1626},[1620,2426,1595],{"class":1630},[1620,2428,1645],{"class":1644},[1620,2430,1648],{"class":1626},[1620,2432,1651],{"class":1626},[1620,2434,2435],{"class":1654},"relative h-64 overflow-y-auto rounded-2xl border border-default",[1620,2437,1651],{"class":1626},[1620,2439,1633],{"class":1626},[1620,2441,2442,2444,2446,2448,2450,2452,2454,2456],{"class":1622,"line":1662},[1620,2443,1665],{"class":1626},[1620,2445,1595],{"class":1630},[1620,2447,1645],{"class":1644},[1620,2449,1648],{"class":1626},[1620,2451,1651],{"class":1626},[1620,2453,2272],{"class":1654},[1620,2455,1651],{"class":1626},[1620,2457,1771],{"class":1626},[1620,2459,2460],{"class":1622,"line":1683},[1620,2461,1704],{"emptyLinePlaceholder":1703},[1620,2463,2464,2466],{"class":1622,"line":1690},[1620,2465,1665],{"class":1626},[1620,2467,1784],{"class":1630},[1620,2469,2470],{"class":1622,"line":1700},[1620,2471,2472],{"class":1644},"      once\n",[1620,2474,2475,2477,2479,2481,2483,2485,2487,2490,2492,2494],{"class":1622,"line":1707},[1620,2476,2319],{"class":1626},[1620,2478,1538],{"class":1644},[1620,2480,1648],{"class":1626},[1620,2482,1651],{"class":1626},[1620,2484,1822],{"class":1626},[1620,2486,1825],{"class":1626},[1620,2488,2489],{"class":1654},"M10 50 C 30 10, 70 90, 90 50",[1620,2491,1825],{"class":1626},[1620,2493,1843],{"class":1626},[1620,2495,1728],{"class":1626},[1620,2497,2498,2500,2502,2504,2506],{"class":1622,"line":1715},[1620,2499,2305],{"class":1644},[1620,2501,1648],{"class":1626},[1620,2503,1651],{"class":1626},[1620,2505,1873],{"class":1654},[1620,2507,1728],{"class":1626},[1620,2509,2510,2513,2515,2517,2519],{"class":1622,"line":1731},[1620,2511,2512],{"class":1644},"      stroke",[1620,2514,1648],{"class":1626},[1620,2516,1651],{"class":1626},[1620,2518,1906],{"class":1654},[1620,2520,1728],{"class":1626},[1620,2522,2523,2525,2527,2529,2532],{"class":1622,"line":1746},[1620,2524,1734],{"class":1644},[1620,2526,1648],{"class":1626},[1620,2528,1651],{"class":1626},[1620,2530,2531],{"class":1654},"mx-auto h-32 w-40",[1620,2533,1728],{"class":1626},[1620,2535,2536],{"class":1622,"line":1752},[1620,2537,2348],{"class":1626},[1620,2539,2540],{"class":1622,"line":1774},[1620,2541,1704],{"emptyLinePlaceholder":1703},[1620,2543,2544,2546,2548,2550,2552,2554,2556,2558],{"class":1622,"line":1779},[1620,2545,1665],{"class":1626},[1620,2547,1595],{"class":1630},[1620,2549,1645],{"class":1644},[1620,2551,1648],{"class":1626},[1620,2553,1651],{"class":1626},[1620,2555,2272],{"class":1654},[1620,2557,1651],{"class":1626},[1620,2559,1771],{"class":1626},[1620,2561,2562,2564,2566],{"class":1622,"line":1787},[1620,2563,2025],{"class":1626},[1620,2565,1595],{"class":1630},[1620,2567,1633],{"class":1626},[1620,2569,2570,2572,2574],{"class":1622,"line":1810},[1620,2571,2035],{"class":1626},[1620,2573,1608],{"class":1630},[1620,2575,1633],{"class":1626},[1556,2577,2579],{"id":2578},"customize","Customize",[1520,2581,2582,2583,1833,2585,1833,2588,2591,2592,2594],{},"Adjust the path, ",[1524,2584,1553],{},[1524,2586,2587],{},"stroke",[1524,2589,2590],{},"strokeWidth"," and ",[1524,2593,2396],{}," live in the\nplayground below.",[1591,2596,2597,2603],{"label":1593},[1595,2598,1602,2600],{"className":2599},[1600],[1604,2601],{"name":2602},"svg-draw-on-scroll-custom",[1608,2604,2605],{"v-slot:code":1610},[2606,2607],"playground-code",{"name":2608},"SvgDrawOnScroll",[1556,2610,2612],{"id":2611},"props","Props",[2614,2615,2616,2627,2631,2641,2649,2659,2664,2675,2679],"component-props",{},[2617,2618,2620,2621,2623,2624,2626],"component-prop",{"name":1534,"type":2619},"string","A single path's ",[1524,2622,2209],{},". Ignored when ",[1524,2625,1538],{}," is also provided.",[2617,2628,2630],{"name":1538,"type":2629},"string[]","Multiple paths, drawn one after another across the scroll range. Each path gets\nan equal slice of progress, so four paths mean each one draws over a quarter of\nthe range.",[2617,2632,2634,2635,2637,2638,1554],{"name":1553,"type":2619,"default":2633},"'0 0 100 100'","The SVG ",[1524,2636,1553],{},". Match it to your path coordinates; the SVG scales to the\nwrapper with ",[1524,2639,2640],{},"preserveAspectRatio=\"xMidYMid meet\"",[2617,2642,2645,2646,2648],{"name":1815,"type":2643,"default":2644},"ScrollOffset","['start 0.9', 'end 0.6']","Motion ",[1524,2647,1530],{}," offset tuple for the draw. The default finishes the draw while\nthe artwork is still mid-viewport rather than on its way out.",[2617,2650,2652,2653,2655,2656,1554],{"name":1567,"type":2651},"MaybeComputedElementRef","A scrollable ancestor that drives the draw instead of the window. Must be passed\nas a getter (",[1524,2654,1579],{},"). Without it, several instances on one\npage all read the same page-level progress and their ranges overlap, so only the\nlast one appears to work. The container must be ",[1524,2657,2658],{},"position: relative",[2617,2660,2663],{"name":2396,"type":2661,"default":2662},"boolean","false","Freeze fully drawn once complete instead of undrawing on scroll-up. Implemented\nby tracking the high-water mark of progress.",[2617,2665,2667,2668,2671,2672,2674],{"name":2587,"type":2619,"default":2666},"'currentColor'","Stroke colour. Anything other than ",[1524,2669,2670],{},"currentColor"," is resolved through the theme\ncolour helper, so ",[1524,2673,1906],{}," and theme tokens work.",[2617,2676,2678],{"name":2590,"type":2677,"default":2328},"number","Stroke width in viewBox units.",[2617,2680,2682,2683,2686,2687,2690],{"name":2681,"type":2619},"class","Merged onto the root wrapper after ",[1524,2684,2685],{},"relative",". Give it an explicit size — the\ninner SVG is ",[1524,2688,2689],{},"h-full w-full",", so the wrapper drives the drawing area.",[1556,2692,2694],{"id":2693},"slots","Slots",[2696,2697,2698],"component-slots",{},[2699,2700,2701],"component-slot-row",{"name":1545},"Content that rides the tip of the stroke as it draws. It is positioned from the\npath's geometry, so only the marker's own appearance is up to you. When no\nmarker slot is provided, no marker element is rendered at all.",[1556,2703,2705],{"id":2704},"ui","UI",[1520,2707,2708,2709,2714,2715,2718,2719,1554],{},"This component's theme exposes the slots below. Override any of them per instance with the ",[1582,2710,2711,2713],{"href":21},[1524,2712,2704],{}," prop",", or app-wide under ",[1524,2716,2717],{},"ui.svgDrawOnScroll"," in ",[1524,2720,2721],{},"app.config.ts",[2614,2723,2724],{},[2617,2725,2727],{"name":2704,"type":2726},"object","Per-slot classes merged over the theme defaults.",[2696,2729,2730,2735,2740,2745],{},[2699,2731,2733],{"name":2732},"root",[1524,2734,2685],{},[2699,2736,2738],{"name":2737},"svg",[1524,2739,2689],{},[2699,2741,2742],{"name":1545},[1524,2743,2744],{},"pointer-events-none absolute top-0 left-0",[2699,2746,2748],{"name":2747},"markerInner",[1524,2749,2750],{},"-translate-x-1\u002F2 -translate-y-1\u002F2",[1556,2752,2754],{"id":2753},"accessibility","Accessibility",[1520,2756,2757,2758,2761,2762,2765,2766,2769],{},"The ",[1524,2759,2760],{},"\u003Csvg>"," is marked ",[1524,2763,2764],{},"aria-hidden=\"true\""," and the marker wrapper is also\n",[1524,2767,2768],{},"aria-hidden",", so neither the artwork nor the marker is exposed to assistive\ntechnology. This component is decorative by design — if the graphic carries\nmeaning, describe it in surrounding text.",[1520,2771,2772,2773,2776,2777,2780,2781,2784],{},"There are no roles, live regions, focus handling or keyboard interaction. Under\n",[1524,2774,2775],{},"prefers-reduced-motion"," the paths are drawn in full immediately (",[1524,2778,2779],{},"pathLength"," of\n",[1524,2782,2783],{},"1",") and the marker is pinned to the end of the path, so the artwork is presented\ncomplete rather than animated.",[1556,2786,2788],{"id":2787},"performance","Performance",[2790,2791,2792,2813,2824,2841],"ul",{},[2793,2794,2795,2796,2798,2799,2802,2803,1833,2806,1833,2809,2812],"li",{},"One ",[1524,2797,1530],{}," on the wrapper (or your container) and one ",[1524,2800,2801],{},"useSpring","\n(",[1524,2804,2805],{},"damping: 28",[1524,2807,2808],{},"mass: 0.4",[1524,2810,2811],{},"stiffness: 240",") for the whole component.",[2793,2814,2815,2816,2819,2820,2823],{},"The spring value is read once into a plain ref through a single\n",[1524,2817,2818],{},"useMotionValueEvent",", and each path's dash offset is then a pure function of\nthat one number — rather than a ",[1524,2821,2822],{},"useTransform"," per path, which would\nre-subscribe on every recomputation and leak.",[2793,2825,2826,2829,2830,2833,2834,2836,2837,2840],{},[1524,2827,2828],{},"pathLength=\"1\""," on each path normalises the dash units, so a ",[1524,2831,2832],{},"strokeDashoffset","\nof ",[1524,2835,2783],{}," hides the stroke and ",[1524,2838,2839],{},"0"," reveals it. The browser paints it as a normal\ndash animation without re-measuring path lengths.",[2793,2842,2843,2844,2847,2848,2591,2851,2854],{},"The marker reads geometry on change and on ",[1524,2845,2846],{},"ResizeObserver"," updates, not per\nframe: ",[1524,2849,2850],{},"getTotalLength",[1524,2852,2853],{},"getScreenCTM"," are called only when the spring value\nor the wrapper size changes.",[1556,2856,1585],{"id":2857},"notes",[2197,2859,2861,2863],{"id":2860},"container-must-be-a-getter",[1524,2862,1567],{}," must be a getter",[1520,2865,2866,2867,2869,2870,2873,2874,2876,2877,2880,2881,2883,2884,2887],{},"Pass ",[1524,2868,1579],{},", never ",[1524,2871,2872],{},":container=\"panel\"",". A plain binding is\nunwrapped by the template and captured as ",[1524,2875,2105],{}," during ",[1524,2878,2879],{},"setup",", after which\nnothing re-reads it and ",[1524,2882,1530],{}," quietly falls back to the window. The getter\nis invoked inside Motion's own ",[1524,2885,2886],{},"flush: 'post'"," effect, where your ref is a tracked\ndependency, so it resolves to the mounted element and re-resolves if it changes.",[2197,2889,2891,2892],{"id":2890},"why-the-marker-is-measured-not-positioned-with-offset-path","Why the marker is measured, not positioned with ",[1524,2893,1549],{},[1520,2895,2896,2899,2900,2902,2903,2905,2906,2908,2909,2591,2912,2914],{},[1524,2897,2898],{},"offset-path: path()"," measures in the element's CSS pixel space, but the path's ",[1524,2901,2209],{},"\nis written in viewBox units. Any ",[1524,2904,1553],{}," that is not 1:1 with the rendered box —\nthe normal case, since the SVG scales with ",[1524,2907,2216],{}," — would leave the\nmarker floating away from the stroke. Instead the component resolves the tip\nthrough ",[1524,2910,2911],{},"getPointAtLength",[1524,2913,2853],{},", the same transform the browser used\nto paint the line, so the marker stays attached at any scale.",[2916,2917,2918,2919,2921],"tip",{},"Several paths in one SVG only need one marker. The component joins them into a\nsingle hidden measuring path, so the marker rides the combined geometry as the\n",[1524,2920,1538],{}," draw in sequence.",[2923,2924,2925],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}",{"title":1610,"searchDepth":1636,"depth":1636,"links":2927},[2928,2929,2933,2934,2935,2936,2937,2938,2939],{"id":1558,"depth":1636,"text":16},{"id":2194,"depth":1636,"text":2195,"children":2930},[2931,2932],{"id":2199,"depth":1662,"text":2200},{"id":2389,"depth":1662,"text":2390},{"id":2578,"depth":1636,"text":2579},{"id":2611,"depth":1636,"text":2612},{"id":2693,"depth":1636,"text":2694},{"id":2704,"depth":1636,"text":2705},{"id":2753,"depth":1636,"text":2754},{"id":2787,"depth":1636,"text":2788},{"id":2857,"depth":1636,"text":1585,"children":2940},[2941,2943],{"id":2860,"depth":1662,"text":2942},"container must be a getter",{"id":2890,"depth":1662,"text":2944},"Why the marker is measured, not positioned with offset-path","An SVG path that draws itself as you scroll, with an optional marker riding the stroke.","md",null,{},{"title":1039,"description":2945},"WOlFEZuqrmnb-jhxuoIYPvUbpeip46iZPg4g3f2MBHk",[2952,2954],{"title":1035,"path":1036,"stem":1037,"description":2953,"children":-1},"Text that drifts and accelerates with the speed and direction of your scroll.",{"title":1049,"path":1050,"stem":1051,"description":2955,"children":-1},"A Nuxt UI avatar group that fans its members apart on hover, optionally overlapping them by a ratio of their size.",1793501817940]