zsp/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-05-17 06:13:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: fix motion skill examples

Browse Source 
Fix copied example issues from the adopted #1780 motion skills: live reduced-motion config, tokenized distances/easing/springs, valid shimmer skeleton JSX, and visibility cleanup.
This commit is contained in:
Affaan Mustafa
2026-05-12 01:35:35 -04:00
committed by Affaan Mustafa
parent f219a90f20
commit cb2a70ce72
3 changed files with 96 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
skills/motion-patterns/SKILL.md
View File

@@ -141,7 +141,7 @@ const item = {
```tsx
"use client"
import { motion, AnimatePresence } from "motion/react"
import { springs } from "@/lib/motion-tokens"
import { motionTokens, springs } from "@/lib/motion-tokens"
// Wrap at the call site:
// <AnimatePresence>{isOpen && <Modal key="modal" />}</AnimatePresence>
@@ -164,9 +164,17 @@ export function Modal({ onClose }: { onClose: () => void }) {
role="dialog"
aria-modal="true"
className="fixed inset-x-4 top-1/2 -translate-y-1/2 rounded-xl bg-white p-6"
initial={{ opacity: 0, scale: 0.95, y: 8 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 8 }}
initial={{
opacity: 0,
scale: motionTokens.scale.press,
y: motionTokens.distance.sm,
}}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{
opacity: 0,
scale: motionTokens.scale.press,
y: motionTokens.distance.sm,
}}
transition={springs.gentle}
/>
</>
@@ -179,16 +187,24 @@ export function Modal({ onClose }: { onClose: () => void }) {
```tsx
"use client"
import { motion, AnimatePresence } from "motion/react"
import { springs } from "@/lib/motion-tokens"
import { motionTokens, springs } from "@/lib/motion-tokens"
<AnimatePresence mode="sync">
{toasts.map((t) => (
<motion.div
key={t.id}
layout
initial={{ opacity: 0, x: 48, scale: 0.9 }}
animate={{ opacity: 1, x: 0, scale: 1 }}
exit={{ opacity: 0, x: 48, scale: 0.9 }}
initial={{
opacity: 0,
x: motionTokens.distance.xl,
scale: motionTokens.scale.subtle,
}}
animate={{ opacity: 1, x: 0, scale: 1 }}
exit={{
opacity: 0,
x: motionTokens.distance.xl,
scale: motionTokens.scale.subtle,
}}
transition={springs.snappy}
/>
))}
@@ -317,7 +333,7 @@ export function ExpandingCard({ title, body }: { title: string; body: string })
initial={false}
animate={{ opacity: open ? 1 : 0, scaleY: open ? 1 : 0 }}
style={{ transformOrigin: "top", overflow: "hidden" }}
transition={{
transition={{
duration: motionTokens.duration.normal,
ease: motionTokens.easing.smooth,
}}