菜单
Select and implement interactive web animations, 3D elements, and pre-built React/Tailwind/Framer Motion components for landing pages and hero sections. Use when adding hover effects, morphing shapes, hero sections with background video, or choosing from Magic UI's 50+ animated component library.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Sheshiyer/skill-clusters --skill web-motion-library命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
正在显示 SKILL.md
基于 SOC 职业分类
| name | web-motion-library |
| description | Select and implement interactive web animations, 3D elements, and pre-built React/Tailwind/Framer Motion components for landing pages and hero sections. Use when adding hover effects, morphing shapes, hero sections with background video, or choosing from Magic UI's 50+ animated component library. |
| cluster | creative-frontend |
| version | 1.0.0 |
Reference library for interactive web animations and pre-built component systems. Covers hover motion patterns, morphing background shapes, full-screen hero sections, and the Magic UI component library (50+ animated React/Tailwind/Framer Motion components).
| Pattern | Source | Tech Stack | Best For |
|---|---|---|---|
| Hover Motion Grid | sink.design / Codrops | CSS + JS | Image grids that respond to mouse movement, intro animations |
| Morphing Shapes | Codrops | SVG + CSS | Organic background transitions, exhibition-style layouts |
| Hero Section | Viktor Oddy | React + Tailwind CSS | Full-screen hero with background video, Rubik font, SVG CTA |
| Magic UI Components | magicui.design | React + Tailwind + Framer Motion | 50+ pre-built animated components (marquees, borders, cards) |
| Need | Use | Why |
|---|---|---|
| Mouse-reactive image grid | Hover Motion pattern | Rows move in sync with cursor, supports intro animation reveal |
| Organic background animation | Morphing Shapes pattern | SVG shape transitions, exhibition/gallery aesthetic |
| Full-screen landing hero | Viktor Oddy Hero | Background video, Rubik typography, custom SVG button |
| Animated marquee/ticker | Magic UI: Marquee | Infinite scroll with pause-on-hover |
| Glowing card borders | Magic UI: Shine Border | Animated gradient border effect |
| Notification feed | Magic UI: Notification List | Stacked animated notification cards |
| Social proof logos | Magic UI: Company Logos | Auto-scrolling logo strip |
| Concentric circles | Magic UI: Circles | Expanding ring animation |
| Ripple effects | Magic UI: Ripple | Click/hover ripple animations |
See references/patterns.md for implementation details and component specifications.
