1import{_ as F}from"./preload-helper-MdnHvRDh.js";import{j as n,r as l,u as L}from"./chunk-6CSD65Y2-BDCp14CY.js";import{r as D}from"./index-bMnskurX.js";import{m as R}from"./react-HV0pzbkM.js";import{S as K,f as _,d as U,e as B,h as H,i as q,j as V,k as G,l as W,m as J,n as Y,o as Q,p as X,q as tt,r as et,s as ot,t as nt,u as at,v as rt,w as st,x as it,y as ct,z as dt,A as lt,B as mt,C as ut,E as pt,F as gt,H as ft,I as ht,J as xt,K as vt,L as bt,N as yt,O as wt,P as $t,Q as St,R as kt,T as At,U as Tt,V as It,W as Mt,X as zt,Y as Rt,Z as jt,_ as Pt,$ as Zt,a0 as Ct,a1 as Et,a2 as Nt,a3 as Ot,a4 as Ft,a5 as Lt,a6 as Dt,a7 as Kt,a8 as _t,a9 as Ut,aa as Bt,ab as Ht,ac as qt,ad as Vt,ae as Gt,af as Wt,ag as Jt,ah as Yt,ai as Qt,aj as Xt,ak as te,al as ee,am as oe,an as ne,ao as ae,ap as re,aq as se,ar as ie,as as ce,at as de,au as le,av as me,aw as ue,ax as pe,ay as ge,az as fe,aA as he,aB as xe,aC as ve,aD as be,aE as ye,aF as we,aG as $e,aH as Se,aI as ke,aJ as Ae,aK as Te,aL as Ie,aM as Me,aN as ze,aO as Re,aP as je,aQ as Pe,aR as Ze,aS as Ce,aT as Ee,aU as Ne,aV as Oe,aW as Fe,aX as Le,aY as De,aZ as Ke,a_ as _e,a$ as Ue,b0 as Be,b1 as He,b2 as qe,b3 as Ve,b4 as Ge,b5 as We,b6 as Je,b7 as Ye,b8 as Qe,b9 as Xe,ba as to,bb as eo,bc as oo,bd as no,be as ao,bf as ro,bg as so,bh as io,bi as co,bj as lo,bk as mo,bl as uo,bm as po,bn as go,bo as fo,bp as ho,bq as xo,br as vo,bs as bo,bt as yo,bu as wo,bv as $o,bw as So,bx as ko,by as Ao,bz as To}from"./docs-Sn5pr6MA.js";import{i as M}from"./index-BbGlM52G.js";import{M as Io,g as j}from"./motion-ui-DBjKjyYL.js";import{F as P}from"./FrameworkLogo-DhFZkj6i.js";/* empty css */import{A as Mo}from"./index-CJnYBG3-.js";import"./frame-BbS1luyY.js";import"./index-CXHAiFMv.js";import"./resolve-elements-BfI7WMiw.js";import"./tutorial-NWf765fI.js";const zo={title:"A View Transition API for the rest of us",description:"The View Transition API can animate the impossible, but using it can be painful. Here's how Motion's animateView(), now free in the core library, fixes its rough edges.",slug:"a-view-transitions-api-for-the-rest-of-us",date:"2026-06-30T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/animate-view-header.jpg",width:1683,height:935,alt:"A compact now playing bar morphing step by step into a full music player card"}},Ro={title:"Building the ultimate ticker",description:"Ticker compoments are becoming common decorative features, but building a good one isn't easy. Let's take a look at the problem with CSS components, and how Motion+ Ticker aims to solve them.",slug:"building-the-ultimate-ticker",date:"2025-06-05T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/GMjwImBgc9duFV76RUOaN2Mc.jpg",width:1800,height:1e3,alt:""}},jo={title:"Crashing cars and improving hover detection",description:"Fast pointer movements can skip over elements, breaking hover detection. The surprising solution can be found in game development.",slug:"collision-detection-in-hover-detection",date:"2026-06-04T00:00:00.000Z",category:"Feature",listed:!0,authorSlug:"matt-perry"},Po={title:"Do you still need Framer Motion?",description:"CSS has closed the gap on five of Framer Motion's headline features. Here's what you can now drop the library for, and where a JS animation library still wins.",slug:"do-you-still-need-framer-motion",date:"2024-05-29T00:00:00.000Z",category:"Opinion",listed:!0,authorSlug:"matt-perry"},Zo={title:"Framer Motion is now independent, introducing Motion",description:"Framer Motion is now independent. Introducing Motion, a new animation library for React and all JavaScript environments. Here's what it means for you.",slug:"framer-motion-is-now-independent-introducing-motion",date:"2024-11-12T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/PW7TZzsRuEq5sLfu3FYVeD6Kcg.png",width:2217,height:1406,alt:"3D render of Motion logo"}},Co={title:"How to add cmd-k search shortcut to your Framer site",description:"By default, the Framer Search component doesn't support the cmd-k keyboard shortcut. Here's how to add it to your Framer site.",slug:"how-to-add-cmd-k-search-shortcut-to-your-framer-site",date:"2024-11-20T00:00:00.000Z",category:"How-To",listed:!0,authorSlug:"matt-perry"},Eo={title:"How To: Hardware-accelerate your favourite GSAP easing functions",description:"The Web Animations API is included with every browser, but only supports CSS timing functions. Let's supercharge it with GSAP's easing functions!",slug:"how-to-use-your-favourite-gsap-easings-with-waapi",date:"2026-01-26T00:00:00.000Z",category:"How-To",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/rCRjf4zUtZHHo4u3DUPxTrsREQ.png",width:1994,height:1086,alt:""}},No={title:"Interview: David Haz, creator of React Bits",description:"We sit down with David Haz, creator of React Bits, about AI, build systems, productivity and more.",slug:"interview-david-haz-creator-of-react-bits",date:"2026-01-08T00:00:00.000Z",category:"Interview",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/B11EJ9tiIZXSP7ouZ3Fo7IisSqw.png",width:1920,height:1040,alt:""}},Oo={title:"Introducing magnetic and zoning features in Motion+ Cursor",description:"Motion+ Cursor gains powerful magnetic and zoning features, allowing your cursors to react to, snap to, and morph to hit targets.",slug:"introducing-magnetic-cursors-in-motion-cursor",date:"2025-05-13T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry"},Fo={title:"Introducing Motion for Vue",description:"Motion finally arr
1ives on Vue, complete with variants, scroll, layout animations, and everything else you love from Framer Motion.",slug:"introducing-motion-for-vue",date:"2025-03-19T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/gFJHc66zMdnKtqPqXUjOak1y1wA.png",width:1726,height:940,alt:""}},Lo={title:"Introducing Motion Studio",description:"A visual and agentic animation editor for your website. Edit Motion animations in a timeline alongside our new Ultramotion agent, and write the result to your code using your existing workflow.",slug:"introducing-motion-studio",date:"2026-09-22T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://motion.dev/images/magazine/motion-studio-header.png",width:2400,height:1260,alt:"Motion Studio timeline and agent editor centred over a red and pink wave"}},Do={title:"Introducing Motion UI",description:"Production-ready animated sections and components for React. Everything performance-graded with MotionScore, drop-in to your design system via shadcn tokens or AI.",slug:"introducing-motion-ui",date:"2026-07-23T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/introducing-motion-ui-hero.png",width:1800,height:1e3,alt:""}},Ko={title:"Introducing the Motion+ Carousel",description:"Meet the Motion+ Carousel for React. A performant and accessible component with infinite loops and pixel-perfect swiping.",slug:"introducing-the-motion-carousel",date:"2025-11-25T00:00:00.000Z",category:"Announcement",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/oTlEwUgnWSnhaARDalKz5Mv5q8.png",width:1800,height:1e3,alt:""}},_o={title:"Motion's independence: One year in review",description:"It's been an entire year since I took Framer Motion independent as Motion. Here's how it's gone, and what I learned in this first year.",slug:"motion-independence-one-year-in-review",date:"2025-11-17T00:00:00.000Z",category:"Feature",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/Y0P9c0xJ3IDQblchKWxoo5NvXcE.png",width:1800,height:920,alt:""}},Uo={title:"Revealed: React's experimental animations API",description:"React is experimenting with a new animation API based on the View Transition API. How does it work? What can it do? We reveal all in this blog post.",slug:"reacts-experimental-view-transition-api",date:"2025-01-13T00:00:00.000Z",category:"News",listed:!0,authorSlug:"matt-perry"},Bo={title:"Should I use Framer Motion or Motion One?",description:"As the author of both Framer Motion and Motion One, many users ask which is best for them. Let's take a look at the strengths and weaknesses of each to find out.",slug:"should-i-use-framer-motion-or-motion-one",date:"2022-06-11T00:00:00.000Z",category:"Opinion",listed:!1,authorSlug:"matt-perry"},Ho={title:"Supercharging the GTA VI website with Motion",description:"Rockstar's beautiful GTA VI website could load even faster with Motion's deferred keyframe resolution and use of native browser APIs.",slug:"supercharging-the-gta-vi-website-with-motion",date:"2025-05-07T00:00:00.000Z",category:"Audit",listed:!0,authorSlug:"matt-perry",hero:{url:"https://images.motion.dev/magazine/NuhceCv6C9R2cQ7PMhYjpNnVo.jpg",width:3840,height:2160,alt:""}},qo={title:"The Web Animation Performance Tier List",description:"Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.",slug:"web-animation-performance-tier-list",date:"2025-11-05T00:00:00.000Z",category:"Feature",listed:!0,authorSlug:"matt-perry"},Vo={title:"When browsers throttle requestAnimationFrame",description:"In specific situations Safari and Firefox may throttle requestAnimationFrame. Hereâs why your JavaScript animations are janky.",slug:"when-browsers-throttle-requestanimationframe",date:"2020-10-01T00:00:00.000Z",category:"Feature",listed:!0,authorSlug:"matt-perry"},Go={title:"Perform animation on null",slug:"animate-null",description:"",severity:"error",message:"You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.",listed:!0},Wo={title:"Color not animatable",slug:"color-not-animatable",description:"",severity:"warning",message:"'${color}' is not an animatable color. Use the equivalent color code instead.",listed:!0},Jo={title:"Complex values are too different",slug:"complex-values-different",description:"",severity:"warning",message:"Complex values '${origin}' and '${target}
1' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.",listed:!0},Yo={title:"Incorrect cubic bezier length",slug:"cubic-bezier-length",description:"",severity:"error",message:"Cubic bezier arrays must contain four numerical values.",listed:!0},Qo={title:"Custom component ref is not an element",slug:"custom-component-ref",description:"",severity:"error",message:"motion.create() components must forward their ref to a HTML or SVG element",listed:!0},Xo={title:"dragConstraints ref not hydrated",slug:"drag-constraints-ref",description:"",severity:"error",message:"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.",listed:!0},tn={title:"Invalid easing type",slug:"invalid-easing-type",description:"",severity:"error",message:"Invalid easing type '${definition}'",listed:!0},en={title:"Lazy strict mode",slug:"lazy-strict-mode",description:"",severity:"error",message:"You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.",listed:!0},on={title:"Max CSS variable depth",slug:"max-css-var-depth",description:"",severity:"error",message:'Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.',listed:!0},nn={title:`Mini animate() doesn't support type: "spring"`,slug:"mini-spring",description:"",severity:"error",message:`Mini animate() doesn't support "type" as a string.`,listed:!0},an={title:"No valid elements",slug:"no-valid-elements",description:"",severity:"error",message:"No valid elements provided.",listed:!0},rn={title:"Range length mismatch",slug:"range-length",description:"",severity:"error",message:"Both input and output ranges must be the same length.",listed:!0},sn={title:"Reduced Motion enabled",slug:"reduced-motion-disabled",description:"",severity:"warning",message:"You have Reduced Motion enabled on your device. Animations may not appear as expected.",listed:!0},cn={title:"Reorder.Item must be child of Reorder.Group",slug:"reorder-item-child",description:"",severity:"error",message:"Reorder.Item must be a child of Reorder.Group",listed:!0},dn={title:"Reorder.Group must be provided values",slug:"reorder-values",description:"",severity:"error",message:"Reorder.Group must be provided a values prop",listed:!0},ln={title:"Repeat count too high",slug:"repeat-count-too-high",description:"",severity:"error",message:"Repeat count too high, must be less than 20.",listed:!0},mn={title:"Spring duration limit",slug:"spring-duration-limit",description:"",severity:"warning",message:"Spring duration must be 10 seconds or less",listed:!0},un={title:"Spring only supports two keyframes",slug:"spring-two-frames",description:"",severity:"error",message:"Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes}.",listed:!0},pn={title:"useScroll ref is not hydrated",slug:"use-scroll-ref",description:"",severity:"error",message:"Container/Target ref is defined but not hydrated",listed:!0},gn={title:"Value not animatable",slug:"value-not-animatable",description:"",severity:"warning",message:'You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". "${invalidKeyframe}" is not an animatable value.',listed:!0},fn=[{slug:"accordion",title:"Accordion",description:"Springy height-morph accordion panels that fold open with a blur-in on the copy.",grade:"C",examples:["react-accordion"],date:"2026-07-13T00:00:00.000Z"},{slug:"add-to-basket",title:"Add to basket",description:"A product image that arcs into the basket icon, with a recoil and ripple on arrival.",grade:"A",examples:["react-add-to-basket"],date:"2026-07-04T00:00:00.000Z"},{slug:"arrow-link",title:"Arrow link",description:"A read-more link whose trailing arrow slides forward on hover.",grade:"S",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"border-beam",title:"Border beam",description:"A thin arc of light that sweeps the rounded border of any panel.",grade:"S",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"card-stack",title:"Card stack",description:"A fanned card stack navigated with carousel controls and a top-left pop between cards.",grade:"S",examples:["react-card-stack"],date:"2026-07-03T00:00:00.000Z"}
1,{slug:"carousel-controls",title:"Carousel controls",description:"Prev and next buttons with animated position dots for any paged carousel.",grade:"B",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"command-palette",title:"Command palette",description:"Motion's fuzzy-filtered Cmd+K launcher choreography on Base UI's Dialog primitive, with a sliding selection highlight.",grade:"A",examples:["react-command-palette","vue-command-palette"],date:"2026-07-03T00:00:00.000Z"},{slug:"confetti",title:"Confetti",description:"A brand-coloured celebration burst that fires on any success beat.",grade:"S",examples:["react-confetti","vue-confetti"],date:"2026-07-03T00:00:00.000Z"},{slug:"copy-button",title:"Copy button",description:"A copy-to-clipboard button that confirms with a glyph swap and a self-drawing check.",grade:"A",examples:["react-copy-button","vue-copy-button"],date:"2026-07-03T00:00:00.000Z"},{slug:"coverflow",title:"Coverflow",description:"A 3D coverflow carousel where items rotate, scale and fade as they leave centre.",grade:"A",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"expand-card",title:"Expand card",description:"An App Store-style expand where a grid tile morphs into a centred detail panel.",grade:"A",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"footer-reveal",title:"Footer reveal",description:"A sticky footer that sits under the page at z-index -1 and fades, scales and sharpens as scroll uncovers it.",grade:"S",examples:["react-footer-reveal"],date:"2026-07-29T00:00:00.000Z"},{slug:"hold-to-confirm",title:"Hold to confirm",description:"A press-and-hold button that wipes a destructive fill across the label as you confirm.",grade:"A",examples:["react-hold-to-confirm"],date:"2026-07-04T00:00:00.000Z"},{slug:"magnetic-pull",title:"Magnetic pull",description:"An element that gently chases the pointer within a magnetic field, then springs back.",grade:"B",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"mask-wipe",title:"Mask wipe",description:"A directional page transition that wipes the incoming view into place through a soft animated mask. Requires React and React DOM 19.3 or later.",grade:"C",examples:[],date:"2026-07-20T00:00:00.000Z"},{slug:"multi-state-button",title:"Multi-state button",description:"A button whose width, glyph and label morph as it moves between states.",grade:"A",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"overlay",title:"Overlay",description:"Focus trap, scroll lock and dimming backdrop primitives for modals, sheets and palettes.",grade:"S",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"page-curtain",title:"Page curtain",description:"A slanted clip-wipe page transition that carries the incoming page name across the screen.",grade:"S",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"parallax-layers",title:"Parallax layers",description:"Scroll-linked depth layers that move at different speeds as the page scrolls.",grade:"S",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"progress-bar",title:"Progress bar",description:"A horizontal progress fill that reveals on entrance, with optional benchmark ticks.",grade:"S",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"rolling-text-button",title:"Rolling text button",description:"A button label that rolls as a whole or character by character on hover or keyboard focus.",grade:"S",examples:["react-rolling-text-button","react-rolling-text-button-stagger"],date:"2026-07-29T00:00:00.000Z"},{slug:"scramble-reveal",title:"Scramble reveal",description:"Text that churns through random glyphs on scroll-in, then settles character by character.",grade:"B",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"screenshot-scroll-reveal",title:"Screenshot scroll reveal",description:"A headline that lifts away while a screenshot tilts upright and scales into centre on scroll.",grade:"S",examples:[],date:"2026-07-11T05:15:31.000Z"},{slug:"scroll-spotlight",title:"Scroll spotlight",description:"Copy lines that brighten as they cross a reading band, driving a sticky product visual.",grade:"A",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"scroll-word-reveal",title:"Scroll word reveal",description:"Text whose words brighten in sequence across a scroll range.",grade:"S",examples:["react-text-scroll-word-reveal"],date:"2026-07-29T13:30:14.000Z"},{slug:"scroll-zoom-reveal",title:"Scroll zoom reveal",description:"A zoomed, tilted screenshot that settles crisp and flat as it scrolls into view.",grade:"S",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"segmented-toggle",title:"Segmented toggle",description:"A segmented control whose selection pill slides between options on a snap spring.",grade:"B",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"sheet",title:"Sheet",description:"Motion's bottom-sheet choreography on the native HTML dialog element, with a 50px fade-up entrance plus drag and flick dismissal. Keep SheetBackdrop and SheetPanel as direct Sheet children.",grade:"A",examples:[],date:"2026-07-04T00:00:00.000Z"},{slug:"shrink-header",title:"Shrink header",description:"A fixed header that c
1ondenses from full-height and transparent into a compact solid bar on scroll.",grade:"A",examples:[],date:"2026-07-05T07:56:36.000Z"},{slug:"skeleton",title:"Skeleton",description:"A shimmer placeholder that handoffs to real content with a mask wipe or staggered reveal.",grade:"C",examples:[],date:"2026-07-04T00:00:00.000Z"},{slug:"smooth-tabs",title:"Smooth tabs",description:"Tabs whose active pill slides between labels while panels crossfade with a directional blur.",grade:"B",examples:["react-smooth-tabs"],date:"2026-07-03T00:00:00.000Z"},{slug:"sparkline",title:"Sparkline",description:"A path-drawn micro-chart that draws in on reveal and updates live as values change.",grade:"C",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"split-reveal",title:"Split reveal",description:"Masked text that rises line, word or character at a time from below a clip.",grade:"A",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"stagger-reveal",title:"Stagger reveal",description:"An editorial entrance where a headline rises line by line, then followers stagger in behind it.",grade:"A",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"swipe-actions",title:"Swipe actions",description:"A list row that follows a swipe to reveal actions, and commits on a full flick.",grade:"A",examples:["react-swipe-actions"],date:"2026-07-05T07:56:36.000Z"},{slug:"terminal-session",title:"Terminal session",description:"A CLI session that types commands in and fades output lines up as each step completes.",grade:"B",examples:[],date:"2026-07-03T00:00:00.000Z"},{slug:"tilt-card",title:"Tilt card",description:"A card that leans toward the pointer in 3D, on compositor transforms only.",grade:"S",examples:["react-tilt-card"],date:"2026-07-03T00:00:00.000Z"},{slug:"toast-stack",title:"Toast stack",description:"Toasts that fan into a scaled pile at the bottom of the screen and settle on a shared spring.",grade:"S",examples:["react-toast-stack","vue-toast-stack"],date:"2026-08-13T00:00:00.000Z"}],S=["docs","examples","ui","troubleshooting","magazine","site"],T={docs:0,examples:1,ui:2,troubleshooting:3,magazine:4,site:5},hn={docs:1.5,examples:1,ui:1,magazine:1,troubleshooting:1,site:1},xn=Object.assign({"../content/magazine/a-view-transitions-api-for-the-rest-of-us.mdx":zo,"../content/magazine/building-the-ultimate-ticker.mdx":Ro,"../content/magazine/collision-detection-in-hover-detection.mdx":jo,"../content/magazine/do-you-still-need-framer-motion.mdx":Po,"../content/magazine/framer-motion-is-now-independent-introducing-motion.mdx":Zo,"../content/magazine/how-to-add-cmd-k-search-shortcut-to-your-framer-site.mdx":Co,"../content/magazine/how-to-use-your-favourite-gsap-easings-with-waapi.mdx":Eo,"../content/magazine/interview-david-haz-creator-of-react-bits.mdx":No,"../content/magazine/introducing-magnetic-cursors-in-motion-cursor.mdx":Oo,"../content/magazine/introducing-motion-for-vue.mdx":Fo,"../content/magazine/introducing-motion-studio.mdx":Lo,"../content/magazine/introducing-motion-ui.mdx":Do,"../content/magazine/introducing-the-motion-carousel.mdx":Ko,"../content/magazine/motion-independence-one-year-in-review.mdx":_o,"../content/magazine/reacts-experimental-view-transition-api.mdx":Uo,"../content/magazine/should-i-use-framer-motion-or-motion-one.mdx":Bo,"../content/magazine/supercharging-the-gta-vi-website-with-motion.mdx":Ho,"../content/magazine/web-animation-performance-tier-list.mdx":qo,"../content/magazine/when-browsers-throttle-requestanimationframe.mdx":Vo}),vn=Object.assign({"../content/troubleshooting/animate-null.mdx":Go,"../content/troubleshooting/color-not-animatable.mdx":Wo,"../content/troubleshooting/complex-values-different.mdx":Jo,"../content/troubleshooting/cubic-bezier-length.mdx":Yo,"../content/troubleshooting/custom-component-ref.mdx":Qo,"../content/troubleshooting/drag-constraints-ref.mdx":Xo,"../content/troubleshooting/invalid-easing-type.mdx":tn,"../content/troubleshooting/lazy-strict-mode.mdx":en,"../content/troubleshooting/max-css-var-depth.mdx":on,"../content/troubleshooting/mini-spring.mdx":nn,"../content/troubleshooting/no-valid-elements.mdx":an,"../content/troubleshooting/range-length.mdx":rn,"../content/troubleshooting/reduced-motion-disabled.mdx":sn,"../content/troubleshooting/reorder-item-child.mdx":cn,"../content/troubleshooting/reorder-values.mdx":dn,"../content/troubleshooting/repeat-count-too-high.mdx":ln,"../content/troubleshooting/spring-duration-limit.mdx":mn,"../content/troubleshooting/spring-two-frames.mdx":un,"../content/troubleshooting/use-scroll-ref.mdx":pn,"../content/troubleshooting/value-not-animatable.mdx":gn}),bn=Object.assign({"../content/docs/3d-transforms.mdx":To,"../content/docs/ai-kit-context.mdx":Ao,"../content/docs/ai-kit-generate-css.mdx":ko,"../content/docs/ai-kit-install.mdx":So,"../content/docs/ai-kit-sdk-bezier-curve-editor.mdx":$o,"../content/docs/ai-kit-sdk-codegen.mdx":wo,"../content/docs/ai-kit-sdk-easing-curve.mdx":yo,"../content/docs/ai-kit-sdk-state.mdx":bo,"../content/docs/ai-kit-sdk.mdx":vo,"../content/docs/ai-kit-transition-editor.mdx":xo,"../content/docs/ai-kit.mdx":ho,"../content/docs/animate-view.mdx":fo,"../content/docs/animate.mdx":go,"../content/docs/arc.mdx":po,"../content/docs/attr-effect.mdx":uo,"../content/docs/base-ui.mdx":mo,"../content/docs/clerk.mdx":lo,"../content/docs/css.mdx":co,"../content/docs/cursor.mdx":io,"../content/docs/curtains.mdx":so,"../content/docs/delay.mdx":ro,"../content/docs/easing-functions.mdx":ao,"../content/docs/faqs.mdx":no,"../content/docs/figma.mdx":oo,"../content/docs/frame.mdx":eo,"../content/docs/framer.mdx":to,"../content/docs/glide.mdx":Xe,"../content/docs/gsap-vs-motion-4.mdx":Qe,"../content/docs/gsap-vs-motion.mdx":Ye,"../content/docs/hover.mdx":Je,"../content/docs/improvements-to-the-web-animations-api-dx.mdx":We,"../content/docs/inview.mdx":Ge,"../content/docs/layout-animations.mdx":Ve,"../content/docs/map-value.mdx":qe,"../content/docs/migrate-from-gsap-to-motion.mdx":He,"../content/docs/mix.mdx":Be,"../content/docs/motion-plus-installation.mdx":Ue,"../content/docs/motion-value.mdx":_e,"../content/docs/motionscore-code-audit.mdx":Ke,"../content/docs/performance.mdx":De,"../content/docs/press.mdx":Le,"../content/docs/prop-effect.mdx":Fe,"../content/docs/quick-start.mdx":Oe,"../content/docs/radix.mdx":Ne,"../content/docs/react-accessibility.mdx":Ee,"../content/docs/react-animate-activity.mdx":Ce,"../content/docs/react-animate-number.mdx":Ze,"../content/docs/react-animate-presence.mdx":Pe,"../content/docs/react-animate-view.mdx":je,"../content/docs/react-animation.mdx":Re,"../content/docs/react-carousel.mdx":ze,"../content/docs/react-courses.mdx":Me,"../content/docs/react-drag.mdx":Ie,"../content/docs/react-gestures.mdx":Te,"../content/docs/react-hover-animation.mdx":Ae,"../content/docs/react-installation.mdx":ke,"../content/docs/react-layout-animations.mdx":Se,"../content/docs/react-layout-group.mdx":$e,"../content/docs/react-lazy-motion.mdx":we,"../content/docs/react-motion-component.mdx":ye,"../content/docs/react-motion-config.mdx":be,"../content/docs/react-motion-plus-installation.mdx":ve,"../content/docs/react-motion-value.mdx":xe,"../content/docs/react-reduce-bundle-size.mdx":he,"../content/docs/react-reorder.mdx":fe,"../content/docs/react-scramble-text.mdx":ge,"../content/docs/react-scroll-animations.mdx":pe,"../content/docs/react-svg-animation.mdx":ue,"../content/docs/react-tailwind.mdx":me,"../content/docs/react-three-fiber-layout-cameras.mdx":le,"../content/docs/react-three-fiber-motion-canvas.mdx":de,"../content/docs/react-three-fiber.mdx":ce,"../content/docs/react-ticker.mdx":ie,"../content/docs/react-transitions.mdx":se,"../content/docs/react-typewriter.mdx":re,"../content/docs/react-upgrade-guide.mdx":ae,"../content/docs/react-use-animate.mdx":ne,"../content/docs/react-use-animation-frame.mdx":oe,"../content/docs/react-use-curtains.mdx":ee,"../content/docs/react-use-drag-control
1s.mdx":te,"../content/docs/react-use-in-view.mdx":Xt,"../content/docs/react-use-motion-template.mdx":Qt,"../content/docs/react-use-motion-value-event.mdx":Yt,"../content/docs/react-use-page-in-view.mdx":Jt,"../content/docs/react-use-reduced-motion.mdx":Wt,"../content/docs/react-use-scroll.mdx":Gt,"../content/docs/react-use-spring.mdx":Vt,"../content/docs/react-use-time.mdx":qt,"../content/docs/react-use-transform.mdx":Ht,"../content/docs/react-use-velocity.mdx":Bt,"../content/docs/react.mdx":Ut,"../content/docs/resize.mdx":_t,"../content/docs/scramble-text.mdx":Kt,"../content/docs/scroll.mdx":Dt,"../content/docs/split-text.mdx":Lt,"../content/docs/spring-value.mdx":Ft,"../content/docs/spring.mdx":Ot,"../content/docs/squarespace.mdx":Nt,"../content/docs/stagger.mdx":Et,"../content/docs/studio.mdx":Ct,"../content/docs/style-effect.mdx":Zt,"../content/docs/svg-animation.mdx":Pt,"../content/docs/svg-effect.mdx":jt,"../content/docs/text-animation.mdx":Rt,"../content/docs/three.mdx":zt,"../content/docs/transform-value.mdx":Mt,"../content/docs/transform.mdx":It,"../content/docs/tween.mdx":Tt,"../content/docs/upgrade-guide.mdx":At,"../content/docs/vgpu.mdx":kt,"../content/docs/vue-animate-number.mdx":St,"../content/docs/vue-animate-presence.mdx":$t,"../content/docs/vue-animate-view.mdx":wt,"../content/docs/vue-animation.mdx":yt,"../content/docs/vue-carousel.mdx":bt,"../content/docs/vue-cursor.mdx":vt,"../content/docs/vue-directive.mdx":xt,"../content/docs/vue-gestures.mdx":ht,"../content/docs/vue-layout-animations.mdx":ft,"../content/docs/vue-layout-group.mdx":gt,"../content/docs/vue-lazymotion.mdx":pt,"../content/docs/vue-motion-component.mdx":ut,"../content/docs/vue-motion-config.mdx":mt,"../content/docs/vue-motion-value.mdx":lt,"../content/docs/vue-radix.mdx":dt,"../content/docs/vue-reorder.mdx":ct,"../content/docs/vue-scroll-animations.mdx":it,"../content/docs/vue-ticker.mdx":st,"../content/docs/vue-transitions.mdx":rt,"../content/docs/vue-typewriter.mdx":at,"../content/docs/vue-use-animate.mdx":nt,"../content/docs/vue-use-animation-frame.mdx":ot,"../content/docs/vue-use-drag-controls.mdx":et,"../content/docs/vue-use-in-view.mdx":tt,"../content/docs/vue-use-motion-template.mdx":X,"../content/docs/vue-use-motion-value-event.mdx":Q,"../content/docs/vue-use-reduced-motion.mdx":Y,"../content/docs/vue-use-scroll.mdx":J,"../content/docs/vue-use-spring.mdx":W,"../content/docs/vue-use-time.mdx":G,"../content/docs/vue-use-transform.mdx":V,"../content/docs/vue-use-velocity.mdx":q,"../content/docs/vue.mdx":H,"../content/docs/webflow.mdx":B,"../content/docs/wordpress.mdx":U,"../content/docs/wrap.mdx":_}),yn=Object.assign({"../content/ui-components/index.json":fn});function wn(o){return o==="js"||o==="react"||o==="vue"?o:null}function $n(){const o=M.filter(t=>t.isUI!==!0).map(t=>({id:`examples-${t.slug}`,section:"examples",title:t.title,description:t.description??"",url:`/examples/${t.slug}`,platform:t.platform,category:t.category??null,apis:t.apis??[],isPlus:!!t.isPlus,isAIKit:!1})),r={id:"ui-landing",section:"ui",title:"Motion UI",description:"Animated marketing sections and components you install into any shadcn app.",url:"/ui",platform:"react",category:"Motion UI",apis:[],isPlus:!1,isAIKit:!1},i=new Set(M.map(t=>t.uiCategory).filter(t=>t!=null)),m=Io.filter(t=>i.has(t.slug)).map(t=>({id:`ui-${t.slug}`,section:"ui",title:t.label,description:t.description,url:`/ui/${t.slug}`,platform:"react",category:"Motion UI",apis:[],isPlus:!1,isAIKit:!1})),g=M.filter(t=>{const p=t.uiCategory;return p!=null&&j(p)!=null}).map(t=>{const p=j(t.uiCategory);return{id:`ui-section-${t.slug}`,section:"ui",title:t.title,description:t.description??"",url:`/ui/sections/${t.slug}`,platform:"react",category:p.label,apis:t.apis??[],isPlus:!1,isAIKit:!1}}),c={id:"ui-install",section:"ui",title:"Install Motion UI",description:"Add Motion UI sections through the shadcn CLI: the Motion+ components.json setup.",url:"/ui/install",platform:"react",category:"Motion UI",apis:[],isPlus:!1,isAIKit:!1},a=Object.values(yn).flat().filter(t=>{var p;return(((p=t.examples)==null?void 0:p.length)??0)===0}).map(t=>({id:`ui-component-${t.slug}
1`,section:"ui",title:t.title,description:t.description,url:`/ui/components/${t.slug}`,platform:"react",category:"Motion UI",apis:[],isPlus:!1,isAIKit:!1})),f=Object.values(xn).filter(t=>t.listed).map(t=>({id:`magazine-${t.slug}`,section:"magazine",title:t.title,description:t.description??"",url:`/magazine/${t.slug}`,platform:null,category:t.category??null,apis:[],isPlus:!1,isAIKit:!1})),h=Object.values(vn).filter(t=>t.listed).map(t=>({id:`troubleshooting-${t.slug}`,section:"troubleshooting",title:t.title,description:t.message||t.description||"",url:`/troubleshooting/${t.slug}`,platform:null,category:t.severity,apis:[],isPlus:!1,isAIKit:!1})),x=Object.values(bn).filter(t=>t.listed!==!1&&t.deprecated!==!0&&K).map(t=>({id:`docs-${t.slug}`,section:"docs",title:t.title,description:t.description??"",url:`/docs/${t.slug}`,platform:wn(t.platform),category:t.category??null,apis:[],isPlus:!!t.isPlus,isAIKit:t.platform==="ai-kit"})),u={id:"ai-kit-landing",section:"docs",title:"Motion AI Kit",description:"Current Motion context, MotionScore for Agents, and production-ready CSS springs for your coding agent.",url:"/ai-kit",platform:null,category:"AI Kit",apis:[],isPlus:!0,isAIKit:!0},v={id:"site-advertise",section:"site",title:"Partner with Motion",description:"Support Motion and reach developers through partnerships across our docs, examples and website.",url:"/partners",platform:null,category:"Company",apis:[],isPlus:!1,isAIKit:!1};return[{id:"site-studio",section:"site",title:"Motion Studio",description:"A visual animation editor for your website. Edit keyframes, easing and springs, then apply your changes to code.",url:"/studio",platform:null,category:"Motion Studio",apis:[],isPlus:!1,isAIKit:!1},u,...x,...o,r,...m,...g,c,...a,...f,...h,v]}const Z=$n(),Sn=["docs-react","docs-quick-start","ai-kit-landing","docs-ai-kit","ui-landing","docs-react-animation","docs-react-scroll-animations","docs-react-motion-component","docs-react-layout-animations","examples-react-animate-view-toggle","docs-react-transitions","docs-vue"];function kn(o){const r=new Map(o.map(c=>[c.id,c])),i=[],m=new Set;for(const c of Sn){const a=r.get(c);a&&(i.push(a),m.add(c))}const g=o.filter(c=>!m.has(c.id));return g.sort((c,a)=>T[c.section]-T[a.section]),[...i,...g]}function An(){return Z}const w={title:4,apis:3,category:3,description:2,platform:1};function $(o,r){if(!o)return 0;const i=o.toLowerCase();return i===r?3:i.startsWith(r)?2:i.includes(r)?1:0}function Tn(o,r=Z,i=30){const m=o.trim().toLowerCase();if(!m)return kn(r).slice(0,i);const g=m.split(/\s+/).filter(Boolean),c=[];for(const a of r){let f=0,h=!0;for(const x of g){let u=0;u+=$(a.title,x)*w.title;for(const v of a.apis)u+=$(v,x)*w.apis;if(a.category&&(u+=$(a.category,x)*w.category),u+=$(a.description,x)*w.description,a.platform&&(u+=$(a.platform,x)*w.platform),u===0){h=!1;break}f+=u}h&&f>0&&c.push({rec:a,score:f*hn[a.section]})}return c.sort((a,f)=>f.score!==a.score?f.score-a.score:T[a.rec.section]-T[f.rec.section]),c.slice(0,i).map(a=>a.rec)}const In=Object.freeze(Object.defineProperty({__proto__:null,SECTIONS:S,getSearchRecords:An,searchRecords:Tn},Symbol.toStringTag,{value:"Module"}));function Mn(){return n.jsx("span",{"aria-hidden":"true",className:"fb-platform-icon",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",width:16,height:16,fontFamily:"var(--font-mono)",fontSize:11,letterSpacing:"0.04em",textTransform:"uppercase"},children:"AI"})}const zn=[{value:"all",label:"All"},{value:"react",label:"React"},{value:"js",label:"JavaScript"},{value:"vue",label:"Vue"}],Rn={docs:"Docs",examples:"Example",ui:"Motion UI",magazine:"Magazine",troubleshooting:"Troubleshooting",site:"Site"},jn={docs:"Docs",examples:"Examples",ui:"Motion UI",magazine:"Magazine",troubleshooting:"Troubleshooting",site:"Site"},k=[.25,0,0,1],C="motion:search:disabledSections";function Pn(){const o=new Set(S);if(typeof window>"u")return o;try{const r=window.localStorage.getItem(C);if(!r)return o;const i=JSON.parse(r);if(!Array.isArray(i))return o;const m=new Set(i);return new Set(S.filter(g=>!m.has(g)))}catch{return o}}function Yn({isOpen:o,onClose:r,initialPlatform:i}){const m=n.jsx(Mo,{children:o?n.jsx(Zn,{onClose:r,initialPlatform:i}):null});return typeof document>"u"?null:D.createPortal(m,document.body)}function Zn({onClose:o,initialPlatform:r}){const i=l.useRef(null),m=l.useRef(null),g=l.useRef(null),c=L(),[a,f]=l.useState(""),[h,x]=l.useState(r??"all"),[u,v]=l.useState(0),[b,t]=l.useState(null),[p,E]=l.useState(Pn);function N(e){E(s=>{const d=new Set(s);return d.has(e)?d.delete(e):d.add(e),d})}l.useEffect(()=>{if(!(typeof window>"u"))try{window.localStorage.setItem(C,JSON.stringify(S.filter(e=>!p.has(e))))}catch{}},[p]),l.useEffect(()=>{let e=!1;return F(()=>Promise.resolve().then(()=>In),void 0).then(s=>{e||t(s)}),()=>{e=!0}},[]),l.useEffect(()=>{var e;(e=m.current)==null||e.focus()},[]),l.useEffect(()=>
1{v(0)},[a,h,p]);const y=l.useMemo(()=>{if(!b)return[];const s=b.getSearchRecords().filter(d=>p.has(d.section)?h==="all"?!0:d.platform===null||d.platform===h:!1);return b.searchRecords(a,s,24)},[b,h,a,p]);l.useEffect(()=>{function e(s){if(s.key==="Escape"){s.preventDefault(),o();return}if(s.key==="ArrowDown"){s.preventDefault(),v(d=>y.length===0?0:Math.min(y.length-1,d+1));return}if(s.key==="ArrowUp"){s.preventDefault(),v(d=>Math.max(0,d-1));return}if(s.key==="Enter"){const d=y[u];d&&(s.preventDefault(),c(d.url),o())}}return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[y,u,c,o]),l.useEffect(()=>{function e(d){i.current&&(i.current.contains(d.target)||o())}const s=window.setTimeout(()=>{window.addEventListener("mousedown",e)},0);return()=>{window.clearTimeout(s),window.removeEventListener("mousedown",e)}},[o]),l.useEffect(()=>{const e=g.current;if(!e)return;const s=e.querySelector(`[data-index="${u}"]`);s&&s.scrollIntoView({block:"nearest"})},[u]);const[I]=l.useState(()=>{const e=[0,90,180,270];return e[Math.floor(Math.random()*e.length)]}),z=I+45;function O(e){c(e.url),o()}return n.jsxs(n.Fragment,{children:[n.jsx(R.div,{className:"search-overlay",initial:{clipPath:A(I)},animate:{clipPath:"inset(0 0 0 0)"},exit:{clipPath:A(I),transition:{clipPath:{duration:.45,ease:k,delay:.15}}},transition:{duration:.45,ease:k}}),n.jsx(R.div,{className:"search-palette",ref:i,role:"dialog","aria-modal":"true","aria-label":"Search Motion",initial:{clipPath:A(z)},animate:{clipPath:"inset(0 0 0 0)",transition:{clipPath:{duration:.5,ease:k,delay:.15}}},exit:{clipPath:A(z),transition:{clipPath:{duration:.4,ease:k}}},children:n.jsx("div",{className:"search-panel",children:n.jsxs("div",{className:"search-stripe-inner",children:[n.jsxs("div",{className:"search-input-row",children:[n.jsx(Nn,{}),n.jsx("input",{ref:m,type:"text",className:"search-input",placeholder:"Search docs, examples, magazine, troubleshooting",value:a,onChange:e=>f(e.target.value),onKeyDown:e=>{e.key==="Escape"&&(e.preventDefault(),o())},autoComplete:"off",spellCheck:!1,"aria-controls":"search-results"}),n.jsx("kbd",{className:"search-shortcut","aria-hidden":"true",children:"ESC"})]}),n.jsx("nav",{className:"search-platforms","aria-label":"Filter by platform",children:zn.map(e=>n.jsxs("button",{type:"button",className:"search-platform","aria-pressed":h===e.value,onClick:()=>x(e.value),children:[n.jsx(En,{value:e.value}),e.label]},e.value))}),n.jsx("nav",{className:"search-sections","aria-label":"Filter by section",children:S.map(e=>{const s=p.has(e);return n.jsxs("button",{type:"button",className:`search-section search-section--${e}`,"aria-pressed":s,onClick:()=>N(e),children:[n.jsx("span",{className:"search-section-dot","aria-hidden":"true"}),jn[e]]},e)})}),n.jsx("div",{className:"search-results",id:"search-results",role:"listbox",ref:g,children:b?y.length===0?n.jsx("div",{className:"search-empty",children:p.size===0?"Enable a section to see results.":a.trim()?"No matches.":"Start typing to search."}):y.map((e,s)=>n.jsx(Cn,{record:e,active:s===u,onMouseEnter:()=>v(s),onSelect:()=>O(e),index:s},e.id)):n.jsx("div",{className:"search-empty",children:"Loading indexâ¦"})})]})})})]})}function Cn({record:o,active:r,onMouseEnter:i,onSelect:m,index:g}){return n.jsxs("button",{type:"button","data-index":g,role:"option","aria-selected":r,className:r?"search-row is-active":"search-row",onMouseEnter:i,onClick:m,children:[n.jsx("span",{className:"search-row-icon","aria-hidden":"true",children:o.isAIKit?n.jsx(Mn,{}):o.platform?n.jsx(P,{framework:o.platform,size:14}):null}),n.jsxs("span",{className:"search-row-body",children:[n.jsx("span",{className:"search-row-title",children:o.title}),n.jsx("span",{className:"search-row-desc",children:o.description})]}),n.jsx("span",{className:`search-badge search-badge--${o.section}`,children:Rn[o.section]})]})}function En({value:o}){return o==="all"?n.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24","aria-hidden":"true",fill:"currentColor",children:[n.jsx("rect",{x:"3",y:"3",width:"8",height:"8"}
1),n.jsx("rect",{x:"13",y:"3",width:"8",height:"8"}),n.jsx("rect",{x:"3",y:"13",width:"8",height:"8"}),n.jsx("rect",{x:"13",y:"13",width:"8",height:"8"})]}):n.jsx(P,{framework:o,size:12})}function Nn(){return n.jsxs("svg",{className:"search-icon",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[n.jsx("circle",{cx:"11",cy:"11",r:"7"}),n.jsx("path",{d:"m20 20-3.5-3.5"})]})}function A(o){const r=(o%360+360)%360;return r<45||r>=315?"inset(100% 0 0 0)":r<135?"inset(0 0 0 100%)":r<225?"inset(0 0 100% 0)":"inset(0 100% 0 0)"}export{Yn as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.