{
  "schemaVersion": 1,
  "updatedAt": "2026-10-18",
  "source": {
    "id": "bookmark-motion-dev",
    "name": "Motion",
    "description": "JavaScript 与 React 动画库，适合查找动画实现方式与示例。",
    "category": "交互动效",
    "tags": [
      "动画库",
      "JavaScript",
      "React"
    ],
    "url": "https://motion.dev/",
    "directoryUrl": "https://www.uipicks.top/ai/sites/bookmark-motion-dev/index.html",
    "jsonUrl": "https://www.uipicks.top/ai/sites/bookmark-motion-dev/index.json",
    "code": false,
    "prompt": false,
    "entryCount": 524,
    "scope": {
      "status": "已核对公开详情目录",
      "note": "根据本次官网站点地图核对命名详情，排除站点导航、安装说明与类目；具体示例、文档与参考分别标识。",
      "capturedAt": "2026-10-14"
    },
    "offers": [
      {
        "id": "catalog",
        "label": "已收录的参考资源",
        "platforms": [
          "web"
        ],
        "resources": [
          "unknown"
        ],
        "frameworks": [
          "react",
          "html"
        ],
        "pricing": [
          "unknown"
        ],
        "evidence": [
          {
            "kind": "saved",
            "url": "https://motion.dev/",
            "date": "2026-10-13",
            "note": "已收录的官网用途说明与标签：JavaScript 与 React 动画库，适合查找动画实现方式与示例。"
          }
        ]
      }
    ],
    "featuredSamples": []
  },
  "pagination": {
    "page": 7,
    "pageSize": 80,
    "totalEntries": 524,
    "totalPages": 7,
    "offset": 480,
    "previous": "page-6.json",
    "next": null
  },
  "entries": [
    {
      "id": "b6ecd8d23a063000",
      "title": "React Overlay Sheet",
      "url": "https://motion.dev/ui/sections/react-overlay-sheet",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "抽屉",
        "面板"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "3194b1a4c88412e2",
      "title": "React Bento Staggered",
      "url": "https://motion.dev/ui/sections/react-bento-staggered",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "模块化布局",
        "格子",
        "卡片"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      },
      "visual": {
        "layouts": [
          {
            "id": "bento",
            "label": "Bento 功能网格",
            "evidence": "本条专属 iframe 可见不同尺寸统计与功能卡片组成 Bento 网格"
          }
        ],
        "styles": [
          {
            "id": "light",
            "label": "浅色",
            "evidence": "浅米白底和白色卡片，以灰黑文字与细线组织信息，整体配色克制"
          },
          {
            "id": "minimal",
            "label": "简洁留白",
            "evidence": "浅米白底和白色卡片，以灰黑文字与细线组织信息，整体配色克制"
          }
        ],
        "verifiedFrom": "对应条目图片与已有标注",
        "checkedAt": "2026-10-18",
        "evidenceUrl": "https://motion.dev/ui/sections/react-bento-staggered",
        "boundary": "标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。"
      }
    },
    {
      "id": "3a6c762b0501ede8",
      "title": "React Border Beam",
      "url": "https://motion.dev/ui/sections/react-border-beam",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "光束"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "3dc2223a4cfd4c29",
      "title": "React Cta Banner Magnetic",
      "url": "https://motion.dev/ui/sections/react-cta-banner-magnetic",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "daf79acda48382a5",
      "title": "React Cta Signup Celebrate",
      "url": "https://motion.dev/ui/sections/react-cta-signup-celebrate",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "注册"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "df02d40451ca7558",
      "title": "React Feature Expand",
      "url": "https://motion.dev/ui/sections/react-feature-expand",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "611babd8dd0aab59",
      "title": "React Footer Newsletter",
      "url": "https://motion.dev/ui/sections/react-footer-newsletter",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "页脚"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "70f228c77564a02f",
      "title": "React Hero Editorial Stagger",
      "url": "https://motion.dev/ui/sections/react-hero-editorial-stagger",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "首屏",
        "主视觉",
        "交错",
        "逐个出现"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      },
      "visual": {
        "layouts": [
          {
            "id": "left",
            "label": "左对齐首屏",
            "evidence": "本条专属 iframe 的大标题、正文与两枚 CTA 均靠左；右侧保留大幅留白"
          }
        ],
        "styles": [
          {
            "id": "light",
            "label": "浅色",
            "evidence": "浅米白背景、黑色主文字、有限按钮和充足留白"
          },
          {
            "id": "minimal",
            "label": "简洁留白",
            "evidence": "浅米白背景、黑色主文字、有限按钮和充足留白"
          }
        ],
        "verifiedFrom": "对应条目图片与已有标注",
        "checkedAt": "2026-10-18",
        "evidenceUrl": "https://motion.dev/ui/sections/react-hero-editorial-stagger",
        "boundary": "标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。"
      }
    },
    {
      "id": "40fa5cc298229282",
      "title": "React Hero Parallax Layers",
      "url": "https://motion.dev/ui/sections/react-hero-parallax-layers",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "首屏",
        "主视觉"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      },
      "visual": {
        "layouts": [
          {
            "id": "left",
            "label": "左对齐首屏",
            "evidence": "本条专属 iframe 中主标题靠左，下方是整宽产品分析窗口；不是左右两列主视觉"
          }
        ],
        "styles": [
          {
            "id": "light",
            "label": "浅色",
            "evidence": "浅米白底与灰白分析窗口，数据图表采用灰阶和克制细线"
          },
          {
            "id": "minimal",
            "label": "简洁留白",
            "evidence": "浅米白底与灰白分析窗口，数据图表采用灰阶和克制细线"
          }
        ],
        "verifiedFrom": "对应条目图片与已有标注",
        "checkedAt": "2026-10-18",
        "evidenceUrl": "https://motion.dev/ui/sections/react-hero-parallax-layers",
        "boundary": "标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。"
      }
    },
    {
      "id": "b7e3dfca813eff65",
      "title": "React Hero Terminal",
      "url": "https://motion.dev/ui/sections/react-hero-terminal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "首屏",
        "主视觉",
        "终端"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      },
      "visual": {
        "layouts": [
          {
            "id": "split",
            "label": "左右分栏",
            "evidence": "本条专属 iframe 明确左侧文案/CTA、右侧 CLI 终端窗口的两列结构"
          }
        ],
        "styles": [
          {
            "id": "light",
            "label": "浅色",
            "evidence": "米白底、黑白终端和少量灰字，四周大面积留白"
          },
          {
            "id": "minimal",
            "label": "简洁留白",
            "evidence": "米白底、黑白终端和少量灰字，四周大面积留白"
          }
        ],
        "verifiedFrom": "对应条目图片与已有标注",
        "checkedAt": "2026-10-18",
        "evidenceUrl": "https://motion.dev/ui/sections/react-hero-terminal",
        "boundary": "标签仅描述本条官方默认预览；代码、付费权限与可配置颜色以原站为准。未验证所有交互。"
      }
    },
    {
      "id": "7f7bf6599f99126e",
      "title": "React Logo Ticker",
      "url": "https://motion.dev/ui/sections/react-logo-ticker",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "cc3a6725111abd49",
      "title": "React Nav Command Palette",
      "url": "https://motion.dev/ui/sections/react-nav-command-palette",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "命令",
        "搜索",
        "命令面板"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "d6671dcba645d6bb",
      "title": "React Nav Mega Menu",
      "url": "https://motion.dev/ui/sections/react-nav-mega-menu",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "菜单"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "7ffa0ab371adcc0d",
      "title": "React Page Curtains",
      "url": "https://motion.dev/ui/sections/react-page-curtains",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "f34164b560f7ae4c",
      "title": "React Pricing Tiers Morph",
      "url": "https://motion.dev/ui/sections/react-pricing-tiers-morph",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "定价",
        "价格"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "382f2939356f8b01",
      "title": "React Pricing Usage Slider",
      "url": "https://motion.dev/ui/sections/react-pricing-usage-slider",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "滑块",
        "滑杆",
        "定价",
        "价格"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a7a4fa95f28c4675",
      "title": "React Stats Counters",
      "url": "https://motion.dev/ui/sections/react-stats-counters",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "6af7982e96f4970b",
      "title": "React Stats Live Panel",
      "url": "https://motion.dev/ui/sections/react-stats-live-panel",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "698a5f7913313a1b",
      "title": "React Testimonials Stack",
      "url": "https://motion.dev/ui/sections/react-testimonials-stack",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "9d109a179704d6b9",
      "title": "React Text Split Reveal",
      "url": "https://motion.dev/ui/sections/react-text-split-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "揭示",
        "出现",
        "入场",
        "文字",
        "文本"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "747771192f0e37c0",
      "title": "Arrow Link",
      "url": "https://motion.dev/ui/components/arrow-link",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "箭头"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a0f1c4309f25d712",
      "title": "Border Beam",
      "url": "https://motion.dev/ui/components/border-beam",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "光束"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "bc4a1a39c48b8c20",
      "title": "Carousel Controls",
      "url": "https://motion.dev/ui/components/carousel-controls",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "轮播",
        "轮播图"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "1297bf0afa3949fa",
      "title": "Coverflow",
      "url": "https://motion.dev/ui/components/coverflow",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "4d22d01e5267c2fa",
      "title": "Expand Card",
      "url": "https://motion.dev/ui/components/expand-card",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "卡片"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "d87c8962ffcff1f8",
      "title": "Magnetic Pull",
      "url": "https://motion.dev/ui/components/magnetic-pull",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "d7ba8490affe7b4e",
      "title": "Mask Wipe",
      "url": "https://motion.dev/ui/components/mask-wipe",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "9e0260eb01a58d2b",
      "title": "Multi State Button",
      "url": "https://motion.dev/ui/components/multi-state-button",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "按钮"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "efe195bbff4c9296",
      "title": "Overlay",
      "url": "https://motion.dev/ui/components/overlay",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "b6b7a2910995fd7f",
      "title": "Page Curtain",
      "url": "https://motion.dev/ui/components/page-curtain",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "926da534bb0bb210",
      "title": "Parallax Layers",
      "url": "https://motion.dev/ui/components/parallax-layers",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "82a0b01ab98639e4",
      "title": "Progress Bar",
      "url": "https://motion.dev/ui/components/progress-bar",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "进度条"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "cd86c0cc554f7cb4",
      "title": "Scramble Reveal",
      "url": "https://motion.dev/ui/components/scramble-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "揭示",
        "出现",
        "入场"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "90c6f8a7186314a9",
      "title": "Screenshot Scroll Reveal",
      "url": "https://motion.dev/ui/components/screenshot-scroll-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "滚动",
        "揭示",
        "出现",
        "入场"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "aba0bd583f4fc647",
      "title": "Scroll Spotlight",
      "url": "https://motion.dev/ui/components/scroll-spotlight",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "滚动"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "c30a24cf942f8b93",
      "title": "Scroll Zoom Reveal",
      "url": "https://motion.dev/ui/components/scroll-zoom-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "滚动",
        "揭示",
        "出现",
        "入场"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a5a740e1693c3f7b",
      "title": "Segmented Toggle",
      "url": "https://motion.dev/ui/components/segmented-toggle",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "切换",
        "开关"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a0877f84e6fff58a",
      "title": "Sheet",
      "url": "https://motion.dev/ui/components/sheet",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "抽屉",
        "面板"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "c077f1c39e19f7c7",
      "title": "Shrink Header",
      "url": "https://motion.dev/ui/components/shrink-header",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "d4e2151cb65d6cc9",
      "title": "Skeleton",
      "url": "https://motion.dev/ui/components/skeleton",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "骨架屏",
        "加载"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "113a4fe5546866aa",
      "title": "Sparkline",
      "url": "https://motion.dev/ui/components/sparkline",
      "kind": "组件预览",
      "direct": true,
      "aliases": [],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "11184a3b41171932",
      "title": "Split Reveal",
      "url": "https://motion.dev/ui/components/split-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "揭示",
        "出现",
        "入场"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a1190a5f1e04502c",
      "title": "Reveal",
      "url": "https://motion.dev/ui/components/stagger-reveal",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "揭示",
        "出现",
        "入场"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    },
    {
      "id": "a9c3d9553abb93a1",
      "title": "Terminal Session",
      "url": "https://motion.dev/ui/components/terminal-session",
      "kind": "组件预览",
      "direct": true,
      "aliases": [
        "终端"
      ],
      "framework": "",
      "source": {
        "kind": "发布者公开目录数据",
        "url": "https://motion.dev/sitemap.xml",
        "date": "2026-10-14"
      }
    }
  ]
}