[{"data":1,"prerenderedAt":3638},["ShallowReactive",2],{"navigation_docs":3,"-components-scroll-scroll-image-reveal":1514,"-components-scroll-scroll-image-reveal-surround":3633},[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":1027,"body":1516,"description":3627,"extension":3628,"links":3629,"meta":3630,"navigation":1789,"path":1028,"seo":3631,"stem":1029,"__hash__":3632},"docs\u002F3.components\u002Fscroll\u002Fscroll-image-reveal.md",{"type":1517,"value":1518,"toc":3613},"minimark",[1519,1543,1555,1559,1581,1862,1866,1871,1892,2485,2489,2503,2885,2889,2895,3116,3120,3132,3146,3150,3283,3287,3304,3310,3325,3329,3342,3345,3370,3374,3438,3457,3461,3579,3604,3609],[1520,1521,1522,1523,1527,1528,1531,1532,1527,1535,1538,1539,1542],"p",{},"An image that reveals itself as you scroll, using a CSS mask on the frame rather\nthan a clip on the image. Five masks are available — ",[1524,1525,1526],"code",{},"wipe",", ",[1524,1529,1530],{},"curtain",",\n",[1524,1533,1534],{},"circle",[1524,1536,1537],{},"blinds"," and ",[1524,1540,1541],{},"scale"," — and all of them share one spring-smoothed\nprogress value, with a counter-parallax drift underneath so the image settles\ninto place rather than simply appearing.",[1520,1544,1545,1546,1550,1551,1554],{},"Two implementation details shape how you use it. First, the mask lives on the\n",[1547,1548,1549],"strong",{},"frame",", not the image: the image is deliberately taller than its frame by\n",[1524,1552,1553],{},"2 × parallax"," pixels so the drift has somewhere to travel, and a clip measured\nagainst that oversized box would never line up with the visible edges. Second,\nthe frame has no intrinsic height — the image is absolutely positioned — so you\nmust give the frame one.",[1556,1557,16],"h2",{"id":1558},"usage",[1520,1560,1561,1562,1565,1566,1538,1569,1572,1573,1576,1577,1580],{},"Set an explicit height on the frame (via ",[1524,1563,1564],{},"class","), pass ",[1524,1567,1568],{},"src",[1524,1570,1571],{},"alt",", and\npick a ",[1524,1574,1575],{},"mask",". Reach for ",[1524,1578,1579],{},"once"," when the reveal is a one-time entrance — without\nit, scrolling back up re-hides the image, because the mask is a direct function\nof progress rather than a latch.",[1582,1583,1585,1598],"code-preview",{"label":1584},"Preview",[1586,1587,1593,1594],"div",{"className":1588},[1589,1590,1591,1592],"flex","justify-center","w-full","h-full","  ",[1595,1596],"component-example",{"name":1597},"scroll-image-reveal-basic",[1599,1600,1602],"template",{"v-slot:code":1601},"",[1603,1604,1608],"pre",{"className":1605,"code":1606,"language":1607,"meta":1601,"style":1601},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"w-full max-w-lg space-y-3\">\n    \u003CMScrollImageReveal\n      :src=\"src\"\n      :alt=\"alt\"\n      mask=\"circle\"\n      class=\"h-64\"\n    \u002F>\n    \u003Cp class=\"text-muted text-sm\">\n      The frame is absolutely positioned inside, so it needs an explicit height.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst src = 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-reveal\u002F900\u002F600'\nconst alt = 'A misty mountain ridge at sunrise'\n\u003C\u002Fscript>\n","vue",[1524,1609,1610,1625,1651,1660,1678,1693,1707,1722,1728,1748,1754,1764,1774,1784,1791,1816,1836,1853],{"__ignoreMap":1601},[1611,1612,1615,1619,1622],"span",{"class":1613,"line":1614},"line",1,[1611,1616,1618],{"class":1617},"sMK4o","\u003C",[1611,1620,1599],{"class":1621},"swJcz",[1611,1623,1624],{"class":1617},">\n",[1611,1626,1628,1631,1633,1637,1640,1643,1647,1649],{"class":1613,"line":1627},2,[1611,1629,1630],{"class":1617},"  \u003C",[1611,1632,1586],{"class":1621},[1611,1634,1636],{"class":1635},"spNyl"," class",[1611,1638,1639],{"class":1617},"=",[1611,1641,1642],{"class":1617},"\"",[1611,1644,1646],{"class":1645},"sfazB","w-full max-w-lg space-y-3",[1611,1648,1642],{"class":1617},[1611,1650,1624],{"class":1617},[1611,1652,1654,1657],{"class":1613,"line":1653},3,[1611,1655,1656],{"class":1617},"    \u003C",[1611,1658,1659],{"class":1621},"MScrollImageReveal\n",[1611,1661,1663,1666,1668,1670,1672,1675],{"class":1613,"line":1662},4,[1611,1664,1665],{"class":1617},"      :",[1611,1667,1568],{"class":1635},[1611,1669,1639],{"class":1617},[1611,1671,1642],{"class":1617},[1611,1673,1568],{"class":1674},"sTEyZ",[1611,1676,1677],{"class":1617},"\"\n",[1611,1679,1681,1683,1685,1687,1689,1691],{"class":1613,"line":1680},5,[1611,1682,1665],{"class":1617},[1611,1684,1571],{"class":1635},[1611,1686,1639],{"class":1617},[1611,1688,1642],{"class":1617},[1611,1690,1571],{"class":1674},[1611,1692,1677],{"class":1617},[1611,1694,1696,1699,1701,1703,1705],{"class":1613,"line":1695},6,[1611,1697,1698],{"class":1635},"      mask",[1611,1700,1639],{"class":1617},[1611,1702,1642],{"class":1617},[1611,1704,1534],{"class":1645},[1611,1706,1677],{"class":1617},[1611,1708,1710,1713,1715,1717,1720],{"class":1613,"line":1709},7,[1611,1711,1712],{"class":1635},"      class",[1611,1714,1639],{"class":1617},[1611,1716,1642],{"class":1617},[1611,1718,1719],{"class":1645},"h-64",[1611,1721,1677],{"class":1617},[1611,1723,1725],{"class":1613,"line":1724},8,[1611,1726,1727],{"class":1617},"    \u002F>\n",[1611,1729,1731,1733,1735,1737,1739,1741,1744,1746],{"class":1613,"line":1730},9,[1611,1732,1656],{"class":1617},[1611,1734,1520],{"class":1621},[1611,1736,1636],{"class":1635},[1611,1738,1639],{"class":1617},[1611,1740,1642],{"class":1617},[1611,1742,1743],{"class":1645},"text-muted text-sm",[1611,1745,1642],{"class":1617},[1611,1747,1624],{"class":1617},[1611,1749,1751],{"class":1613,"line":1750},10,[1611,1752,1753],{"class":1674},"      The frame is absolutely positioned inside, so it needs an explicit height.\n",[1611,1755,1757,1760,1762],{"class":1613,"line":1756},11,[1611,1758,1759],{"class":1617},"    \u003C\u002F",[1611,1761,1520],{"class":1621},[1611,1763,1624],{"class":1617},[1611,1765,1767,1770,1772],{"class":1613,"line":1766},12,[1611,1768,1769],{"class":1617},"  \u003C\u002F",[1611,1771,1586],{"class":1621},[1611,1773,1624],{"class":1617},[1611,1775,1777,1780,1782],{"class":1613,"line":1776},13,[1611,1778,1779],{"class":1617},"\u003C\u002F",[1611,1781,1599],{"class":1621},[1611,1783,1624],{"class":1617},[1611,1785,1787],{"class":1613,"line":1786},14,[1611,1788,1790],{"emptyLinePlaceholder":1789},true,"\n",[1611,1792,1794,1796,1799,1802,1805,1807,1809,1812,1814],{"class":1613,"line":1793},15,[1611,1795,1618],{"class":1617},[1611,1797,1798],{"class":1621},"script",[1611,1800,1801],{"class":1635}," setup",[1611,1803,1804],{"class":1635}," lang",[1611,1806,1639],{"class":1617},[1611,1808,1642],{"class":1617},[1611,1810,1811],{"class":1645},"ts",[1611,1813,1642],{"class":1617},[1611,1815,1624],{"class":1617},[1611,1817,1819,1822,1825,1827,1830,1833],{"class":1613,"line":1818},16,[1611,1820,1821],{"class":1635},"const",[1611,1823,1824],{"class":1674}," src ",[1611,1826,1639],{"class":1617},[1611,1828,1829],{"class":1617}," '",[1611,1831,1832],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-reveal\u002F900\u002F600",[1611,1834,1835],{"class":1617},"'\n",[1611,1837,1839,1841,1844,1846,1848,1851],{"class":1613,"line":1838},17,[1611,1840,1821],{"class":1635},[1611,1842,1843],{"class":1674}," alt ",[1611,1845,1639],{"class":1617},[1611,1847,1829],{"class":1617},[1611,1849,1850],{"class":1645},"A misty mountain ridge at sunrise",[1611,1852,1835],{"class":1617},[1611,1854,1856,1858,1860],{"class":1613,"line":1855},18,[1611,1857,1779],{"class":1617},[1611,1859,1798],{"class":1621},[1611,1861,1624],{"class":1617},[1556,1863,1865],{"id":1864},"examples","Examples",[1867,1868,1870],"h3",{"id":1869},"every-mask","Every mask",[1520,1872,1873,1527,1875,1527,1877,1538,1879,1881,1882,1884,1885,1887,1888,1891],{},[1524,1874,1526],{},[1524,1876,1530],{},[1524,1878,1537],{},[1524,1880,1541],{}," alongside the default ",[1524,1883,1534],{},". Each frame\nsets its own ",[1524,1886,1575],{}," and, where the mask honours it, a ",[1524,1889,1890],{},"direction",".",[1582,1893,1894,1900],{"label":1584},[1586,1895,1593,1897],{"className":1896},[1589,1590,1591,1592],[1595,1898],{"name":1899},"scroll-image-reveal-masks",[1599,1901,1902],{"v-slot:code":1601},[1603,1903,1905],{"className":1605,"code":1904,"language":1607,"meta":1601,"style":1601},"\u003Ctemplate>\n  \u003Cdiv class=\"grid w-full max-w-3xl gap-6 sm:grid-cols-2\">\n    \u003Cfigure\n      v-for=\"sample in samples\"\n      :key=\"sample.label\"\n      class=\"space-y-2\"\n    >\n      \u003CMScrollImageReveal\n        :src=\"sample.src\"\n        :alt=\"sample.label\"\n        :mask=\"sample.mask\"\n        :direction=\"sample.direction\"\n        rounded=\"rounded-xl\"\n        class=\"h-40\"\n      \u002F>\n      \u003Cfigcaption class=\"text-xs text-muted\">\n        mask=\"{{ sample.mask }}\" · direction=\"{{ sample.direction }}\"\n      \u003C\u002Ffigcaption>\n    \u003C\u002Ffigure>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst samples = [\n  { label: 'Wipe from the right', mask: 'wipe' as const, direction: 'right' as const, src: 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-wipe\u002F640\u002F420' },\n  { label: 'Curtain from the bottom', mask: 'curtain' as const, direction: 'up' as const, src: 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-curtain\u002F640\u002F420' },\n  { label: 'Blinds from the left', mask: 'blinds' as const, direction: 'left' as const, src: 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-blinds\u002F640\u002F420' },\n  { label: 'Scale up', mask: 'scale' as const, direction: 'left' as const, src: 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-scale\u002F640\u002F420' },\n]\n\u003C\u002Fscript>\n",[1524,1906,1907,1915,1934,1941,1955,1969,1982,1987,1994,2014,2033,2051,2069,2083,2097,2102,2122,2127,2136,2146,2155,2164,2169,2190,2203,2279,2343,2407,2470,2476],{"__ignoreMap":1601},[1611,1908,1909,1911,1913],{"class":1613,"line":1614},[1611,1910,1618],{"class":1617},[1611,1912,1599],{"class":1621},[1611,1914,1624],{"class":1617},[1611,1916,1917,1919,1921,1923,1925,1927,1930,1932],{"class":1613,"line":1627},[1611,1918,1630],{"class":1617},[1611,1920,1586],{"class":1621},[1611,1922,1636],{"class":1635},[1611,1924,1639],{"class":1617},[1611,1926,1642],{"class":1617},[1611,1928,1929],{"class":1645},"grid w-full max-w-3xl gap-6 sm:grid-cols-2",[1611,1931,1642],{"class":1617},[1611,1933,1624],{"class":1617},[1611,1935,1936,1938],{"class":1613,"line":1653},[1611,1937,1656],{"class":1617},[1611,1939,1940],{"class":1621},"figure\n",[1611,1942,1943,1946,1948,1950,1953],{"class":1613,"line":1662},[1611,1944,1945],{"class":1635},"      v-for",[1611,1947,1639],{"class":1617},[1611,1949,1642],{"class":1617},[1611,1951,1952],{"class":1645},"sample in samples",[1611,1954,1677],{"class":1617},[1611,1956,1957,1960,1962,1964,1967],{"class":1613,"line":1680},[1611,1958,1959],{"class":1635},"      :key",[1611,1961,1639],{"class":1617},[1611,1963,1642],{"class":1617},[1611,1965,1966],{"class":1645},"sample.label",[1611,1968,1677],{"class":1617},[1611,1970,1971,1973,1975,1977,1980],{"class":1613,"line":1695},[1611,1972,1712],{"class":1635},[1611,1974,1639],{"class":1617},[1611,1976,1642],{"class":1617},[1611,1978,1979],{"class":1645},"space-y-2",[1611,1981,1677],{"class":1617},[1611,1983,1984],{"class":1613,"line":1709},[1611,1985,1986],{"class":1617},"    >\n",[1611,1988,1989,1992],{"class":1613,"line":1724},[1611,1990,1991],{"class":1617},"      \u003C",[1611,1993,1659],{"class":1621},[1611,1995,1996,1999,2001,2003,2005,2008,2010,2012],{"class":1613,"line":1730},[1611,1997,1998],{"class":1617},"        :",[1611,2000,1568],{"class":1635},[1611,2002,1639],{"class":1617},[1611,2004,1642],{"class":1617},[1611,2006,2007],{"class":1674},"sample",[1611,2009,1891],{"class":1617},[1611,2011,1568],{"class":1674},[1611,2013,1677],{"class":1617},[1611,2015,2016,2018,2020,2022,2024,2026,2028,2031],{"class":1613,"line":1750},[1611,2017,1998],{"class":1617},[1611,2019,1571],{"class":1635},[1611,2021,1639],{"class":1617},[1611,2023,1642],{"class":1617},[1611,2025,2007],{"class":1674},[1611,2027,1891],{"class":1617},[1611,2029,2030],{"class":1674},"label",[1611,2032,1677],{"class":1617},[1611,2034,2035,2037,2039,2041,2043,2045,2047,2049],{"class":1613,"line":1756},[1611,2036,1998],{"class":1617},[1611,2038,1575],{"class":1635},[1611,2040,1639],{"class":1617},[1611,2042,1642],{"class":1617},[1611,2044,2007],{"class":1674},[1611,2046,1891],{"class":1617},[1611,2048,1575],{"class":1674},[1611,2050,1677],{"class":1617},[1611,2052,2053,2055,2057,2059,2061,2063,2065,2067],{"class":1613,"line":1766},[1611,2054,1998],{"class":1617},[1611,2056,1890],{"class":1635},[1611,2058,1639],{"class":1617},[1611,2060,1642],{"class":1617},[1611,2062,2007],{"class":1674},[1611,2064,1891],{"class":1617},[1611,2066,1890],{"class":1674},[1611,2068,1677],{"class":1617},[1611,2070,2071,2074,2076,2078,2081],{"class":1613,"line":1776},[1611,2072,2073],{"class":1635},"        rounded",[1611,2075,1639],{"class":1617},[1611,2077,1642],{"class":1617},[1611,2079,2080],{"class":1645},"rounded-xl",[1611,2082,1677],{"class":1617},[1611,2084,2085,2088,2090,2092,2095],{"class":1613,"line":1786},[1611,2086,2087],{"class":1635},"        class",[1611,2089,1639],{"class":1617},[1611,2091,1642],{"class":1617},[1611,2093,2094],{"class":1645},"h-40",[1611,2096,1677],{"class":1617},[1611,2098,2099],{"class":1613,"line":1793},[1611,2100,2101],{"class":1617},"      \u002F>\n",[1611,2103,2104,2106,2109,2111,2113,2115,2118,2120],{"class":1613,"line":1818},[1611,2105,1991],{"class":1617},[1611,2107,2108],{"class":1621},"figcaption",[1611,2110,1636],{"class":1635},[1611,2112,1639],{"class":1617},[1611,2114,1642],{"class":1617},[1611,2116,2117],{"class":1645},"text-xs text-muted",[1611,2119,1642],{"class":1617},[1611,2121,1624],{"class":1617},[1611,2123,2124],{"class":1613,"line":1838},[1611,2125,2126],{"class":1674},"        mask=\"{{ sample.mask }}\" · direction=\"{{ sample.direction }}\"\n",[1611,2128,2129,2132,2134],{"class":1613,"line":1855},[1611,2130,2131],{"class":1617},"      \u003C\u002F",[1611,2133,2108],{"class":1621},[1611,2135,1624],{"class":1617},[1611,2137,2139,2141,2144],{"class":1613,"line":2138},19,[1611,2140,1759],{"class":1617},[1611,2142,2143],{"class":1621},"figure",[1611,2145,1624],{"class":1617},[1611,2147,2149,2151,2153],{"class":1613,"line":2148},20,[1611,2150,1769],{"class":1617},[1611,2152,1586],{"class":1621},[1611,2154,1624],{"class":1617},[1611,2156,2158,2160,2162],{"class":1613,"line":2157},21,[1611,2159,1779],{"class":1617},[1611,2161,1599],{"class":1621},[1611,2163,1624],{"class":1617},[1611,2165,2167],{"class":1613,"line":2166},22,[1611,2168,1790],{"emptyLinePlaceholder":1789},[1611,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188],{"class":1613,"line":2171},23,[1611,2173,1618],{"class":1617},[1611,2175,1798],{"class":1621},[1611,2177,1801],{"class":1635},[1611,2179,1804],{"class":1635},[1611,2181,1639],{"class":1617},[1611,2183,1642],{"class":1617},[1611,2185,1811],{"class":1645},[1611,2187,1642],{"class":1617},[1611,2189,1624],{"class":1617},[1611,2191,2193,2195,2198,2200],{"class":1613,"line":2192},24,[1611,2194,1821],{"class":1635},[1611,2196,2197],{"class":1674}," samples ",[1611,2199,1639],{"class":1617},[1611,2201,2202],{"class":1674}," [\n",[1611,2204,2206,2209,2212,2215,2217,2220,2223,2226,2229,2231,2233,2235,2237,2241,2244,2246,2249,2251,2253,2256,2258,2260,2262,2264,2267,2269,2271,2274,2276],{"class":1613,"line":2205},25,[1611,2207,2208],{"class":1617},"  {",[1611,2210,2211],{"class":1621}," label",[1611,2213,2214],{"class":1617},":",[1611,2216,1829],{"class":1617},[1611,2218,2219],{"class":1645},"Wipe from the right",[1611,2221,2222],{"class":1617},"'",[1611,2224,2225],{"class":1617},",",[1611,2227,2228],{"class":1621}," mask",[1611,2230,2214],{"class":1617},[1611,2232,1829],{"class":1617},[1611,2234,1526],{"class":1645},[1611,2236,2222],{"class":1617},[1611,2238,2240],{"class":2239},"s7zQu"," as",[1611,2242,2243],{"class":1635}," const",[1611,2245,2225],{"class":1617},[1611,2247,2248],{"class":1621}," direction",[1611,2250,2214],{"class":1617},[1611,2252,1829],{"class":1617},[1611,2254,2255],{"class":1645},"right",[1611,2257,2222],{"class":1617},[1611,2259,2240],{"class":2239},[1611,2261,2243],{"class":1635},[1611,2263,2225],{"class":1617},[1611,2265,2266],{"class":1621}," src",[1611,2268,2214],{"class":1617},[1611,2270,1829],{"class":1617},[1611,2272,2273],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-wipe\u002F640\u002F420",[1611,2275,2222],{"class":1617},[1611,2277,2278],{"class":1617}," },\n",[1611,2280,2282,2284,2286,2288,2290,2293,2295,2297,2299,2301,2303,2305,2307,2309,2311,2313,2315,2317,2319,2322,2324,2326,2328,2330,2332,2334,2336,2339,2341],{"class":1613,"line":2281},26,[1611,2283,2208],{"class":1617},[1611,2285,2211],{"class":1621},[1611,2287,2214],{"class":1617},[1611,2289,1829],{"class":1617},[1611,2291,2292],{"class":1645},"Curtain from the bottom",[1611,2294,2222],{"class":1617},[1611,2296,2225],{"class":1617},[1611,2298,2228],{"class":1621},[1611,2300,2214],{"class":1617},[1611,2302,1829],{"class":1617},[1611,2304,1530],{"class":1645},[1611,2306,2222],{"class":1617},[1611,2308,2240],{"class":2239},[1611,2310,2243],{"class":1635},[1611,2312,2225],{"class":1617},[1611,2314,2248],{"class":1621},[1611,2316,2214],{"class":1617},[1611,2318,1829],{"class":1617},[1611,2320,2321],{"class":1645},"up",[1611,2323,2222],{"class":1617},[1611,2325,2240],{"class":2239},[1611,2327,2243],{"class":1635},[1611,2329,2225],{"class":1617},[1611,2331,2266],{"class":1621},[1611,2333,2214],{"class":1617},[1611,2335,1829],{"class":1617},[1611,2337,2338],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-curtain\u002F640\u002F420",[1611,2340,2222],{"class":1617},[1611,2342,2278],{"class":1617},[1611,2344,2346,2348,2350,2352,2354,2357,2359,2361,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2386,2388,2390,2392,2394,2396,2398,2400,2403,2405],{"class":1613,"line":2345},27,[1611,2347,2208],{"class":1617},[1611,2349,2211],{"class":1621},[1611,2351,2214],{"class":1617},[1611,2353,1829],{"class":1617},[1611,2355,2356],{"class":1645},"Blinds from the left",[1611,2358,2222],{"class":1617},[1611,2360,2225],{"class":1617},[1611,2362,2228],{"class":1621},[1611,2364,2214],{"class":1617},[1611,2366,1829],{"class":1617},[1611,2368,1537],{"class":1645},[1611,2370,2222],{"class":1617},[1611,2372,2240],{"class":2239},[1611,2374,2243],{"class":1635},[1611,2376,2225],{"class":1617},[1611,2378,2248],{"class":1621},[1611,2380,2214],{"class":1617},[1611,2382,1829],{"class":1617},[1611,2384,2385],{"class":1645},"left",[1611,2387,2222],{"class":1617},[1611,2389,2240],{"class":2239},[1611,2391,2243],{"class":1635},[1611,2393,2225],{"class":1617},[1611,2395,2266],{"class":1621},[1611,2397,2214],{"class":1617},[1611,2399,1829],{"class":1617},[1611,2401,2402],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-blinds\u002F640\u002F420",[1611,2404,2222],{"class":1617},[1611,2406,2278],{"class":1617},[1611,2408,2410,2412,2414,2416,2418,2421,2423,2425,2427,2429,2431,2433,2435,2437,2439,2441,2443,2445,2447,2449,2451,2453,2455,2457,2459,2461,2463,2466,2468],{"class":1613,"line":2409},28,[1611,2411,2208],{"class":1617},[1611,2413,2211],{"class":1621},[1611,2415,2214],{"class":1617},[1611,2417,1829],{"class":1617},[1611,2419,2420],{"class":1645},"Scale up",[1611,2422,2222],{"class":1617},[1611,2424,2225],{"class":1617},[1611,2426,2228],{"class":1621},[1611,2428,2214],{"class":1617},[1611,2430,1829],{"class":1617},[1611,2432,1541],{"class":1645},[1611,2434,2222],{"class":1617},[1611,2436,2240],{"class":2239},[1611,2438,2243],{"class":1635},[1611,2440,2225],{"class":1617},[1611,2442,2248],{"class":1621},[1611,2444,2214],{"class":1617},[1611,2446,1829],{"class":1617},[1611,2448,2385],{"class":1645},[1611,2450,2222],{"class":1617},[1611,2452,2240],{"class":2239},[1611,2454,2243],{"class":1635},[1611,2456,2225],{"class":1617},[1611,2458,2266],{"class":1621},[1611,2460,2214],{"class":1617},[1611,2462,1829],{"class":1617},[1611,2464,2465],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Freveal-scale\u002F640\u002F420",[1611,2467,2222],{"class":1617},[1611,2469,2278],{"class":1617},[1611,2471,2473],{"class":1613,"line":2472},29,[1611,2474,2475],{"class":1674},"]\n",[1611,2477,2479,2481,2483],{"class":1613,"line":2478},30,[1611,2480,1779],{"class":1617},[1611,2482,1798],{"class":1621},[1611,2484,1624],{"class":1617},[1867,2486,2488],{"id":2487},"counter-parallax","Counter-parallax",[1520,2490,2491,2494,2495,2498,2499,2502],{},[1524,2492,2493],{},"parallax"," controls how far the image drifts inside its overscanned frame. A\nsmall value is a subtle settle; a large one is a pronounced slide. Note the\ndrift is never fully off: any falsy value (including ",[1524,2496,2497],{},"0",") falls back to the\n",[1524,2500,2501],{},"60"," default, so use a small positive number to minimise it.",[1582,2504,2505,2511],{"label":1584},[1586,2506,1593,2508],{"className":2507},[1589,1590,1591,1592],[1595,2509],{"name":2510},"scroll-image-reveal-parallax",[1599,2512,2513],{"v-slot:code":1601},[1603,2514,2516],{"className":1605,"code":2515,"language":1607,"meta":1601,"style":1601},"\u003Ctemplate>\n  \u003Cdiv class=\"flex w-full max-w-2xl gap-4\">\n    \u003Cdiv class=\"flex-1 space-y-2\">\n      \u003CMScrollImageReveal\n        :src=\"src\"\n        alt=\"Subtle parallax\"\n        :parallax=\"20\"\n        mask=\"wipe\"\n        class=\"h-64\"\n      \u002F>\n      \u003Cp class=\"text-xs text-muted\">\n        parallax=\"20\" — a gentle drift\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"flex-1 space-y-2\">\n      \u003CMScrollImageReveal\n        :src=\"src\"\n        alt=\"Strong parallax\"\n        :parallax=\"140\"\n        mask=\"wipe\"\n        class=\"h-64\"\n      \u002F>\n      \u003Cp class=\"text-xs text-muted\">\n        parallax=\"140\" — a pronounced drift\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst src = 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-parallax\u002F900\u002F600'\n\u003C\u002Fscript>\n",[1524,2517,2518,2526,2545,2564,2570,2584,2598,2614,2627,2639,2643,2661,2666,2674,2682,2686,2704,2710,2724,2737,2752,2764,2776,2780,2798,2803,2811,2819,2827,2835,2839,2860,2876],{"__ignoreMap":1601},[1611,2519,2520,2522,2524],{"class":1613,"line":1614},[1611,2521,1618],{"class":1617},[1611,2523,1599],{"class":1621},[1611,2525,1624],{"class":1617},[1611,2527,2528,2530,2532,2534,2536,2538,2541,2543],{"class":1613,"line":1627},[1611,2529,1630],{"class":1617},[1611,2531,1586],{"class":1621},[1611,2533,1636],{"class":1635},[1611,2535,1639],{"class":1617},[1611,2537,1642],{"class":1617},[1611,2539,2540],{"class":1645},"flex w-full max-w-2xl gap-4",[1611,2542,1642],{"class":1617},[1611,2544,1624],{"class":1617},[1611,2546,2547,2549,2551,2553,2555,2557,2560,2562],{"class":1613,"line":1653},[1611,2548,1656],{"class":1617},[1611,2550,1586],{"class":1621},[1611,2552,1636],{"class":1635},[1611,2554,1639],{"class":1617},[1611,2556,1642],{"class":1617},[1611,2558,2559],{"class":1645},"flex-1 space-y-2",[1611,2561,1642],{"class":1617},[1611,2563,1624],{"class":1617},[1611,2565,2566,2568],{"class":1613,"line":1662},[1611,2567,1991],{"class":1617},[1611,2569,1659],{"class":1621},[1611,2571,2572,2574,2576,2578,2580,2582],{"class":1613,"line":1680},[1611,2573,1998],{"class":1617},[1611,2575,1568],{"class":1635},[1611,2577,1639],{"class":1617},[1611,2579,1642],{"class":1617},[1611,2581,1568],{"class":1674},[1611,2583,1677],{"class":1617},[1611,2585,2586,2589,2591,2593,2596],{"class":1613,"line":1695},[1611,2587,2588],{"class":1635},"        alt",[1611,2590,1639],{"class":1617},[1611,2592,1642],{"class":1617},[1611,2594,2595],{"class":1645},"Subtle parallax",[1611,2597,1677],{"class":1617},[1611,2599,2600,2602,2604,2606,2608,2612],{"class":1613,"line":1709},[1611,2601,1998],{"class":1617},[1611,2603,2493],{"class":1635},[1611,2605,1639],{"class":1617},[1611,2607,1642],{"class":1617},[1611,2609,2611],{"class":2610},"sbssI","20",[1611,2613,1677],{"class":1617},[1611,2615,2616,2619,2621,2623,2625],{"class":1613,"line":1724},[1611,2617,2618],{"class":1635},"        mask",[1611,2620,1639],{"class":1617},[1611,2622,1642],{"class":1617},[1611,2624,1526],{"class":1645},[1611,2626,1677],{"class":1617},[1611,2628,2629,2631,2633,2635,2637],{"class":1613,"line":1730},[1611,2630,2087],{"class":1635},[1611,2632,1639],{"class":1617},[1611,2634,1642],{"class":1617},[1611,2636,1719],{"class":1645},[1611,2638,1677],{"class":1617},[1611,2640,2641],{"class":1613,"line":1750},[1611,2642,2101],{"class":1617},[1611,2644,2645,2647,2649,2651,2653,2655,2657,2659],{"class":1613,"line":1756},[1611,2646,1991],{"class":1617},[1611,2648,1520],{"class":1621},[1611,2650,1636],{"class":1635},[1611,2652,1639],{"class":1617},[1611,2654,1642],{"class":1617},[1611,2656,2117],{"class":1645},[1611,2658,1642],{"class":1617},[1611,2660,1624],{"class":1617},[1611,2662,2663],{"class":1613,"line":1766},[1611,2664,2665],{"class":1674},"        parallax=\"20\" — a gentle drift\n",[1611,2667,2668,2670,2672],{"class":1613,"line":1776},[1611,2669,2131],{"class":1617},[1611,2671,1520],{"class":1621},[1611,2673,1624],{"class":1617},[1611,2675,2676,2678,2680],{"class":1613,"line":1786},[1611,2677,1759],{"class":1617},[1611,2679,1586],{"class":1621},[1611,2681,1624],{"class":1617},[1611,2683,2684],{"class":1613,"line":1793},[1611,2685,1790],{"emptyLinePlaceholder":1789},[1611,2687,2688,2690,2692,2694,2696,2698,2700,2702],{"class":1613,"line":1818},[1611,2689,1656],{"class":1617},[1611,2691,1586],{"class":1621},[1611,2693,1636],{"class":1635},[1611,2695,1639],{"class":1617},[1611,2697,1642],{"class":1617},[1611,2699,2559],{"class":1645},[1611,2701,1642],{"class":1617},[1611,2703,1624],{"class":1617},[1611,2705,2706,2708],{"class":1613,"line":1838},[1611,2707,1991],{"class":1617},[1611,2709,1659],{"class":1621},[1611,2711,2712,2714,2716,2718,2720,2722],{"class":1613,"line":1855},[1611,2713,1998],{"class":1617},[1611,2715,1568],{"class":1635},[1611,2717,1639],{"class":1617},[1611,2719,1642],{"class":1617},[1611,2721,1568],{"class":1674},[1611,2723,1677],{"class":1617},[1611,2725,2726,2728,2730,2732,2735],{"class":1613,"line":2138},[1611,2727,2588],{"class":1635},[1611,2729,1639],{"class":1617},[1611,2731,1642],{"class":1617},[1611,2733,2734],{"class":1645},"Strong parallax",[1611,2736,1677],{"class":1617},[1611,2738,2739,2741,2743,2745,2747,2750],{"class":1613,"line":2148},[1611,2740,1998],{"class":1617},[1611,2742,2493],{"class":1635},[1611,2744,1639],{"class":1617},[1611,2746,1642],{"class":1617},[1611,2748,2749],{"class":2610},"140",[1611,2751,1677],{"class":1617},[1611,2753,2754,2756,2758,2760,2762],{"class":1613,"line":2157},[1611,2755,2618],{"class":1635},[1611,2757,1639],{"class":1617},[1611,2759,1642],{"class":1617},[1611,2761,1526],{"class":1645},[1611,2763,1677],{"class":1617},[1611,2765,2766,2768,2770,2772,2774],{"class":1613,"line":2166},[1611,2767,2087],{"class":1635},[1611,2769,1639],{"class":1617},[1611,2771,1642],{"class":1617},[1611,2773,1719],{"class":1645},[1611,2775,1677],{"class":1617},[1611,2777,2778],{"class":1613,"line":2171},[1611,2779,2101],{"class":1617},[1611,2781,2782,2784,2786,2788,2790,2792,2794,2796],{"class":1613,"line":2192},[1611,2783,1991],{"class":1617},[1611,2785,1520],{"class":1621},[1611,2787,1636],{"class":1635},[1611,2789,1639],{"class":1617},[1611,2791,1642],{"class":1617},[1611,2793,2117],{"class":1645},[1611,2795,1642],{"class":1617},[1611,2797,1624],{"class":1617},[1611,2799,2800],{"class":1613,"line":2205},[1611,2801,2802],{"class":1674},"        parallax=\"140\" — a pronounced drift\n",[1611,2804,2805,2807,2809],{"class":1613,"line":2281},[1611,2806,2131],{"class":1617},[1611,2808,1520],{"class":1621},[1611,2810,1624],{"class":1617},[1611,2812,2813,2815,2817],{"class":1613,"line":2345},[1611,2814,1759],{"class":1617},[1611,2816,1586],{"class":1621},[1611,2818,1624],{"class":1617},[1611,2820,2821,2823,2825],{"class":1613,"line":2409},[1611,2822,1769],{"class":1617},[1611,2824,1586],{"class":1621},[1611,2826,1624],{"class":1617},[1611,2828,2829,2831,2833],{"class":1613,"line":2472},[1611,2830,1779],{"class":1617},[1611,2832,1599],{"class":1621},[1611,2834,1624],{"class":1617},[1611,2836,2837],{"class":1613,"line":2478},[1611,2838,1790],{"emptyLinePlaceholder":1789},[1611,2840,2842,2844,2846,2848,2850,2852,2854,2856,2858],{"class":1613,"line":2841},31,[1611,2843,1618],{"class":1617},[1611,2845,1798],{"class":1621},[1611,2847,1801],{"class":1635},[1611,2849,1804],{"class":1635},[1611,2851,1639],{"class":1617},[1611,2853,1642],{"class":1617},[1611,2855,1811],{"class":1645},[1611,2857,1642],{"class":1617},[1611,2859,1624],{"class":1617},[1611,2861,2863,2865,2867,2869,2871,2874],{"class":1613,"line":2862},32,[1611,2864,1821],{"class":1635},[1611,2866,1824],{"class":1674},[1611,2868,1639],{"class":1617},[1611,2870,1829],{"class":1617},[1611,2872,2873],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-parallax\u002F900\u002F600",[1611,2875,1835],{"class":1617},[1611,2877,2879,2881,2883],{"class":1613,"line":2878},33,[1611,2880,1779],{"class":1617},[1611,2882,1798],{"class":1621},[1611,2884,1624],{"class":1617},[1867,2886,2888],{"id":2887},"latch-the-reveal","Latch the reveal",[1520,2890,2891,2892,2894],{},"Set ",[1524,2893,1579],{}," when the reveal is a one-time entrance. The mask is then driven by the\nhigh-water mark of progress, so scrolling back up leaves the image fully\nrevealed instead of re-hiding it.",[1582,2896,2897,2903],{"label":1584},[1586,2898,1593,2900],{"className":2899},[1589,1590,1591,1592],[1595,2901],{"name":2902},"scroll-image-reveal-once",[1599,2904,2905],{"v-slot:code":1601},[1603,2906,2908],{"className":1605,"code":2907,"language":1607,"meta":1601,"style":1601},"\u003Ctemplate>\n  \u003Cdiv class=\"w-full max-w-lg space-y-3\">\n    \u003CMScrollImageReveal\n      :src=\"src\"\n      alt=\"Latched reveal\"\n      mask=\"wipe\"\n      once\n      class=\"h-64\"\n    \u002F>\n    \u003Cp class=\"text-sm text-muted\">\n      With \u003Ccode>once\u003C\u002Fcode> the image stays revealed after scrolling back up.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nconst src = 'https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-once\u002F900\u002F600'\n\u003C\u002Fscript>\n",[1524,2909,2910,2918,2936,2942,2956,2970,2982,2987,2999,3003,3022,3045,3053,3061,3069,3073,3093,3108],{"__ignoreMap":1601},[1611,2911,2912,2914,2916],{"class":1613,"line":1614},[1611,2913,1618],{"class":1617},[1611,2915,1599],{"class":1621},[1611,2917,1624],{"class":1617},[1611,2919,2920,2922,2924,2926,2928,2930,2932,2934],{"class":1613,"line":1627},[1611,2921,1630],{"class":1617},[1611,2923,1586],{"class":1621},[1611,2925,1636],{"class":1635},[1611,2927,1639],{"class":1617},[1611,2929,1642],{"class":1617},[1611,2931,1646],{"class":1645},[1611,2933,1642],{"class":1617},[1611,2935,1624],{"class":1617},[1611,2937,2938,2940],{"class":1613,"line":1653},[1611,2939,1656],{"class":1617},[1611,2941,1659],{"class":1621},[1611,2943,2944,2946,2948,2950,2952,2954],{"class":1613,"line":1662},[1611,2945,1665],{"class":1617},[1611,2947,1568],{"class":1635},[1611,2949,1639],{"class":1617},[1611,2951,1642],{"class":1617},[1611,2953,1568],{"class":1674},[1611,2955,1677],{"class":1617},[1611,2957,2958,2961,2963,2965,2968],{"class":1613,"line":1680},[1611,2959,2960],{"class":1635},"      alt",[1611,2962,1639],{"class":1617},[1611,2964,1642],{"class":1617},[1611,2966,2967],{"class":1645},"Latched reveal",[1611,2969,1677],{"class":1617},[1611,2971,2972,2974,2976,2978,2980],{"class":1613,"line":1695},[1611,2973,1698],{"class":1635},[1611,2975,1639],{"class":1617},[1611,2977,1642],{"class":1617},[1611,2979,1526],{"class":1645},[1611,2981,1677],{"class":1617},[1611,2983,2984],{"class":1613,"line":1709},[1611,2985,2986],{"class":1635},"      once\n",[1611,2988,2989,2991,2993,2995,2997],{"class":1613,"line":1724},[1611,2990,1712],{"class":1635},[1611,2992,1639],{"class":1617},[1611,2994,1642],{"class":1617},[1611,2996,1719],{"class":1645},[1611,2998,1677],{"class":1617},[1611,3000,3001],{"class":1613,"line":1730},[1611,3002,1727],{"class":1617},[1611,3004,3005,3007,3009,3011,3013,3015,3018,3020],{"class":1613,"line":1750},[1611,3006,1656],{"class":1617},[1611,3008,1520],{"class":1621},[1611,3010,1636],{"class":1635},[1611,3012,1639],{"class":1617},[1611,3014,1642],{"class":1617},[1611,3016,3017],{"class":1645},"text-sm text-muted",[1611,3019,1642],{"class":1617},[1611,3021,1624],{"class":1617},[1611,3023,3024,3027,3029,3031,3034,3036,3038,3040,3042],{"class":1613,"line":1756},[1611,3025,3026],{"class":1674},"      With ",[1611,3028,1618],{"class":1617},[1611,3030,1524],{"class":1621},[1611,3032,3033],{"class":1617},">",[1611,3035,1579],{"class":1674},[1611,3037,1779],{"class":1617},[1611,3039,1524],{"class":1621},[1611,3041,3033],{"class":1617},[1611,3043,3044],{"class":1674}," the image stays revealed after scrolling back up.\n",[1611,3046,3047,3049,3051],{"class":1613,"line":1766},[1611,3048,1759],{"class":1617},[1611,3050,1520],{"class":1621},[1611,3052,1624],{"class":1617},[1611,3054,3055,3057,3059],{"class":1613,"line":1776},[1611,3056,1769],{"class":1617},[1611,3058,1586],{"class":1621},[1611,3060,1624],{"class":1617},[1611,3062,3063,3065,3067],{"class":1613,"line":1786},[1611,3064,1779],{"class":1617},[1611,3066,1599],{"class":1621},[1611,3068,1624],{"class":1617},[1611,3070,3071],{"class":1613,"line":1793},[1611,3072,1790],{"emptyLinePlaceholder":1789},[1611,3074,3075,3077,3079,3081,3083,3085,3087,3089,3091],{"class":1613,"line":1818},[1611,3076,1618],{"class":1617},[1611,3078,1798],{"class":1621},[1611,3080,1801],{"class":1635},[1611,3082,1804],{"class":1635},[1611,3084,1639],{"class":1617},[1611,3086,1642],{"class":1617},[1611,3088,1811],{"class":1645},[1611,3090,1642],{"class":1617},[1611,3092,1624],{"class":1617},[1611,3094,3095,3097,3099,3101,3103,3106],{"class":1613,"line":1838},[1611,3096,1821],{"class":1635},[1611,3098,1824],{"class":1674},[1611,3100,1639],{"class":1617},[1611,3102,1829],{"class":1617},[1611,3104,3105],{"class":1645},"https:\u002F\u002Fpicsum.photos\u002Fseed\u002Fmotion-once\u002F900\u002F600",[1611,3107,1835],{"class":1617},[1611,3109,3110,3112,3114],{"class":1613,"line":1855},[1611,3111,1779],{"class":1617},[1611,3113,1798],{"class":1621},[1611,3115,1624],{"class":1617},[1556,3117,3119],{"id":3118},"customize","Customize",[1520,3121,3122,3123,1527,3125,1527,3127,1538,3129,3131],{},"Adjust the image, ",[1524,3124,1575],{},[1524,3126,1890],{},[1524,3128,2493],{},[1524,3130,1579],{}," live in the\nplayground below.",[1582,3133,3134,3140],{"label":1584},[1586,3135,1593,3137],{"className":3136},[1591],[1595,3138],{"name":3139},"scroll-image-reveal-custom",[1599,3141,3142],{"v-slot:code":1601},[3143,3144],"playground-code",{"name":3145},"ScrollImageReveal",[1556,3147,3149],{"id":3148},"props","Props",[3151,3152,3153,3166,3179,3186,3215,3229,3247,3262,3275],"component-props",{},[3154,3155,3158,3159,3162,3163,1891],"component-prop",{"name":1568,"type":3156,":required":3157},"string","true","Image URL, applied to the ",[1524,3160,3161],{},"\u003Cimg>"," directly — there is no loader or\nNuxt Image integration, so supply an optimised source yourself if size matters.\nThe image also carries ",[1524,3164,3165],{},"decoding=\"async\"",[3154,3167,3168,3169,3171,3172,3174,3175,3178],{"name":1571,"type":3156,":required":3157},"Forwarded to the ",[1524,3170,3161],{}," as its ",[1524,3173,1571],{},". The component will not invent\none, and there is no decorative mode — pass ",[1524,3176,3177],{},"alt=\"\""," yourself if the image is\npurely decorative.",[3154,3180,3183,3184,1891],{"name":1575,"type":3181,"default":3182},"'wipe' | 'curtain' | 'circle' | 'blinds' | 'scale'","'wipe'","Which reveal to use. See the table below for how each behaves and which honour\n",[1524,3185,1890],{},[3154,3187,3190,3191,3193,3194,3196,3197,1538,3199,3201,3202,3193,3204,3196,3207,3209,3210,1538,3212,3214],{"name":1890,"type":3188,"default":3189},"'left' | 'right' | 'up' | 'down'","'left'","Reveal direction. Only ",[1524,3192,2385],{},"\u002F",[1524,3195,2255],{}," apply to ",[1524,3198,1526],{},[1524,3200,1537],{},"; only\n",[1524,3203,2321],{},[1524,3205,3206],{},"down",[1524,3208,1530],{},"; ",[1524,3211,1534],{},[1524,3213,1541],{}," ignore it.",[3154,3216,3220,3221,3224,3225,3228],{"name":3217,"type":3218,"default":3219},"offset","ScrollOffset","['start 0.9', 'end 0.6']","Motion scroll-offset tuple for ",[1524,3222,3223],{},"useScroll",", measured against the frame. The\ndefault is deliberately narrower than Motion's own ",[1524,3226,3227],{},"['start start', 'end start']"," — running the full enter-to-exit range finishes the reveal just as\nthe element leaves the viewport, so the payoff happens off-screen.",[3154,3230,3232,3233,3236,3237,3240,3241,3243,3244,3246],{"name":2493,"type":3231,"default":2501},"number","Counter-parallax travel in pixels. The image is rendered\n",[1524,3234,3235],{},"calc(100% + ${parallax * 2}px)"," tall and offset by ",[1524,3238,3239],{},"-parallax",", so it drifts\nwithin an overscanned box and never drags a strip of background into view.\nThe absolute value is used, so a negative value behaves like its positive\ncounterpart, and any falsy value — including ",[1524,3242,2497],{}," — falls back to the ",[1524,3245,2501],{},"\ndefault, so there is no way to disable the drift from the prop.",[3154,3248,3251,3252,3254,3255,3257,3258,3261],{"name":1579,"type":3249,"default":3250},"boolean","false","Latch the reveal at its furthest point. With ",[1524,3253,3250],{}," (the default) the mask is\na pure function of scroll progress, so scrolling back up re-hides the image.\nWith ",[1524,3256,3157],{}," the component tracks ",[1524,3259,3260],{},"maxReveal"," and never retreats.",[3154,3263,3266,3267,3270,3271,3274],{"name":3264,"type":3156,"default":3265},"rounded","'rounded-2xl'","Tailwind ",[1524,3268,3269],{},"rounded-*"," class applied to the frame. Because the mask is on the\nframe, this is what rounds the revealed image — pass ",[1524,3272,3273],{},"rounded-none"," for square\ncorners.",[3154,3276,3278,3279,3282],{"name":1564,"type":3156,"default":3277},"''","Merged onto the frame after ",[1524,3280,3281],{},"relative overflow-hidden",". This is where you set\nthe frame's height — without one the component collapses, because the image\ninside is absolutely positioned and contributes no height of its own.",[1556,3284,3286],{"id":3285},"ui","UI",[1520,3288,3289,3290,3296,3297,3300,3301,1891],{},"This component's theme exposes the slots below. Override any of them per instance with the ",[3291,3292,3293,3295],"a",{"href":21},[1524,3294,3285],{}," prop",", or app-wide under ",[1524,3298,3299],{},"ui.scrollImageReveal"," in ",[1524,3302,3303],{},"app.config.ts",[3151,3305,3306],{},[3154,3307,3309],{"name":3285,"type":3308},"object","Per-slot classes merged over the theme defaults.",[3311,3312,3313,3319],"component-slots",{},[3314,3315,3317],"component-slot-row",{"name":3316},"root",[1524,3318,3281],{},[3314,3320,3322],{"name":3321},"image",[1524,3323,3324],{},"absolute inset-x-0 w-full object-cover",[1556,3326,3328],{"id":3327},"accessibility","Accessibility",[1520,3330,3331,3332,3335,3336,3338,3339,3341],{},"The component is a ",[1524,3333,3334],{},"\u003Cdiv>"," frame wrapping a single ",[1524,3337,3161],{}," that carries the\n",[1524,3340,1571],{}," you passed. It applies no ARIA attributes, roles or live regions of its own,\nand it does not manage focus — a scroll-driven reveal is purely visual, so\nnothing about it needs announcing.",[1520,3343,3344],{},"The image is in the accessibility tree from first paint, before the mask opens.\nA screen-reader user is therefore never blocked from the content, and the reveal\ncarries no semantic meaning that would need announcing.",[1520,3346,3347,3348,3351,3352,3355,3356,3359,3360,3363,3364,3366,3367,3369],{},"Under ",[1524,3349,3350],{},"prefers-reduced-motion"," — read via ",[1524,3353,3354],{},"useReducedMotion"," — the mask is\ndropped entirely (",[1524,3357,3358],{},"inset(0% 0% 0% 0%)"," \u002F ",[1524,3361,3362],{},"none","), parallax becomes ",[1524,3365,2497],{},", and the\n",[1524,3368,1541],{}," mask settles at full scale and full opacity. The image is simply there,\nfully visible and static.",[1556,3371,3373],{"id":3372},"performance","Performance",[3375,3376,3377,3398,3412,3423,3430],"ul",{},[3378,3379,3380,3381,3383,3384,3387,3388,1527,3391,1531,3394,3397],"li",{},"One ",[1524,3382,3223],{}," and one ",[1524,3385,3386],{},"useSpring"," (",[1524,3389,3390],{},"stiffness: 260",[1524,3392,3393],{},"mass: 0.4",[1524,3395,3396],{},"damping: 32",") for the whole component. Every mask, the parallax and the\nopacity all derive from that single smoothed value.",[3378,3399,3400,3401,3404,3405,3359,3408,3411],{},"The mask is a ",[1524,3402,3403],{},"useTransform"," returning a CSS string, so the browser composites\nthe reveal on ",[1524,3406,3407],{},"clip-path",[1524,3409,3410],{},"mask-image"," rather than the component writing a\nstyle on every scroll tick.",[3378,3413,3414,3415,3418,3419,3422],{},"The image's drift is a ",[1524,3416,3417],{},"y"," transform inside an overscanned box, so parallax\ncosts one transform instead of a ",[1524,3420,3421],{},"top"," change and no layout.",[3378,3424,3425,3426,3429],{},"The image is deliberately oversized (",[1524,3427,3428],{},"100% + 2 × parallax",") so the drift never\nexposes the frame's background — no reflow when the scroll offset changes.",[3378,3431,3432,3434,3435,3437],{},[1524,3433,1579],{}," is implemented by tracking a ",[1524,3436,3260],{}," ref inside the transform, so\nlatching costs one number rather than a separate animation or watcher.",[3439,3440,3441,3442,3445,3446,3448,3449,3452,3453,3456],"tip",{},"Reveal progress is multiplied by ",[1524,3443,3444],{},"2.5"," before it reaches the mask. The scroll\nwindow is intentionally longer than the visible reveal, so the image finishes\nunmasking while still comfortably on screen rather than as it slides away. If\nyour image feels like it reveals too late, widen ",[1524,3447,3217],{},"'s first value (pull\n",[1524,3450,3451],{},"start 0.9"," toward ",[1524,3454,3455],{},"start 1",") rather than reaching for a different mask.",[1556,3458,3460],{"id":3459},"masks","Masks",[3462,3463,3464,3482],"table",{},[3465,3466,3467],"thead",{},[3468,3469,3470,3474,3477],"tr",{},[3471,3472,3473],"th",{},"Mask",[3471,3475,3476],{},"Mechanism",[3471,3478,3479,3481],{},[1524,3480,1890],{}," applies",[3483,3484,3485,3509,3526,3541,3563],"tbody",{},[3468,3486,3487,3497,3503],{},[3488,3489,3490,3492,3493],"td",{},[1524,3491,1526],{}," ",[3494,3495,3496],"em",{},"(default)",[3488,3498,3499,3502],{},[1524,3500,3501],{},"clip-path: inset()"," cutting from one edge",[3488,3504,3505,3359,3507],{},[1524,3506,2385],{},[1524,3508,2255],{},[3468,3510,3511,3515,3520],{},[3488,3512,3513],{},[1524,3514,1530],{},[3488,3516,3517,3519],{},[1524,3518,3501],{}," cutting from top or bottom",[3488,3521,3522,3359,3524],{},[1524,3523,2321],{},[1524,3525,3206],{},[3468,3527,3528,3532,3538],{},[3488,3529,3530],{},[1524,3531,1534],{},[3488,3533,3534,3537],{},[1524,3535,3536],{},"clip-path: circle()"," expanding from the centre",[3488,3539,3540],{},"ignored — always centred",[3468,3542,3543,3547,3553],{},[3488,3544,3545],{},[1524,3546,1537],{},[3488,3548,3549,3552],{},[1524,3550,3551],{},"repeating-linear-gradient"," mask, opaque band growing",[3488,3554,3555,3359,3557,3359,3559,3359,3561],{},[1524,3556,2385],{},[1524,3558,2255],{},[1524,3560,2321],{},[1524,3562,3206],{},[3468,3564,3565,3569,3576],{},[3488,3566,3567],{},[1524,3568,1541],{},[3488,3570,3571,3572,3575],{},"No mask — the image scales down from ",[1524,3573,3574],{},"1.12"," and fades in",[3488,3577,3578],{},"ignored",[1520,3580,3581,3583,3584,3586,3587,3589,3590,3586,3592,3594,3595,3597,3598,3600,3601,3603],{},[1524,3582,1890],{}," is only honoured by the masks listed above. ",[1524,3585,1526],{}," reads ",[1524,3588,2255],{}," as\n\"reveal from the right edge inward\" and anything else as \"from the left edge\ninward\"; ",[1524,3591,1530],{},[1524,3593,3206],{}," and anything else as \"from the bottom upward\".\nPassing ",[1524,3596,2321],{}," or ",[1524,3599,3206],{}," to ",[1524,3602,1526],{}," silently gets you the left-edge behaviour.",[1520,3605,3606,3608],{},[1524,3607,1537],{}," is the odd one out: a clip path can only cut one continuous region, so\nthe slats come from a hard-edged repeating gradient whose opaque band widens with\nprogress. Band size is fixed at 40px and is not configurable.",[3610,3611,3612],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":1601,"searchDepth":1627,"depth":1627,"links":3614},[3615,3616,3621,3622,3623,3624,3625,3626],{"id":1558,"depth":1627,"text":16},{"id":1864,"depth":1627,"text":1865,"children":3617},[3618,3619,3620],{"id":1869,"depth":1653,"text":1870},{"id":2487,"depth":1653,"text":2488},{"id":2887,"depth":1653,"text":2888},{"id":3118,"depth":1627,"text":3119},{"id":3148,"depth":1627,"text":3149},{"id":3285,"depth":1627,"text":3286},{"id":3327,"depth":1627,"text":3328},{"id":3372,"depth":1627,"text":3373},{"id":3459,"depth":1627,"text":3460},"An image unmasked by scroll progress through a wipe, curtain, circle, blinds or scale, with counter-parallax inside the frame.","md",null,{},{"title":1027,"description":3627},"VeFyuQV1SYdY-C4FOKyoejDdlLwLI2G_jOljNfifouI",[3634,3636],{"title":1023,"path":1024,"stem":1025,"description":3635,"children":-1},"An endless row or column of content that can reverse, run vertically and pause on hover.",{"title":1031,"path":1032,"stem":1033,"description":3637,"children":-1},"A bar whose horizontal scale follows scroll progress, tracking the window or any scroll container.",1793501815634]