[{"data":1,"prerenderedAt":4078},["ShallowReactive",2],{"navigation_docs":3,"-components-scroll-in-view":1514,"-components-scroll-in-view-surround":4073},[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":1011,"body":1516,"description":4067,"extension":4068,"links":4069,"meta":4070,"navigation":1734,"path":1012,"seo":4071,"stem":1013,"__hash__":4072},"docs\u002F3.components\u002Fscroll\u002Fin-view.md",{"type":1517,"value":1518,"toc":4051},"minimark",[1519,1536,1540,1555,2488,2492,2496,2518,2847,2851,2866,3102,3106,3113,3400,3404,3418,3814,3818,3826,3840,3844,3894,3898,3919,3923,3931,3935,3952,3958,3963,3967,3977,3980,3991,3995,4036,4047],[1520,1521,1522,1523,1527,1528,1531,1532,1535],"p",{},"The InView component animates its content when it scrolls into the viewport. It\nwatches the element with VueUse's ",[1524,1525,1526],"code",{},"useElementVisibility"," (backed by the\nIntersectionObserver API) and swaps between your ",[1524,1529,1530],{},"hidden"," and ",[1524,1533,1534],{},"visible"," variants,\nso you can drive any entrance animation — fade, slide, scale — from scroll\nposition.",[1537,1538,16],"h2",{"id":1539},"usage",[1520,1541,1542,1543,1546,1547,1550,1551,1554],{},"Wrap the content you want to animate and let the defaults do the rest: it fades\nfrom ",[1524,1544,1545],{},"opacity: 0"," to ",[1524,1548,1549],{},"opacity: 1"," over ",[1524,1552,1553],{},"0.6s"," the first time it enters the\nviewport.",[1556,1557,1559,1572],"code-preview",{"label":1558},"Preview",[1560,1561,1567,1568],"div",{"className":1562},[1563,1564,1565,1566],"flex","justify-center","w-full","h-full","  ",[1569,1570],"component-example",{"name":1571},"in-view-basic",[1573,1574,1576],"template",{"v-slot:code":1575},"",[1577,1578,1582],"pre",{"className":1579,"code":1580,"language":1581,"meta":1575,"style":1575},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"space-y-8 p-6 max-w-3xl mx-auto\">\n    \u003Cdiv class=\"text-center mb-12\">\n      \u003Ch2 class=\"text-4xl font-bold text-highlighted mb-4\">\n        Scroll to Reveal\n      \u003C\u002Fh2>\n      \u003Cp class=\"text-muted text-lg\">\n        Content that fades in beautifully when it comes into view\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003CMInView>\n      \u003Cdiv class=\"p-8 bg-default rounded-xl shadow-xl border border-default hover:shadow-2xl transition-shadow\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"w-14 h-14 rounded-lg bg-primary\u002F10 dark:bg-primary\u002F70 flex items-center justify-center mr-5 flex-shrink-0\">\n            \u003CUIcon\n              name=\"i-lucide-eye\"\n              class=\"w-7 h-7 text-primary\"\n            \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Ch3 class=\"text-2xl font-semibold text-highlighted mb-3\">\n              InView Animation\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-muted text-lg leading-relaxed\">\n              This content smoothly fades in when it enters your viewport, creating a polished\n              scrolling experience that draws attention to important elements.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FMInView>\n\n    \u003CMInView>\n      \u003Cdiv class=\"p-8 bg-default rounded-xl shadow-xl border border-default hover:shadow-2xl transition-shadow mt-8\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"w-14 h-14 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-5 flex-shrink-0\">\n            \u003CUIcon\n              name=\"i-lucide-sparkles\"\n              class=\"w-7 h-7 text-purple-600 dark:text-purple-400\"\n            \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Ch3 class=\"text-2xl font-semibold text-highlighted mb-3\">\n              Enhanced Visibility\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-muted text-lg leading-relaxed\">\n              Perfect for showcasing features, testimonials, or important information\n              that you want to highlight as users scroll through your content.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FMInView>\n\n    \u003CMInView>\n      \u003Cdiv class=\"p-8 bg-default rounded-xl shadow-xl border border-default hover:shadow-2xl transition-shadow mt-8\">\n        \u003Cdiv class=\"flex items-start\">\n          \u003Cdiv class=\"w-14 h-14 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center mr-5 flex-shrink-0\">\n            \u003CUIcon\n              name=\"i-lucide-zap\"\n              class=\"w-7 h-7 text-green-600 dark:text-green-400\"\n            \u002F>\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Ch3 class=\"text-2xl font-semibold text-highlighted mb-3\">\n              Performance Focused\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-muted text-lg leading-relaxed\">\n              Optimized for smooth performance with minimal impact on your page load times,\n              ensuring a seamless user experience across all devices.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002FMInView>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[1524,1583,1584,1599,1625,1646,1667,1674,1684,1704,1710,1719,1729,1736,1746,1766,1787,1808,1817,1833,1848,1854,1864,1873,1894,1900,1910,1930,1936,1942,1951,1960,1970,1979,1988,1993,2002,2022,2041,2061,2068,2081,2095,2100,2109,2118,2137,2143,2152,2171,2177,2183,2192,2201,2210,2219,2228,2233,2242,2261,2280,2300,2307,2321,2335,2340,2349,2358,2377,2383,2392,2411,2417,2423,2432,2441,2450,2459,2468,2478],{"__ignoreMap":1575},[1585,1586,1589,1593,1596],"span",{"class":1587,"line":1588},"line",1,[1585,1590,1592],{"class":1591},"sMK4o","\u003C",[1585,1594,1573],{"class":1595},"swJcz",[1585,1597,1598],{"class":1591},">\n",[1585,1600,1602,1605,1607,1611,1614,1617,1621,1623],{"class":1587,"line":1601},2,[1585,1603,1604],{"class":1591},"  \u003C",[1585,1606,1560],{"class":1595},[1585,1608,1610],{"class":1609},"spNyl"," class",[1585,1612,1613],{"class":1591},"=",[1585,1615,1616],{"class":1591},"\"",[1585,1618,1620],{"class":1619},"sfazB","space-y-8 p-6 max-w-3xl mx-auto",[1585,1622,1616],{"class":1591},[1585,1624,1598],{"class":1591},[1585,1626,1628,1631,1633,1635,1637,1639,1642,1644],{"class":1587,"line":1627},3,[1585,1629,1630],{"class":1591},"    \u003C",[1585,1632,1560],{"class":1595},[1585,1634,1610],{"class":1609},[1585,1636,1613],{"class":1591},[1585,1638,1616],{"class":1591},[1585,1640,1641],{"class":1619},"text-center mb-12",[1585,1643,1616],{"class":1591},[1585,1645,1598],{"class":1591},[1585,1647,1649,1652,1654,1656,1658,1660,1663,1665],{"class":1587,"line":1648},4,[1585,1650,1651],{"class":1591},"      \u003C",[1585,1653,1537],{"class":1595},[1585,1655,1610],{"class":1609},[1585,1657,1613],{"class":1591},[1585,1659,1616],{"class":1591},[1585,1661,1662],{"class":1619},"text-4xl font-bold text-highlighted mb-4",[1585,1664,1616],{"class":1591},[1585,1666,1598],{"class":1591},[1585,1668,1670],{"class":1587,"line":1669},5,[1585,1671,1673],{"class":1672},"sTEyZ","        Scroll to Reveal\n",[1585,1675,1677,1680,1682],{"class":1587,"line":1676},6,[1585,1678,1679],{"class":1591},"      \u003C\u002F",[1585,1681,1537],{"class":1595},[1585,1683,1598],{"class":1591},[1585,1685,1687,1689,1691,1693,1695,1697,1700,1702],{"class":1587,"line":1686},7,[1585,1688,1651],{"class":1591},[1585,1690,1520],{"class":1595},[1585,1692,1610],{"class":1609},[1585,1694,1613],{"class":1591},[1585,1696,1616],{"class":1591},[1585,1698,1699],{"class":1619},"text-muted text-lg",[1585,1701,1616],{"class":1591},[1585,1703,1598],{"class":1591},[1585,1705,1707],{"class":1587,"line":1706},8,[1585,1708,1709],{"class":1672},"        Content that fades in beautifully when it comes into view\n",[1585,1711,1713,1715,1717],{"class":1587,"line":1712},9,[1585,1714,1679],{"class":1591},[1585,1716,1520],{"class":1595},[1585,1718,1598],{"class":1591},[1585,1720,1722,1725,1727],{"class":1587,"line":1721},10,[1585,1723,1724],{"class":1591},"    \u003C\u002F",[1585,1726,1560],{"class":1595},[1585,1728,1598],{"class":1591},[1585,1730,1732],{"class":1587,"line":1731},11,[1585,1733,1735],{"emptyLinePlaceholder":1734},true,"\n",[1585,1737,1739,1741,1744],{"class":1587,"line":1738},12,[1585,1740,1630],{"class":1591},[1585,1742,1743],{"class":1595},"MInView",[1585,1745,1598],{"class":1591},[1585,1747,1749,1751,1753,1755,1757,1759,1762,1764],{"class":1587,"line":1748},13,[1585,1750,1651],{"class":1591},[1585,1752,1560],{"class":1595},[1585,1754,1610],{"class":1609},[1585,1756,1613],{"class":1591},[1585,1758,1616],{"class":1591},[1585,1760,1761],{"class":1619},"p-8 bg-default rounded-xl shadow-xl border border-default hover:shadow-2xl transition-shadow",[1585,1763,1616],{"class":1591},[1585,1765,1598],{"class":1591},[1585,1767,1769,1772,1774,1776,1778,1780,1783,1785],{"class":1587,"line":1768},14,[1585,1770,1771],{"class":1591},"        \u003C",[1585,1773,1560],{"class":1595},[1585,1775,1610],{"class":1609},[1585,1777,1613],{"class":1591},[1585,1779,1616],{"class":1591},[1585,1781,1782],{"class":1619},"flex items-start",[1585,1784,1616],{"class":1591},[1585,1786,1598],{"class":1591},[1585,1788,1790,1793,1795,1797,1799,1801,1804,1806],{"class":1587,"line":1789},15,[1585,1791,1792],{"class":1591},"          \u003C",[1585,1794,1560],{"class":1595},[1585,1796,1610],{"class":1609},[1585,1798,1613],{"class":1591},[1585,1800,1616],{"class":1591},[1585,1802,1803],{"class":1619},"w-14 h-14 rounded-lg bg-primary\u002F10 dark:bg-primary\u002F70 flex items-center justify-center mr-5 flex-shrink-0",[1585,1805,1616],{"class":1591},[1585,1807,1598],{"class":1591},[1585,1809,1811,1814],{"class":1587,"line":1810},16,[1585,1812,1813],{"class":1591},"            \u003C",[1585,1815,1816],{"class":1595},"UIcon\n",[1585,1818,1820,1823,1825,1827,1830],{"class":1587,"line":1819},17,[1585,1821,1822],{"class":1609},"              name",[1585,1824,1613],{"class":1591},[1585,1826,1616],{"class":1591},[1585,1828,1829],{"class":1619},"i-lucide-eye",[1585,1831,1832],{"class":1591},"\"\n",[1585,1834,1836,1839,1841,1843,1846],{"class":1587,"line":1835},18,[1585,1837,1838],{"class":1609},"              class",[1585,1840,1613],{"class":1591},[1585,1842,1616],{"class":1591},[1585,1844,1845],{"class":1619},"w-7 h-7 text-primary",[1585,1847,1832],{"class":1591},[1585,1849,1851],{"class":1587,"line":1850},19,[1585,1852,1853],{"class":1591},"            \u002F>\n",[1585,1855,1857,1860,1862],{"class":1587,"line":1856},20,[1585,1858,1859],{"class":1591},"          \u003C\u002F",[1585,1861,1560],{"class":1595},[1585,1863,1598],{"class":1591},[1585,1865,1867,1869,1871],{"class":1587,"line":1866},21,[1585,1868,1792],{"class":1591},[1585,1870,1560],{"class":1595},[1585,1872,1598],{"class":1591},[1585,1874,1876,1878,1881,1883,1885,1887,1890,1892],{"class":1587,"line":1875},22,[1585,1877,1813],{"class":1591},[1585,1879,1880],{"class":1595},"h3",[1585,1882,1610],{"class":1609},[1585,1884,1613],{"class":1591},[1585,1886,1616],{"class":1591},[1585,1888,1889],{"class":1619},"text-2xl font-semibold text-highlighted mb-3",[1585,1891,1616],{"class":1591},[1585,1893,1598],{"class":1591},[1585,1895,1897],{"class":1587,"line":1896},23,[1585,1898,1899],{"class":1672},"              InView Animation\n",[1585,1901,1903,1906,1908],{"class":1587,"line":1902},24,[1585,1904,1905],{"class":1591},"            \u003C\u002F",[1585,1907,1880],{"class":1595},[1585,1909,1598],{"class":1591},[1585,1911,1913,1915,1917,1919,1921,1923,1926,1928],{"class":1587,"line":1912},25,[1585,1914,1813],{"class":1591},[1585,1916,1520],{"class":1595},[1585,1918,1610],{"class":1609},[1585,1920,1613],{"class":1591},[1585,1922,1616],{"class":1591},[1585,1924,1925],{"class":1619},"text-muted text-lg leading-relaxed",[1585,1927,1616],{"class":1591},[1585,1929,1598],{"class":1591},[1585,1931,1933],{"class":1587,"line":1932},26,[1585,1934,1935],{"class":1672},"              This content smoothly fades in when it enters your viewport, creating a polished\n",[1585,1937,1939],{"class":1587,"line":1938},27,[1585,1940,1941],{"class":1672},"              scrolling experience that draws attention to important elements.\n",[1585,1943,1945,1947,1949],{"class":1587,"line":1944},28,[1585,1946,1905],{"class":1591},[1585,1948,1520],{"class":1595},[1585,1950,1598],{"class":1591},[1585,1952,1954,1956,1958],{"class":1587,"line":1953},29,[1585,1955,1859],{"class":1591},[1585,1957,1560],{"class":1595},[1585,1959,1598],{"class":1591},[1585,1961,1963,1966,1968],{"class":1587,"line":1962},30,[1585,1964,1965],{"class":1591},"        \u003C\u002F",[1585,1967,1560],{"class":1595},[1585,1969,1598],{"class":1591},[1585,1971,1973,1975,1977],{"class":1587,"line":1972},31,[1585,1974,1679],{"class":1591},[1585,1976,1560],{"class":1595},[1585,1978,1598],{"class":1591},[1585,1980,1982,1984,1986],{"class":1587,"line":1981},32,[1585,1983,1724],{"class":1591},[1585,1985,1743],{"class":1595},[1585,1987,1598],{"class":1591},[1585,1989,1991],{"class":1587,"line":1990},33,[1585,1992,1735],{"emptyLinePlaceholder":1734},[1585,1994,1996,1998,2000],{"class":1587,"line":1995},34,[1585,1997,1630],{"class":1591},[1585,1999,1743],{"class":1595},[1585,2001,1598],{"class":1591},[1585,2003,2005,2007,2009,2011,2013,2015,2018,2020],{"class":1587,"line":2004},35,[1585,2006,1651],{"class":1591},[1585,2008,1560],{"class":1595},[1585,2010,1610],{"class":1609},[1585,2012,1613],{"class":1591},[1585,2014,1616],{"class":1591},[1585,2016,2017],{"class":1619},"p-8 bg-default rounded-xl shadow-xl border border-default hover:shadow-2xl transition-shadow mt-8",[1585,2019,1616],{"class":1591},[1585,2021,1598],{"class":1591},[1585,2023,2025,2027,2029,2031,2033,2035,2037,2039],{"class":1587,"line":2024},36,[1585,2026,1771],{"class":1591},[1585,2028,1560],{"class":1595},[1585,2030,1610],{"class":1609},[1585,2032,1613],{"class":1591},[1585,2034,1616],{"class":1591},[1585,2036,1782],{"class":1619},[1585,2038,1616],{"class":1591},[1585,2040,1598],{"class":1591},[1585,2042,2044,2046,2048,2050,2052,2054,2057,2059],{"class":1587,"line":2043},37,[1585,2045,1792],{"class":1591},[1585,2047,1560],{"class":1595},[1585,2049,1610],{"class":1609},[1585,2051,1613],{"class":1591},[1585,2053,1616],{"class":1591},[1585,2055,2056],{"class":1619},"w-14 h-14 rounded-lg bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-5 flex-shrink-0",[1585,2058,1616],{"class":1591},[1585,2060,1598],{"class":1591},[1585,2062,2064,2066],{"class":1587,"line":2063},38,[1585,2065,1813],{"class":1591},[1585,2067,1816],{"class":1595},[1585,2069,2071,2073,2075,2077,2079],{"class":1587,"line":2070},39,[1585,2072,1822],{"class":1609},[1585,2074,1613],{"class":1591},[1585,2076,1616],{"class":1591},[1585,2078,64],{"class":1619},[1585,2080,1832],{"class":1591},[1585,2082,2084,2086,2088,2090,2093],{"class":1587,"line":2083},40,[1585,2085,1838],{"class":1609},[1585,2087,1613],{"class":1591},[1585,2089,1616],{"class":1591},[1585,2091,2092],{"class":1619},"w-7 h-7 text-purple-600 dark:text-purple-400",[1585,2094,1832],{"class":1591},[1585,2096,2098],{"class":1587,"line":2097},41,[1585,2099,1853],{"class":1591},[1585,2101,2103,2105,2107],{"class":1587,"line":2102},42,[1585,2104,1859],{"class":1591},[1585,2106,1560],{"class":1595},[1585,2108,1598],{"class":1591},[1585,2110,2112,2114,2116],{"class":1587,"line":2111},43,[1585,2113,1792],{"class":1591},[1585,2115,1560],{"class":1595},[1585,2117,1598],{"class":1591},[1585,2119,2121,2123,2125,2127,2129,2131,2133,2135],{"class":1587,"line":2120},44,[1585,2122,1813],{"class":1591},[1585,2124,1880],{"class":1595},[1585,2126,1610],{"class":1609},[1585,2128,1613],{"class":1591},[1585,2130,1616],{"class":1591},[1585,2132,1889],{"class":1619},[1585,2134,1616],{"class":1591},[1585,2136,1598],{"class":1591},[1585,2138,2140],{"class":1587,"line":2139},45,[1585,2141,2142],{"class":1672},"              Enhanced Visibility\n",[1585,2144,2146,2148,2150],{"class":1587,"line":2145},46,[1585,2147,1905],{"class":1591},[1585,2149,1880],{"class":1595},[1585,2151,1598],{"class":1591},[1585,2153,2155,2157,2159,2161,2163,2165,2167,2169],{"class":1587,"line":2154},47,[1585,2156,1813],{"class":1591},[1585,2158,1520],{"class":1595},[1585,2160,1610],{"class":1609},[1585,2162,1613],{"class":1591},[1585,2164,1616],{"class":1591},[1585,2166,1925],{"class":1619},[1585,2168,1616],{"class":1591},[1585,2170,1598],{"class":1591},[1585,2172,2174],{"class":1587,"line":2173},48,[1585,2175,2176],{"class":1672},"              Perfect for showcasing features, testimonials, or important information\n",[1585,2178,2180],{"class":1587,"line":2179},49,[1585,2181,2182],{"class":1672},"              that you want to highlight as users scroll through your content.\n",[1585,2184,2186,2188,2190],{"class":1587,"line":2185},50,[1585,2187,1905],{"class":1591},[1585,2189,1520],{"class":1595},[1585,2191,1598],{"class":1591},[1585,2193,2195,2197,2199],{"class":1587,"line":2194},51,[1585,2196,1859],{"class":1591},[1585,2198,1560],{"class":1595},[1585,2200,1598],{"class":1591},[1585,2202,2204,2206,2208],{"class":1587,"line":2203},52,[1585,2205,1965],{"class":1591},[1585,2207,1560],{"class":1595},[1585,2209,1598],{"class":1591},[1585,2211,2213,2215,2217],{"class":1587,"line":2212},53,[1585,2214,1679],{"class":1591},[1585,2216,1560],{"class":1595},[1585,2218,1598],{"class":1591},[1585,2220,2222,2224,2226],{"class":1587,"line":2221},54,[1585,2223,1724],{"class":1591},[1585,2225,1743],{"class":1595},[1585,2227,1598],{"class":1591},[1585,2229,2231],{"class":1587,"line":2230},55,[1585,2232,1735],{"emptyLinePlaceholder":1734},[1585,2234,2236,2238,2240],{"class":1587,"line":2235},56,[1585,2237,1630],{"class":1591},[1585,2239,1743],{"class":1595},[1585,2241,1598],{"class":1591},[1585,2243,2245,2247,2249,2251,2253,2255,2257,2259],{"class":1587,"line":2244},57,[1585,2246,1651],{"class":1591},[1585,2248,1560],{"class":1595},[1585,2250,1610],{"class":1609},[1585,2252,1613],{"class":1591},[1585,2254,1616],{"class":1591},[1585,2256,2017],{"class":1619},[1585,2258,1616],{"class":1591},[1585,2260,1598],{"class":1591},[1585,2262,2264,2266,2268,2270,2272,2274,2276,2278],{"class":1587,"line":2263},58,[1585,2265,1771],{"class":1591},[1585,2267,1560],{"class":1595},[1585,2269,1610],{"class":1609},[1585,2271,1613],{"class":1591},[1585,2273,1616],{"class":1591},[1585,2275,1782],{"class":1619},[1585,2277,1616],{"class":1591},[1585,2279,1598],{"class":1591},[1585,2281,2283,2285,2287,2289,2291,2293,2296,2298],{"class":1587,"line":2282},59,[1585,2284,1792],{"class":1591},[1585,2286,1560],{"class":1595},[1585,2288,1610],{"class":1609},[1585,2290,1613],{"class":1591},[1585,2292,1616],{"class":1591},[1585,2294,2295],{"class":1619},"w-14 h-14 rounded-lg bg-green-100 dark:bg-green-900 flex items-center justify-center mr-5 flex-shrink-0",[1585,2297,1616],{"class":1591},[1585,2299,1598],{"class":1591},[1585,2301,2303,2305],{"class":1587,"line":2302},60,[1585,2304,1813],{"class":1591},[1585,2306,1816],{"class":1595},[1585,2308,2310,2312,2314,2316,2319],{"class":1587,"line":2309},61,[1585,2311,1822],{"class":1609},[1585,2313,1613],{"class":1591},[1585,2315,1616],{"class":1591},[1585,2317,2318],{"class":1619},"i-lucide-zap",[1585,2320,1832],{"class":1591},[1585,2322,2324,2326,2328,2330,2333],{"class":1587,"line":2323},62,[1585,2325,1838],{"class":1609},[1585,2327,1613],{"class":1591},[1585,2329,1616],{"class":1591},[1585,2331,2332],{"class":1619},"w-7 h-7 text-green-600 dark:text-green-400",[1585,2334,1832],{"class":1591},[1585,2336,2338],{"class":1587,"line":2337},63,[1585,2339,1853],{"class":1591},[1585,2341,2343,2345,2347],{"class":1587,"line":2342},64,[1585,2344,1859],{"class":1591},[1585,2346,1560],{"class":1595},[1585,2348,1598],{"class":1591},[1585,2350,2352,2354,2356],{"class":1587,"line":2351},65,[1585,2353,1792],{"class":1591},[1585,2355,1560],{"class":1595},[1585,2357,1598],{"class":1591},[1585,2359,2361,2363,2365,2367,2369,2371,2373,2375],{"class":1587,"line":2360},66,[1585,2362,1813],{"class":1591},[1585,2364,1880],{"class":1595},[1585,2366,1610],{"class":1609},[1585,2368,1613],{"class":1591},[1585,2370,1616],{"class":1591},[1585,2372,1889],{"class":1619},[1585,2374,1616],{"class":1591},[1585,2376,1598],{"class":1591},[1585,2378,2380],{"class":1587,"line":2379},67,[1585,2381,2382],{"class":1672},"              Performance Focused\n",[1585,2384,2386,2388,2390],{"class":1587,"line":2385},68,[1585,2387,1905],{"class":1591},[1585,2389,1880],{"class":1595},[1585,2391,1598],{"class":1591},[1585,2393,2395,2397,2399,2401,2403,2405,2407,2409],{"class":1587,"line":2394},69,[1585,2396,1813],{"class":1591},[1585,2398,1520],{"class":1595},[1585,2400,1610],{"class":1609},[1585,2402,1613],{"class":1591},[1585,2404,1616],{"class":1591},[1585,2406,1925],{"class":1619},[1585,2408,1616],{"class":1591},[1585,2410,1598],{"class":1591},[1585,2412,2414],{"class":1587,"line":2413},70,[1585,2415,2416],{"class":1672},"              Optimized for smooth performance with minimal impact on your page load times,\n",[1585,2418,2420],{"class":1587,"line":2419},71,[1585,2421,2422],{"class":1672},"              ensuring a seamless user experience across all devices.\n",[1585,2424,2426,2428,2430],{"class":1587,"line":2425},72,[1585,2427,1905],{"class":1591},[1585,2429,1520],{"class":1595},[1585,2431,1598],{"class":1591},[1585,2433,2435,2437,2439],{"class":1587,"line":2434},73,[1585,2436,1859],{"class":1591},[1585,2438,1560],{"class":1595},[1585,2440,1598],{"class":1591},[1585,2442,2444,2446,2448],{"class":1587,"line":2443},74,[1585,2445,1965],{"class":1591},[1585,2447,1560],{"class":1595},[1585,2449,1598],{"class":1591},[1585,2451,2453,2455,2457],{"class":1587,"line":2452},75,[1585,2454,1679],{"class":1591},[1585,2456,1560],{"class":1595},[1585,2458,1598],{"class":1591},[1585,2460,2462,2464,2466],{"class":1587,"line":2461},76,[1585,2463,1724],{"class":1591},[1585,2465,1743],{"class":1595},[1585,2467,1598],{"class":1591},[1585,2469,2471,2474,2476],{"class":1587,"line":2470},77,[1585,2472,2473],{"class":1591},"  \u003C\u002F",[1585,2475,1560],{"class":1595},[1585,2477,1598],{"class":1591},[1585,2479,2481,2484,2486],{"class":1587,"line":2480},78,[1585,2482,2483],{"class":1591},"\u003C\u002F",[1585,2485,1573],{"class":1595},[1585,2487,1598],{"class":1591},[1537,2489,2491],{"id":2490},"examples","Examples",[1880,2493,2495],{"id":2494},"custom-variants-and-transition","Custom variants and transition",[1520,2497,2498,2499,1531,2502,2505,2506,2509,2510,2513,2514,2517],{},"Supply your own ",[1524,2500,2501],{},"variants",[1524,2503,2504],{},"transition"," to change what the entrance looks\nlike. When ",[1524,2507,2508],{},"threshold"," is not ",[1524,2511,2512],{},"0.3"," you control the trigger point, and the\nelement animates the first time it is ",[1524,2515,2516],{},"30%"," visible.",[1556,2519,2520,2526],{"label":1558},[1560,2521,1567,2523],{"className":2522},[1565],[1569,2524],{"name":2525},"in-view-with-custom-animation",[1573,2527,2528],{"v-slot:code":1575},[1577,2529,2531],{"className":1579,"code":2530,"language":1581,"meta":1575,"style":1575},"\u003Ctemplate>\n  \u003Cdiv class=\"min-h-screen space-y-8 p-4\">\n    \u003Cdiv class=\"h-64\" \u002F>\n\n    \u003CMInView\n      :view-options=\"{ threshold: 0.3 }\"\n      :variants=\"{\n        hidden: { opacity: 0, y: 20 },\n        visible: { opacity: 1, y: 0 },\n      }\"\n      :transition=\"{\n        duration: 0.5,\n        ease: 'easeOut',\n      }\"\n    >\n      \u003Cdiv class=\"rounded-lg bg-gradient-to-r from-blue-500 to-indigo-500 p-6 text-white\">\n        \u003Ch3 class=\"mb-2 text-lg font-medium\">\n          Tailored motion\n        \u003C\u002Fh3>\n        \u003Cp>This element uses custom variants for its animation.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002FMInView>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1524,2532,2533,2541,2560,2580,2584,2591,2619,2632,2662,2686,2693,2705,2718,2735,2741,2746,2765,2784,2789,2797,2815,2823,2831,2839],{"__ignoreMap":1575},[1585,2534,2535,2537,2539],{"class":1587,"line":1588},[1585,2536,1592],{"class":1591},[1585,2538,1573],{"class":1595},[1585,2540,1598],{"class":1591},[1585,2542,2543,2545,2547,2549,2551,2553,2556,2558],{"class":1587,"line":1601},[1585,2544,1604],{"class":1591},[1585,2546,1560],{"class":1595},[1585,2548,1610],{"class":1609},[1585,2550,1613],{"class":1591},[1585,2552,1616],{"class":1591},[1585,2554,2555],{"class":1619},"min-h-screen space-y-8 p-4",[1585,2557,1616],{"class":1591},[1585,2559,1598],{"class":1591},[1585,2561,2562,2564,2566,2568,2570,2572,2575,2577],{"class":1587,"line":1627},[1585,2563,1630],{"class":1591},[1585,2565,1560],{"class":1595},[1585,2567,1610],{"class":1609},[1585,2569,1613],{"class":1591},[1585,2571,1616],{"class":1591},[1585,2573,2574],{"class":1619},"h-64",[1585,2576,1616],{"class":1591},[1585,2578,2579],{"class":1591}," \u002F>\n",[1585,2581,2582],{"class":1587,"line":1648},[1585,2583,1735],{"emptyLinePlaceholder":1734},[1585,2585,2586,2588],{"class":1587,"line":1669},[1585,2587,1630],{"class":1591},[1585,2589,2590],{"class":1595},"MInView\n",[1585,2592,2593,2596,2599,2601,2603,2606,2608,2611,2614,2617],{"class":1587,"line":1676},[1585,2594,2595],{"class":1591},"      :",[1585,2597,2598],{"class":1609},"view-options",[1585,2600,1613],{"class":1591},[1585,2602,1616],{"class":1591},[1585,2604,2605],{"class":1591},"{ ",[1585,2607,2508],{"class":1595},[1585,2609,2610],{"class":1591},": ",[1585,2612,2512],{"class":2613},"sbssI",[1585,2615,2616],{"class":1591}," }",[1585,2618,1832],{"class":1591},[1585,2620,2621,2623,2625,2627,2629],{"class":1587,"line":1686},[1585,2622,2595],{"class":1591},[1585,2624,2501],{"class":1609},[1585,2626,1613],{"class":1591},[1585,2628,1616],{"class":1591},[1585,2630,2631],{"class":1591},"{\n",[1585,2633,2634,2637,2640,2643,2645,2648,2651,2654,2656,2659],{"class":1587,"line":1706},[1585,2635,2636],{"class":1595},"        hidden",[1585,2638,2639],{"class":1591},": { ",[1585,2641,2642],{"class":1595},"opacity",[1585,2644,2610],{"class":1591},[1585,2646,2647],{"class":2613},"0",[1585,2649,2650],{"class":1591},", ",[1585,2652,2653],{"class":1595},"y",[1585,2655,2610],{"class":1591},[1585,2657,2658],{"class":2613},"20",[1585,2660,2661],{"class":1591}," },\n",[1585,2663,2664,2667,2669,2671,2673,2676,2678,2680,2682,2684],{"class":1587,"line":1712},[1585,2665,2666],{"class":1595},"        visible",[1585,2668,2639],{"class":1591},[1585,2670,2642],{"class":1595},[1585,2672,2610],{"class":1591},[1585,2674,2675],{"class":2613},"1",[1585,2677,2650],{"class":1591},[1585,2679,2653],{"class":1595},[1585,2681,2610],{"class":1591},[1585,2683,2647],{"class":2613},[1585,2685,2661],{"class":1591},[1585,2687,2688,2691],{"class":1587,"line":1721},[1585,2689,2690],{"class":1591},"      }",[1585,2692,1832],{"class":1591},[1585,2694,2695,2697,2699,2701,2703],{"class":1587,"line":1731},[1585,2696,2595],{"class":1591},[1585,2698,2504],{"class":1609},[1585,2700,1613],{"class":1591},[1585,2702,1616],{"class":1591},[1585,2704,2631],{"class":1591},[1585,2706,2707,2710,2712,2715],{"class":1587,"line":1738},[1585,2708,2709],{"class":1595},"        duration",[1585,2711,2610],{"class":1591},[1585,2713,2714],{"class":2613},"0.5",[1585,2716,2717],{"class":1591},",\n",[1585,2719,2720,2723,2725,2728,2731,2733],{"class":1587,"line":1748},[1585,2721,2722],{"class":1595},"        ease",[1585,2724,2610],{"class":1591},[1585,2726,2727],{"class":1591},"'",[1585,2729,2730],{"class":1619},"easeOut",[1585,2732,2727],{"class":1591},[1585,2734,2717],{"class":1591},[1585,2736,2737,2739],{"class":1587,"line":1768},[1585,2738,2690],{"class":1591},[1585,2740,1832],{"class":1591},[1585,2742,2743],{"class":1587,"line":1789},[1585,2744,2745],{"class":1591},"    >\n",[1585,2747,2748,2750,2752,2754,2756,2758,2761,2763],{"class":1587,"line":1810},[1585,2749,1651],{"class":1591},[1585,2751,1560],{"class":1595},[1585,2753,1610],{"class":1609},[1585,2755,1613],{"class":1591},[1585,2757,1616],{"class":1591},[1585,2759,2760],{"class":1619},"rounded-lg bg-gradient-to-r from-blue-500 to-indigo-500 p-6 text-white",[1585,2762,1616],{"class":1591},[1585,2764,1598],{"class":1591},[1585,2766,2767,2769,2771,2773,2775,2777,2780,2782],{"class":1587,"line":1819},[1585,2768,1771],{"class":1591},[1585,2770,1880],{"class":1595},[1585,2772,1610],{"class":1609},[1585,2774,1613],{"class":1591},[1585,2776,1616],{"class":1591},[1585,2778,2779],{"class":1619},"mb-2 text-lg font-medium",[1585,2781,1616],{"class":1591},[1585,2783,1598],{"class":1591},[1585,2785,2786],{"class":1587,"line":1835},[1585,2787,2788],{"class":1672},"          Tailored motion\n",[1585,2790,2791,2793,2795],{"class":1587,"line":1850},[1585,2792,1965],{"class":1591},[1585,2794,1880],{"class":1595},[1585,2796,1598],{"class":1591},[1585,2798,2799,2801,2803,2806,2809,2811,2813],{"class":1587,"line":1856},[1585,2800,1771],{"class":1591},[1585,2802,1520],{"class":1595},[1585,2804,2805],{"class":1591},">",[1585,2807,2808],{"class":1672},"This element uses custom variants for its animation.",[1585,2810,2483],{"class":1591},[1585,2812,1520],{"class":1595},[1585,2814,1598],{"class":1591},[1585,2816,2817,2819,2821],{"class":1587,"line":1866},[1585,2818,1679],{"class":1591},[1585,2820,1560],{"class":1595},[1585,2822,1598],{"class":1591},[1585,2824,2825,2827,2829],{"class":1587,"line":1875},[1585,2826,1724],{"class":1591},[1585,2828,1743],{"class":1595},[1585,2830,1598],{"class":1591},[1585,2832,2833,2835,2837],{"class":1587,"line":1896},[1585,2834,2473],{"class":1591},[1585,2836,1560],{"class":1595},[1585,2838,1598],{"class":1591},[1585,2840,2841,2843,2845],{"class":1587,"line":1902},[1585,2842,2483],{"class":1591},[1585,2844,1573],{"class":1595},[1585,2846,1598],{"class":1591},[1880,2848,2850],{"id":2849},"render-as-a-different-element","Render as a different element",[1520,2852,2853,2854,2857,2858,2861,2862,2865],{},"The ",[1524,2855,2856],{},"as"," prop swaps the root element while keeping the in-view animation, so you\ncan hand the component a ",[1524,2859,2860],{},"section",", a ",[1524,2863,2864],{},"blockquote"," or any other HTML tag without\nwrapping it in an extra container.",[1556,2867,2868,2874],{"label":1558},[1560,2869,1567,2871],{"className":2870},[1565],[1569,2872],{"name":2873},"in-view-as",[1573,2875,2876],{"v-slot:code":1575},[1577,2877,2879],{"className":1579,"code":2878,"language":1581,"meta":1575,"style":1575},"\u003Ctemplate>\n  \u003Cdiv class=\"mx-auto max-w-2xl space-y-6 p-6\">\n    \u003CMInView\n      as=\"section\"\n      class=\"rounded-2xl border border-default p-6\"\n    >\n      \u003Ch2 class=\"text-2xl font-semibold text-highlighted\">\n        Rendered as a section\n      \u003C\u002Fh2>\n      \u003Cp class=\"mt-2 text-muted\">\n        The \u003Ccode>as\u003C\u002Fcode> prop swaps the root element while keeping the in-view animation.\n      \u003C\u002Fp>\n    \u003C\u002FMInView>\n\n    \u003CMInView\n      as=\"blockquote\"\n      class=\"border-l-4 border-primary pl-4 italic text-muted\"\n    >\n      Semantic markup, animated on entry.\n    \u003C\u002FMInView>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1524,2880,2881,2889,2908,2914,2927,2941,2945,2964,2969,2977,2996,3018,3026,3034,3038,3044,3056,3069,3073,3078,3086,3094],{"__ignoreMap":1575},[1585,2882,2883,2885,2887],{"class":1587,"line":1588},[1585,2884,1592],{"class":1591},[1585,2886,1573],{"class":1595},[1585,2888,1598],{"class":1591},[1585,2890,2891,2893,2895,2897,2899,2901,2904,2906],{"class":1587,"line":1601},[1585,2892,1604],{"class":1591},[1585,2894,1560],{"class":1595},[1585,2896,1610],{"class":1609},[1585,2898,1613],{"class":1591},[1585,2900,1616],{"class":1591},[1585,2902,2903],{"class":1619},"mx-auto max-w-2xl space-y-6 p-6",[1585,2905,1616],{"class":1591},[1585,2907,1598],{"class":1591},[1585,2909,2910,2912],{"class":1587,"line":1627},[1585,2911,1630],{"class":1591},[1585,2913,2590],{"class":1595},[1585,2915,2916,2919,2921,2923,2925],{"class":1587,"line":1648},[1585,2917,2918],{"class":1609},"      as",[1585,2920,1613],{"class":1591},[1585,2922,1616],{"class":1591},[1585,2924,2860],{"class":1619},[1585,2926,1832],{"class":1591},[1585,2928,2929,2932,2934,2936,2939],{"class":1587,"line":1669},[1585,2930,2931],{"class":1609},"      class",[1585,2933,1613],{"class":1591},[1585,2935,1616],{"class":1591},[1585,2937,2938],{"class":1619},"rounded-2xl border border-default p-6",[1585,2940,1832],{"class":1591},[1585,2942,2943],{"class":1587,"line":1676},[1585,2944,2745],{"class":1591},[1585,2946,2947,2949,2951,2953,2955,2957,2960,2962],{"class":1587,"line":1686},[1585,2948,1651],{"class":1591},[1585,2950,1537],{"class":1595},[1585,2952,1610],{"class":1609},[1585,2954,1613],{"class":1591},[1585,2956,1616],{"class":1591},[1585,2958,2959],{"class":1619},"text-2xl font-semibold text-highlighted",[1585,2961,1616],{"class":1591},[1585,2963,1598],{"class":1591},[1585,2965,2966],{"class":1587,"line":1706},[1585,2967,2968],{"class":1672},"        Rendered as a section\n",[1585,2970,2971,2973,2975],{"class":1587,"line":1712},[1585,2972,1679],{"class":1591},[1585,2974,1537],{"class":1595},[1585,2976,1598],{"class":1591},[1585,2978,2979,2981,2983,2985,2987,2989,2992,2994],{"class":1587,"line":1721},[1585,2980,1651],{"class":1591},[1585,2982,1520],{"class":1595},[1585,2984,1610],{"class":1609},[1585,2986,1613],{"class":1591},[1585,2988,1616],{"class":1591},[1585,2990,2991],{"class":1619},"mt-2 text-muted",[1585,2993,1616],{"class":1591},[1585,2995,1598],{"class":1591},[1585,2997,2998,3001,3003,3005,3007,3009,3011,3013,3015],{"class":1587,"line":1731},[1585,2999,3000],{"class":1672},"        The ",[1585,3002,1592],{"class":1591},[1585,3004,1524],{"class":1595},[1585,3006,2805],{"class":1591},[1585,3008,2856],{"class":1672},[1585,3010,2483],{"class":1591},[1585,3012,1524],{"class":1595},[1585,3014,2805],{"class":1591},[1585,3016,3017],{"class":1672}," prop swaps the root element while keeping the in-view animation.\n",[1585,3019,3020,3022,3024],{"class":1587,"line":1738},[1585,3021,1679],{"class":1591},[1585,3023,1520],{"class":1595},[1585,3025,1598],{"class":1591},[1585,3027,3028,3030,3032],{"class":1587,"line":1748},[1585,3029,1724],{"class":1591},[1585,3031,1743],{"class":1595},[1585,3033,1598],{"class":1591},[1585,3035,3036],{"class":1587,"line":1768},[1585,3037,1735],{"emptyLinePlaceholder":1734},[1585,3039,3040,3042],{"class":1587,"line":1789},[1585,3041,1630],{"class":1591},[1585,3043,2590],{"class":1595},[1585,3045,3046,3048,3050,3052,3054],{"class":1587,"line":1810},[1585,3047,2918],{"class":1609},[1585,3049,1613],{"class":1591},[1585,3051,1616],{"class":1591},[1585,3053,2864],{"class":1619},[1585,3055,1832],{"class":1591},[1585,3057,3058,3060,3062,3064,3067],{"class":1587,"line":1819},[1585,3059,2931],{"class":1609},[1585,3061,1613],{"class":1591},[1585,3063,1616],{"class":1591},[1585,3065,3066],{"class":1619},"border-l-4 border-primary pl-4 italic text-muted",[1585,3068,1832],{"class":1591},[1585,3070,3071],{"class":1587,"line":1835},[1585,3072,2745],{"class":1591},[1585,3074,3075],{"class":1587,"line":1850},[1585,3076,3077],{"class":1672},"      Semantic markup, animated on entry.\n",[1585,3079,3080,3082,3084],{"class":1587,"line":1856},[1585,3081,1724],{"class":1591},[1585,3083,1743],{"class":1595},[1585,3085,1598],{"class":1591},[1585,3087,3088,3090,3092],{"class":1587,"line":1866},[1585,3089,2473],{"class":1591},[1585,3091,1560],{"class":1595},[1585,3093,1598],{"class":1591},[1585,3095,3096,3098,3100],{"class":1587,"line":1875},[1585,3097,2483],{"class":1591},[1585,3099,1573],{"class":1595},[1585,3101,1598],{"class":1591},[1880,3103,3105],{"id":3104},"replay-on-every-entry","Replay on every entry",[1520,3107,3108,3109,3112],{},"With ",[1524,3110,3111],{},"once"," disabled the component follows visibility directly: it animates in\nwhen it enters the viewport and returns to the hidden state when it leaves, so\nscrolling away and back replays the animation.",[1556,3114,3115,3121],{"label":1558},[1560,3116,1567,3118],{"className":3117},[1565],[1569,3119],{"name":3120},"in-view-replay",[1573,3122,3123],{"v-slot:code":1575},[1577,3124,3126],{"className":1579,"code":3125,"language":1581,"meta":1575,"style":1575},"\u003Ctemplate>\n  \u003Cdiv class=\"mx-auto max-w-2xl space-y-8 p-6\">\n    \u003Cdiv class=\"h-40\" \u002F>\n\n    \u003CMInView\n      :once=\"false\"\n      :variants=\"{ hidden: { opacity: 0, scale: 0.9 }, visible: { opacity: 1, scale: 1 } }\"\n      class=\"rounded-2xl bg-primary\u002F10 p-6 text-center\"\n    >\n      \u003Cp class=\"text-lg font-medium text-highlighted\">\n        I animate every time I enter the viewport\n      \u003C\u002Fp>\n      \u003Cp class=\"mt-1 text-sm text-muted\">\n        \u003Ccode>:once=\"false\"\u003C\u002Fcode> — scroll away and back to replay.\n      \u003C\u002Fp>\n    \u003C\u002FMInView>\n\n    \u003Cdiv class=\"h-40\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[1524,3127,3128,3136,3155,3174,3178,3184,3200,3258,3271,3275,3294,3299,3307,3326,3346,3354,3362,3366,3384,3392],{"__ignoreMap":1575},[1585,3129,3130,3132,3134],{"class":1587,"line":1588},[1585,3131,1592],{"class":1591},[1585,3133,1573],{"class":1595},[1585,3135,1598],{"class":1591},[1585,3137,3138,3140,3142,3144,3146,3148,3151,3153],{"class":1587,"line":1601},[1585,3139,1604],{"class":1591},[1585,3141,1560],{"class":1595},[1585,3143,1610],{"class":1609},[1585,3145,1613],{"class":1591},[1585,3147,1616],{"class":1591},[1585,3149,3150],{"class":1619},"mx-auto max-w-2xl space-y-8 p-6",[1585,3152,1616],{"class":1591},[1585,3154,1598],{"class":1591},[1585,3156,3157,3159,3161,3163,3165,3167,3170,3172],{"class":1587,"line":1627},[1585,3158,1630],{"class":1591},[1585,3160,1560],{"class":1595},[1585,3162,1610],{"class":1609},[1585,3164,1613],{"class":1591},[1585,3166,1616],{"class":1591},[1585,3168,3169],{"class":1619},"h-40",[1585,3171,1616],{"class":1591},[1585,3173,2579],{"class":1591},[1585,3175,3176],{"class":1587,"line":1648},[1585,3177,1735],{"emptyLinePlaceholder":1734},[1585,3179,3180,3182],{"class":1587,"line":1669},[1585,3181,1630],{"class":1591},[1585,3183,2590],{"class":1595},[1585,3185,3186,3188,3190,3192,3194,3198],{"class":1587,"line":1676},[1585,3187,2595],{"class":1591},[1585,3189,3111],{"class":1609},[1585,3191,1613],{"class":1591},[1585,3193,1616],{"class":1591},[1585,3195,3197],{"class":3196},"sfNiH","false",[1585,3199,1832],{"class":1591},[1585,3201,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222,3224,3227,3229,3232,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253,3256],{"class":1587,"line":1686},[1585,3203,2595],{"class":1591},[1585,3205,2501],{"class":1609},[1585,3207,1613],{"class":1591},[1585,3209,1616],{"class":1591},[1585,3211,2605],{"class":1591},[1585,3213,1530],{"class":1595},[1585,3215,2639],{"class":1591},[1585,3217,2642],{"class":1595},[1585,3219,2610],{"class":1591},[1585,3221,2647],{"class":2613},[1585,3223,2650],{"class":1591},[1585,3225,3226],{"class":1595},"scale",[1585,3228,2610],{"class":1591},[1585,3230,3231],{"class":2613},"0.9",[1585,3233,3234],{"class":1591}," }, ",[1585,3236,1534],{"class":1595},[1585,3238,2639],{"class":1591},[1585,3240,2642],{"class":1595},[1585,3242,2610],{"class":1591},[1585,3244,2675],{"class":2613},[1585,3246,2650],{"class":1591},[1585,3248,3226],{"class":1595},[1585,3250,2610],{"class":1591},[1585,3252,2675],{"class":2613},[1585,3254,3255],{"class":1591}," } }",[1585,3257,1832],{"class":1591},[1585,3259,3260,3262,3264,3266,3269],{"class":1587,"line":1706},[1585,3261,2931],{"class":1609},[1585,3263,1613],{"class":1591},[1585,3265,1616],{"class":1591},[1585,3267,3268],{"class":1619},"rounded-2xl bg-primary\u002F10 p-6 text-center",[1585,3270,1832],{"class":1591},[1585,3272,3273],{"class":1587,"line":1712},[1585,3274,2745],{"class":1591},[1585,3276,3277,3279,3281,3283,3285,3287,3290,3292],{"class":1587,"line":1721},[1585,3278,1651],{"class":1591},[1585,3280,1520],{"class":1595},[1585,3282,1610],{"class":1609},[1585,3284,1613],{"class":1591},[1585,3286,1616],{"class":1591},[1585,3288,3289],{"class":1619},"text-lg font-medium text-highlighted",[1585,3291,1616],{"class":1591},[1585,3293,1598],{"class":1591},[1585,3295,3296],{"class":1587,"line":1731},[1585,3297,3298],{"class":1672},"        I animate every time I enter the viewport\n",[1585,3300,3301,3303,3305],{"class":1587,"line":1738},[1585,3302,1679],{"class":1591},[1585,3304,1520],{"class":1595},[1585,3306,1598],{"class":1591},[1585,3308,3309,3311,3313,3315,3317,3319,3322,3324],{"class":1587,"line":1748},[1585,3310,1651],{"class":1591},[1585,3312,1520],{"class":1595},[1585,3314,1610],{"class":1609},[1585,3316,1613],{"class":1591},[1585,3318,1616],{"class":1591},[1585,3320,3321],{"class":1619},"mt-1 text-sm text-muted",[1585,3323,1616],{"class":1591},[1585,3325,1598],{"class":1591},[1585,3327,3328,3330,3332,3334,3337,3339,3341,3343],{"class":1587,"line":1768},[1585,3329,1771],{"class":1591},[1585,3331,1524],{"class":1595},[1585,3333,2805],{"class":1591},[1585,3335,3336],{"class":1672},":once=\"false\"",[1585,3338,2483],{"class":1591},[1585,3340,1524],{"class":1595},[1585,3342,2805],{"class":1591},[1585,3344,3345],{"class":1672}," — scroll away and back to replay.\n",[1585,3347,3348,3350,3352],{"class":1587,"line":1789},[1585,3349,1679],{"class":1591},[1585,3351,1520],{"class":1595},[1585,3353,1598],{"class":1591},[1585,3355,3356,3358,3360],{"class":1587,"line":1810},[1585,3357,1724],{"class":1591},[1585,3359,1743],{"class":1595},[1585,3361,1598],{"class":1591},[1585,3363,3364],{"class":1587,"line":1819},[1585,3365,1735],{"emptyLinePlaceholder":1734},[1585,3367,3368,3370,3372,3374,3376,3378,3380,3382],{"class":1587,"line":1835},[1585,3369,1630],{"class":1591},[1585,3371,1560],{"class":1595},[1585,3373,1610],{"class":1609},[1585,3375,1613],{"class":1591},[1585,3377,1616],{"class":1591},[1585,3379,3169],{"class":1619},[1585,3381,1616],{"class":1591},[1585,3383,2579],{"class":1591},[1585,3385,3386,3388,3390],{"class":1587,"line":1850},[1585,3387,2473],{"class":1591},[1585,3389,1560],{"class":1595},[1585,3391,1598],{"class":1591},[1585,3393,3394,3396,3398],{"class":1587,"line":1856},[1585,3395,2483],{"class":1591},[1585,3397,1573],{"class":1595},[1585,3399,1598],{"class":1591},[1880,3401,3403],{"id":3402},"react-to-animation-events","React to animation events",[1520,3405,3406,3407,1531,3410,3413,3414,3417],{},"Use the ",[1524,3408,3409],{},"animation-start",[1524,3411,3412],{},"animation-complete"," events to run your own logic\nwhen the entrance begins and when it settles. Combine them with ",[1524,3415,3416],{},"viewOptions"," to\nfine-tune exactly where the trigger fires.",[1556,3419,3420,3426],{"label":1558},[1560,3421,1567,3423],{"className":3422},[1565],[1569,3424],{"name":3425},"in-view-events",[1573,3427,3428],{"v-slot:code":1575},[1577,3429,3431],{"className":1579,"code":3430,"language":1581,"meta":1575,"style":1575},"\u003Ctemplate>\n  \u003Cdiv class=\"mx-auto max-w-2xl space-y-4 p-6\">\n    \u003CMInView\n      :view-options=\"{ threshold: 0.4, margin: '0px 0px -80px 0px' }\"\n      @animation-start=\"onStart\"\n      @animation-complete=\"onComplete\"\n    >\n      \u003Cdiv class=\"rounded-2xl border border-default p-6 text-center\">\n        \u003Cp class=\"text-sm text-muted\">\n          Status: \u003Cspan class=\"font-medium text-highlighted\">{{ status }}\u003C\u002Fspan>\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002FMInView>\n\n    \u003Cdiv class=\"h-40\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst status = ref('waiting')\nconst onStart = () => {\n  status.value = 'animating'\n}\nconst onComplete = () => {\n  status.value = 'settled'\n}\n\u003C\u002Fscript>\n",[1524,3432,3433,3441,3460,3466,3503,3519,3534,3538,3557,3576,3607,3615,3623,3631,3635,3653,3661,3669,3673,3697,3724,3742,3765,3770,3785,3802,3806],{"__ignoreMap":1575},[1585,3434,3435,3437,3439],{"class":1587,"line":1588},[1585,3436,1592],{"class":1591},[1585,3438,1573],{"class":1595},[1585,3440,1598],{"class":1591},[1585,3442,3443,3445,3447,3449,3451,3453,3456,3458],{"class":1587,"line":1601},[1585,3444,1604],{"class":1591},[1585,3446,1560],{"class":1595},[1585,3448,1610],{"class":1609},[1585,3450,1613],{"class":1591},[1585,3452,1616],{"class":1591},[1585,3454,3455],{"class":1619},"mx-auto max-w-2xl space-y-4 p-6",[1585,3457,1616],{"class":1591},[1585,3459,1598],{"class":1591},[1585,3461,3462,3464],{"class":1587,"line":1627},[1585,3463,1630],{"class":1591},[1585,3465,2590],{"class":1595},[1585,3467,3468,3470,3472,3474,3476,3478,3480,3482,3485,3487,3490,3492,3494,3497,3499,3501],{"class":1587,"line":1648},[1585,3469,2595],{"class":1591},[1585,3471,2598],{"class":1609},[1585,3473,1613],{"class":1591},[1585,3475,1616],{"class":1591},[1585,3477,2605],{"class":1591},[1585,3479,2508],{"class":1595},[1585,3481,2610],{"class":1591},[1585,3483,3484],{"class":2613},"0.4",[1585,3486,2650],{"class":1591},[1585,3488,3489],{"class":1595},"margin",[1585,3491,2610],{"class":1591},[1585,3493,2727],{"class":1591},[1585,3495,3496],{"class":1619},"0px 0px -80px 0px",[1585,3498,2727],{"class":1591},[1585,3500,2616],{"class":1591},[1585,3502,1832],{"class":1591},[1585,3504,3505,3508,3510,3512,3514,3517],{"class":1587,"line":1669},[1585,3506,3507],{"class":1591},"      @",[1585,3509,3409],{"class":1609},[1585,3511,1613],{"class":1591},[1585,3513,1616],{"class":1591},[1585,3515,3516],{"class":1672},"onStart",[1585,3518,1832],{"class":1591},[1585,3520,3521,3523,3525,3527,3529,3532],{"class":1587,"line":1676},[1585,3522,3507],{"class":1591},[1585,3524,3412],{"class":1609},[1585,3526,1613],{"class":1591},[1585,3528,1616],{"class":1591},[1585,3530,3531],{"class":1672},"onComplete",[1585,3533,1832],{"class":1591},[1585,3535,3536],{"class":1587,"line":1686},[1585,3537,2745],{"class":1591},[1585,3539,3540,3542,3544,3546,3548,3550,3553,3555],{"class":1587,"line":1706},[1585,3541,1651],{"class":1591},[1585,3543,1560],{"class":1595},[1585,3545,1610],{"class":1609},[1585,3547,1613],{"class":1591},[1585,3549,1616],{"class":1591},[1585,3551,3552],{"class":1619},"rounded-2xl border border-default p-6 text-center",[1585,3554,1616],{"class":1591},[1585,3556,1598],{"class":1591},[1585,3558,3559,3561,3563,3565,3567,3569,3572,3574],{"class":1587,"line":1712},[1585,3560,1771],{"class":1591},[1585,3562,1520],{"class":1595},[1585,3564,1610],{"class":1609},[1585,3566,1613],{"class":1591},[1585,3568,1616],{"class":1591},[1585,3570,3571],{"class":1619},"text-sm text-muted",[1585,3573,1616],{"class":1591},[1585,3575,1598],{"class":1591},[1585,3577,3578,3581,3583,3585,3587,3589,3591,3594,3596,3598,3601,3603,3605],{"class":1587,"line":1721},[1585,3579,3580],{"class":1672},"          Status: ",[1585,3582,1592],{"class":1591},[1585,3584,1585],{"class":1595},[1585,3586,1610],{"class":1609},[1585,3588,1613],{"class":1591},[1585,3590,1616],{"class":1591},[1585,3592,3593],{"class":1619},"font-medium text-highlighted",[1585,3595,1616],{"class":1591},[1585,3597,2805],{"class":1591},[1585,3599,3600],{"class":1672},"{{ status }}",[1585,3602,2483],{"class":1591},[1585,3604,1585],{"class":1595},[1585,3606,1598],{"class":1591},[1585,3608,3609,3611,3613],{"class":1587,"line":1731},[1585,3610,1965],{"class":1591},[1585,3612,1520],{"class":1595},[1585,3614,1598],{"class":1591},[1585,3616,3617,3619,3621],{"class":1587,"line":1738},[1585,3618,1679],{"class":1591},[1585,3620,1560],{"class":1595},[1585,3622,1598],{"class":1591},[1585,3624,3625,3627,3629],{"class":1587,"line":1748},[1585,3626,1724],{"class":1591},[1585,3628,1743],{"class":1595},[1585,3630,1598],{"class":1591},[1585,3632,3633],{"class":1587,"line":1768},[1585,3634,1735],{"emptyLinePlaceholder":1734},[1585,3636,3637,3639,3641,3643,3645,3647,3649,3651],{"class":1587,"line":1789},[1585,3638,1630],{"class":1591},[1585,3640,1560],{"class":1595},[1585,3642,1610],{"class":1609},[1585,3644,1613],{"class":1591},[1585,3646,1616],{"class":1591},[1585,3648,3169],{"class":1619},[1585,3650,1616],{"class":1591},[1585,3652,2579],{"class":1591},[1585,3654,3655,3657,3659],{"class":1587,"line":1810},[1585,3656,2473],{"class":1591},[1585,3658,1560],{"class":1595},[1585,3660,1598],{"class":1591},[1585,3662,3663,3665,3667],{"class":1587,"line":1819},[1585,3664,2483],{"class":1591},[1585,3666,1573],{"class":1595},[1585,3668,1598],{"class":1591},[1585,3670,3671],{"class":1587,"line":1835},[1585,3672,1735],{"emptyLinePlaceholder":1734},[1585,3674,3675,3677,3680,3683,3686,3688,3690,3693,3695],{"class":1587,"line":1850},[1585,3676,1592],{"class":1591},[1585,3678,3679],{"class":1595},"script",[1585,3681,3682],{"class":1609}," setup",[1585,3684,3685],{"class":1609}," lang",[1585,3687,1613],{"class":1591},[1585,3689,1616],{"class":1591},[1585,3691,3692],{"class":1619},"ts",[1585,3694,1616],{"class":1591},[1585,3696,1598],{"class":1591},[1585,3698,3699,3702,3705,3707,3711,3714,3716,3719,3721],{"class":1587,"line":1856},[1585,3700,3701],{"class":1609},"const",[1585,3703,3704],{"class":1672}," status ",[1585,3706,1613],{"class":1591},[1585,3708,3710],{"class":3709},"s2Zo4"," ref",[1585,3712,3713],{"class":1672},"(",[1585,3715,2727],{"class":1591},[1585,3717,3718],{"class":1619},"waiting",[1585,3720,2727],{"class":1591},[1585,3722,3723],{"class":1672},")\n",[1585,3725,3726,3728,3731,3733,3736,3739],{"class":1587,"line":1866},[1585,3727,3701],{"class":1609},[1585,3729,3730],{"class":1672}," onStart ",[1585,3732,1613],{"class":1591},[1585,3734,3735],{"class":1591}," ()",[1585,3737,3738],{"class":1609}," =>",[1585,3740,3741],{"class":1591}," {\n",[1585,3743,3744,3747,3750,3753,3756,3759,3762],{"class":1587,"line":1875},[1585,3745,3746],{"class":1672},"  status",[1585,3748,3749],{"class":1591},".",[1585,3751,3752],{"class":1672},"value",[1585,3754,3755],{"class":1591}," =",[1585,3757,3758],{"class":1591}," '",[1585,3760,3761],{"class":1619},"animating",[1585,3763,3764],{"class":1591},"'\n",[1585,3766,3767],{"class":1587,"line":1896},[1585,3768,3769],{"class":1591},"}\n",[1585,3771,3772,3774,3777,3779,3781,3783],{"class":1587,"line":1902},[1585,3773,3701],{"class":1609},[1585,3775,3776],{"class":1672}," onComplete ",[1585,3778,1613],{"class":1591},[1585,3780,3735],{"class":1591},[1585,3782,3738],{"class":1609},[1585,3784,3741],{"class":1591},[1585,3786,3787,3789,3791,3793,3795,3797,3800],{"class":1587,"line":1912},[1585,3788,3746],{"class":1672},[1585,3790,3749],{"class":1591},[1585,3792,3752],{"class":1672},[1585,3794,3755],{"class":1591},[1585,3796,3758],{"class":1591},[1585,3798,3799],{"class":1619},"settled",[1585,3801,3764],{"class":1591},[1585,3803,3804],{"class":1587,"line":1932},[1585,3805,3769],{"class":1591},[1585,3807,3808,3810,3812],{"class":1587,"line":1938},[1585,3809,2483],{"class":1591},[1585,3811,3679],{"class":1595},[1585,3813,1598],{"class":1591},[1537,3815,3817],{"id":3816},"customize","Customize",[1520,3819,3820,3821,2650,3823,3825],{},"Tune ",[1524,3822,2856],{},[1524,3824,3111],{},", the variants, the transition and the observer options live in\nthe playground below.",[1556,3827,3828,3834],{"label":1558},[1560,3829,1567,3831],{"className":3830},[1565],[1569,3832],{"name":3833},"in-view-custom",[1573,3835,3836],{"v-slot:code":1575},[3837,3838],"playground-code",{"name":3839},"InView",[1537,3841,3843],{"id":3842},"props","Props",[3845,3846,3847,3853,3858,3872,3877,3888],"component-props",{},[3848,3849,3852],"component-prop",{"name":2501,"type":3850,"default":3851},"{ hidden: VariantType, visible: VariantType }","{ hidden: { opacity: 0 }, visible: { opacity: 1 } }","The two motion states the component animates between. Either key is merged over\nthe default, so you only supply the properties you want to change.",[3848,3854,3857],{"name":2504,"type":3855,"default":3856},"Transition","{ duration: 0.6, ease: 'easeOut' }","Motion transition forwarded to the root element, controlling duration and easing.",[3848,3859,3862,3863,3865,3866,3868,3869,3871],{"name":3416,"type":3860,"default":3861},"{ margin?: string, threshold?: number | number[] }","{ margin: '0px', threshold: 0.1 }","Options for the ",[1524,3864,1526],{}," observer. ",[1524,3867,3489],{}," is the root margin and\n",[1524,3870,2508],{}," the visibility ratio (or ratios) that triggers the animation.",[3848,3873,3876],{"name":2856,"type":3874,"default":3875},"keyof HTMLElementTagNameMap","'div'","The HTML tag rendered for the root element. Constrained to real tags so motion-v\ncan infer the element type correctly.",[3848,3878,3881,3882,3884,3885,3887],{"name":3111,"type":3879,"default":3880},"boolean","true","When ",[1524,3883,3880],{}," the element animates a single time and then stays visible. When\n",[1524,3886,3197],{}," it follows visibility, re-animating each time it re-enters the viewport.",[3848,3889,3893],{"name":3890,"type":3891,"default":3892},"class","string","''","Merged onto the root element after the theme's classes.",[1537,3895,3897],{"id":3896},"events","Events",[3899,3900,3901,3911],"component-events",{},[3902,3903,3906,3907,3910],"component-event",{"name":3904,"type":3905},"animationStart","() => void","Emitted when the entrance animation starts. The ",[1524,3908,3909],{},"onAnimationStart"," prop is called\nalongside it as an alternative to the listener.",[3902,3912,3914,3915,3918],{"name":3913,"type":3905},"animationComplete","Emitted when the entrance animation settles. The ",[1524,3916,3917],{},"onAnimationComplete"," prop is\ncalled alongside it as an alternative to the listener.",[1537,3920,3922],{"id":3921},"slots","Slots",[3924,3925,3926],"component-slots",{},[3927,3928,3930],"component-slot-row",{"name":3929},"default","The content to animate. Rendered inside the motion root element.",[1537,3932,3934],{"id":3933},"ui","UI",[1520,3936,3937,3938,3944,3945,3948,3949,3749],{},"This component's theme exposes the slots below. Override any of them per instance with the ",[3939,3940,3941,3943],"a",{"href":21},[1524,3942,3933],{}," prop",", or app-wide under ",[1524,3946,3947],{},"ui.inView"," in ",[1524,3950,3951],{},"app.config.ts",[3845,3953,3954],{},[3848,3955,3957],{"name":3933,"type":3956},"object","Per-slot classes merged over the theme defaults.",[3924,3959,3960],{},[3927,3961],{"name":3962},"root",[1537,3964,3966],{"id":3965},"accessibility","Accessibility",[1520,3968,3969,3970,3972,3973,3976],{},"The component renders whatever element ",[1524,3971,2856],{}," resolves to and animates only opacity\nor transform, so it adds nothing to the accessibility tree beyond your content.\nThere are no ARIA attributes, roles or live regions, and the hidden state is a\nmotion style rather than ",[1524,3974,3975],{},"display: none"," — assistive technology can still read the\ncontent before it has animated in.",[1520,3978,3979],{},"Because the entrance is purely decorative, the events are a convenience hook for\nyour own code, not an accessibility feature. If an animation conveys meaning,\nexpose that meaning in text.",[1520,3981,3982,3983,3986,3987,3990],{},"This component does not read ",[1524,3984,3985],{},"prefers-reduced-motion",". Motion honours the user's\npreference for the transition itself, but if you want to skip the entrance\nentirely you should branch on ",[1524,3988,3989],{},"useReducedMotion"," in your own content.",[1537,3992,3994],{"id":3993},"performance","Performance",[3996,3997,3998,4005,4014,4023],"ul",{},[3999,4000,4001,4002,4004],"li",{},"Visibility is tracked by a single ",[1524,4003,1526],{}," observer on the root\nelement, so there is one IntersectionObserver per instance and no scroll\nlistener.",[3999,4006,4007,4008,4010,4011,4013],{},"Only the properties in your ",[1524,4009,2501],{}," are animated; the defaults touch\n",[1524,4012,2642],{}," only, which the browser can composite without layout.",[3999,4015,4016,4018,4019,4022],{},[1524,4017,3111],{}," is implemented with a ",[1524,4020,4021],{},"hasAnimated"," ref and a watcher on visibility, so\nlatching costs one boolean rather than a second observer.",[3999,4024,4025,4028,4029,4032,4033,4035],{},[1524,4026,4027],{},"finalVariants"," is a ",[1524,4030,4031],{},"computed",", so changing ",[1524,4034,2501],{}," after mount re-derives\nthe states without recreating the component.",[4037,4038,4039,4042,4043,4046],"tip",{},[1524,4040,4041],{},"viewOptions.margin"," accepts any valid IntersectionObserver root margin, such as\n",[1524,4044,4045],{},"'0px 0px -100px 0px'"," to trigger slightly before the element is fully on screen.\nThe value is read once when the observer is created, so set it up front rather\nthan mutating it after mount.",[4048,4049,4050],"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":1575,"searchDepth":1601,"depth":1601,"links":4052},[4053,4054,4060,4061,4062,4063,4064,4065,4066],{"id":1539,"depth":1601,"text":16},{"id":2490,"depth":1601,"text":2491,"children":4055},[4056,4057,4058,4059],{"id":2494,"depth":1627,"text":2495},{"id":2849,"depth":1627,"text":2850},{"id":3104,"depth":1627,"text":3105},{"id":3402,"depth":1627,"text":3403},{"id":3816,"depth":1601,"text":3817},{"id":3842,"depth":1601,"text":3843},{"id":3896,"depth":1601,"text":3897},{"id":3921,"depth":1601,"text":3922},{"id":3933,"depth":1601,"text":3934},{"id":3965,"depth":1601,"text":3966},{"id":3993,"depth":1601,"text":3994},"Animates its content when it scrolls into the viewport, and optionally replays on every entry.","md",null,{},{"title":1011,"description":4067},"8hQg3_IG11tml0NwsWLicfLBwEpfoHxWDNUKJ_aOwx4",[4074,4076],{"title":1001,"path":1002,"stem":1003,"description":4075,"children":-1},"A vertical toolbar where each icon button expands a panel of content above it.",{"title":1015,"path":1016,"stem":1017,"description":4077,"children":-1},"A marquee that duplicates its content once and scrolls it in a seamless loop.",1793501813888]