אנימציה ללוגו ולאתר עם Hairline וקלוד קוד

מה זה Hairline?

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

Hairline היא ספרייה בקוד פתוח (רישיון MIT) של 33 ציורי קו איזומטריים שעונים לעכבר. מקלדת שהמקש שמתחת לעכבר שוקע והשכנים שלו אחריו, כספת שהחוגה שלה מסתובבת ובצירוף הנכון הבריחים נפתחים, מגירות שנפתחות, נתב שהאנטנות שלו נוטות לכיוון העכבר. נכון ל-5 בנובמבר 2026 הגרסה האחרונה ב-npm היא 0.5.1.

אפשר לראות את כולן חיות, עם מחוון לעוצמה, ב-hairline.lucasmarkes.com. אבל החלק המעניין לבעלי עסקים הוא לא 33 הציורים המוכנים. הוא שני הסקילים, שמאפשרים לקלוד קוד לצייר ציור חדש בשבילכם, באותו סגנון.

איך מתקינים את הסקילים של Hairline?

פקודה אחת מתקינה את שני הסקילים:

העתקהnpx skills add lucasmarkes/hairline

לפי עמוד הסקילים באתר, כל סקיל הוא תיקייה של קבצי טקסט קטנים. אין התקנה של npm לפרויקט, ו-Node צריך רק כדי להריץ את הבדיקות. אחרי ההתקנה פותחים מחדש את קלוד קוד. הסקילים עובדים גם ב-Cursor, Codex ובכל סוכן שקורא סקילים.

אם זו הפעם הראשונה שאתם מתקינים סקיל, תעברו קודם על המדריך על find-skills, שמסביר מה הפקודה npx skills add עושה ואיפה הקבצים נשמרים.

איך יוצרים אנימציה מרעיון עם hairline-create?

כותבים את הפקודה ואחריה רעיון, במילים פשוטות. הדוגמה מה-README:

העתקה/hairline-create a sales funnel

מה קורה מכאן, לפי התיעוד:

1. קונספטים: הוא מציע שניים או שלושה קונספטים, שורה לכל אחד: מה האובייקט ומה העכבר עושה לו. אם כבר יש לכם רעיון ויזואלי, תכתבו אותו והשלב הזה נחסך.
2. ציור: הוא מצייר את מה שבחרתם, על אותו מנוע של 33 הציורים, לפי עשרה כללי עיצוב שכתובים בסקיל.
3. בדיקה: הוא בודק את הציור מול הכללים וגם בדפדפן.
4. קובץ: מקבלים hairline-.html, קובץ אחד בלי תלויות שנפתח ישר מהמחשב, עם מחוון עוצמה, מתג בין בהיר לכהה וכפתור הפעלה שמריץ סיור באנימציה.

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

איך הופכים את הלוגו לאנימציה עם hairline-adopt?

זה החלק שהכי שווה לנסות. נותנים לסקיל השני ציור שכבר יש לכם, אייקון או לוגו, כקובץ SVG:

העתקה/hairline-adopt icons/logo.svg

לפי ה-README, הסקיל קורא את הקובץ, בונה מחדש את האובייקט כציור קו עם הפרופורציות והחלקים שלו, ומציע מה העכבר יעשה לו. התוצאה היא קובץ HTML אחד, בדיוק כמו ב-hairline-create.

אפשר לראות מה שני הסקילים ציירו, כל ציור ליד הפרומפט שיצר אותו, בעמוד hairline.lucasmarkes.com/skills.

מה כותבים לקלוד קוד כדי לקבל לוגו חי בדף הנחיתה?

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

העתקהיש בתיקייה הזאת קובץ לוגו בנתיב assets/logo.svg.
1. תריץ /hairline-adopt על הקובץ, ותציג לי את ההצעות למה העכבר יעשה ללוגו. אני אבחר אחת.
2. אחרי שבחרתי, תפתח את הקובץ שנוצר בדפדפן ותראה לי צילום מסך.
3. תשים את האנימציה בראש דף הנחיתה, ליד הכותרת הראשית, ברוחב של עד 420 פיקסלים.
4. תתאים את --hairline-plate לצבע הרקע של האתר, ואת צבעי הקווים לצבעי המותג.
5. תפעיל את האפשרות play כדי שבטלפון היא תזוז גם בלי עכבר.
6. תחליף את התיאור לקורא מסך לעברית: "הלוגו של העסק, מונפש".
7. תבדוק את הדף ברוחב מחשב וברוחב טלפון, ותראה לי צילום מסך של שניהם.

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

איך שמים את האנימציה באתר או במצגת?

יש שתי דרכים, לפי מה שבניתם:

• ציור מוכן מהספרייה: אם האתר בנוי ב-React, מתקינים npm i @lucasmarkes/hairline ושמים קומפוננטה כמו <Terrain />. באתר בלי React יש פונקציה שמציירת לתוך אלמנט בדף. באתר יש גם כלי שכותב לכם את הקוד ודוגמה עם CDN.
• ציור שהסקיל יצר: הקובץ HTML עומד בפני עצמו. הכי פשוט לבקש מקלוד קוד: "תשים את האנימציה מהקובץ הזה בראש דף הנחיתה, בצד של הכותרת, ותתאים את הצבעים לאתר".

העתקהimport { Terrain } from "@lucasmarkes/hairline/react"

export function Hero() {
  return <Terrain />
}

לגבי צבעים: יש שישה משתני CSS שקובעים את הקווים והרקע. הכי חשוב הוא --hairline-plate, הצבע של המשטחים. אם הרקע של האתר שלכם לא לבן ולא כמעט שחור, צריך לשים בו את צבע הרקע, אחרת יופיעו מלבנים בצבע אחר. למצגת, הכי קל לשמור את הקובץ ולהציג אותו בדפדפן, או לבקש מקלוד קוד להקליט אותו כסרטון קצר.

מה חשוב לדעת לפני שמתחילים?

• עלות: הספרייה והסקילים חינמיים, ברישיון MIT. העבודה של קלוד קוד נספרת במכסה של המנוי שלכם.
• הלוגו צריך להיות SVG: hairline-adopt לא קורא תמונות רגילות.
• הסגנון קבוע: כל הציורים הם קווים דקים איזומטריים. אם המותג שלכם צבעוני ומלא, תבדקו קודם שזה מתאים לו.
• טלפון: בנייד אין עכבר שמרחף מעל הציור. האפשרות play מריצה את האנימציה לבד בלולאה, וזה פתרון טוב לנייד. תבדקו את הדף בטלפון לפני שמעלים.
• נגישות: לכל ציור יש תיאור שקורא מסך מקריא, ואפשר להחליף אותו לעברית עם label. מי שביקש להפחית תנועה במכשיר, הציורים שזזים לבד נעצרים אצלו.
• הטמעה: הקובץ מהסקיל עומד בפני עצמו. להכניס אותו לאתר קיים לפעמים דורש שקלוד קוד יחבר אותו, במיוחד באתרים שבנויים בבונה אתרים.

רוצים עוד אנימציות לאתר, לא רק קווים? יש את המדריך על הסקילים של אמיל לאנימציות באתר, ואם אתם רוצים אובייקט תלת מימד מלא, את המדריך על אתר עם אובייקט 3D חי.