Communitygithub.com

guycoful/web-animation-recipes

Pick and build an interactive web animation for a site. Asks where to apply it (hero, scroll, cards, forms, controls, navigation, product showcase, cursor companion) and which matching animation to use, then builds it from 30 recipes. Use when someone wants a wow effect, a micro-interaction, a 3D hero, a scroll transition or an animated component.

What is web-animation-recipes?

web-animation-recipes is a Cursor agent skill that pick and build an interactive web animation for a site. Asks where to apply it (hero, scroll, cards, forms, controls, navigation, product showcase, cursor companion) and which matching animation to use, then builds it from 30 recipes. Use when someone wants a wow effect, a micro-interaction, a 3D hero, a scroll transition or an animated component.

Works with~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/guycoful/web-animation-recipes-skill/tree/HEAD/skills/web-animation-recipes
View original→Browse all skills

Ask in your favorite AI

Open a new chat with this agent skill pre-loaded.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

הנפשות לאתר: בחירה ובנייה

הסקיל עוזר לבחור הנפשה לאתר ולבנות אותה, מתוך 30 מתכונים. הקבצים בתיקייה:

  • placements.md: 8 מיקומים באתר, ואילו הנפשות מתאימות לכל מיקום.
  • recipes.md: מפרט בנייה לכל אחת מ-30 ההנפשות.

שלב 1: לשאול איפה מיישמים

כשהסקיל נטען, לשאול קודם כל את השאלה הזו, בשפה של המשתמש, עם הרשימה הממוספרת. לא להתחיל לכתוב קוד לפני שיש תשובה.

"איפה באתר תרצה את ההנפשה ?"

  1. אזור הפתיחה (Hero) של דף נחיתה
  2. מעבר בגלילה או מעבר בין מסכים
  3. כרטיסים ורשת פיצ'רים
  4. טפסים, שדות קלט וקוד חד-פעמי
  5. כפתורים, מתגים ומחווני התקדמות
  6. ניווט ותפריטים
  7. הצגת מוצר או אפליקציה (מוקאפ טלפון, קרוסלה)
  8. דמות או אפקט שמלווה את הסמן בכל הדף

אם המשתמש כבר אמר את המיקום בבקשה, לדלג לשלב 2 ולציין איזה מיקום הובן.

שלב 2: לשאול איזה סוג הנפשה

לקרוא את placements.md ולהציג רק את האפשרויות של המיקום שנבחר, ברשימה ממוספרת. לכל אפשרות: שם, משפט אחד בשפת המשתמש שמתאר מה רואים, ורמת מורכבות. לבקש מהמשתמש לבחור מספר, או לתאר שילוב של שתיים.

אם המשתמש לא בטוח, להמליץ על אחת ולנמק במשפט אחד לפי מה שידוע: סוג העסק, הקהל, וכמה מורכבות הוא מוכן לתחזק.

שלב 3: שלוש שאלות קצרות לפני בנייה

לשאול בהודעה אחת:

  1. על מה בונים: HTML/CSS/JS פשוט, React, Next.js, Webflow, וורדפרס או משהו אחר ?
  2. מה התוכן: כותרת, טקסט, תמונות, צבעי מותג, לוגו. אם אין, להשתמש בתוכן דמה ולסמן אותו.
  3. האם האתר חייב לעבוד בכל הדפדפנים ובמובייל ? הנפשה שמסומנת "ניסיוני" נשענת על API שזמין רק ב-Chrome.

שלב 4: בנייה

  1. לפתוח ב-recipes.md את המתכון שנבחר ולקרוא את המפרט המלא.
  2. לבנות מימוש מאפס לפי המפרט ולפי התוכן של המשתמש.
  3. לבחור את הכלי הפשוט ביותר שמשיג את האפקט: CSS לפני Canvas, ו-Canvas לפני WebGL. להשתמש ב-Three.js או R3F רק כשיש עומק, תאורה או שיידר אמיתיים.
  4. לחשוף את "כפתורי הכיוונון" מהמתכון כמשתנים בראש הקובץ, או בפאנל קטן (למשל lil-gui או Leva), כדי שאפשר יהיה לכוונן בלי לגעת בקוד.
  5. במתכון שמסומן Chrome בלבד: לבנות fallback, כמו צילום של ה-HTML כטקסטורה או גרסת CSS פשוטה. לבדוק תמיכה בזמן ריצה ולא לפי user agent.

שלב 5: בדיקה לפני מסירה

לעבור על הרשימה ולדווח למשתמש מה נבדק ומה לא:

  1. prefers-reduced-motion: בהגדרה הזו ההנפשה נעצרת או מוחלפת בגרסה סטטית.
  2. ביצועים: לשאוף ל-60fps במחשב רגיל. לעצור את הלולאה כשהרכיב לא נראה (IntersectionObserver) וכשהטאב מוסתר. להגביל devicePixelRatio ל-2.
  3. מובייל: מגע במקום hover, וגרסה קלה יותר או סטטית במכשיר חלש.
  4. נגישות: הטקסט נשאר HTML אמיתי, נגיש לקורא מסך ולמנועי חיפוש. אפקט שמסתיר תוכן לא חוסם קריאה.
  5. אם לא הרצתי את הקוד בדפדפן, לכתוב את זה במפורש.

Related Skills

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community