ספריית התלת-ממד של Spline: סצנות מוכנות לעמוד נחיתה

סצנה תלת-ממדית חיה בראש העמוד הייתה במשך חמש-עשרה שנה סימן לכך שלפרויקט יש תקציב לאולפן. WebGL קיים בדפדפנים מאז 2013, אבל הדרך מ"אני רוצה משהו יפה בעמוד הבית" ועד לתוצאה עברה דרך Three.js: סצנה, מצלמה, תאורה, חומרים, לולאת רינדור — הכול ביד ובקוד.

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

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

מה יש על המדף

הספרייה מסודרת לפי משימות, והשמות אומרים זאת ישירות: Interactive Website, Brand & Marketing, 3D Logos, 3D Icons, Particles, Materials, 3D Mockups, Product Design. לכל עבודה מוצגים היוצר, מספר הצפיות והלייקים, כך שרואים מיד מה באמת נכנס לשימוש.

אלה העבודות שאספו הכי הרבה תשומת לב עד סוף אוגוסט 2026. הסתכלו על השמות — אלה תשובות מוכנות לבעיות שצצות כמעט בכל עמוד נחיתה שני:

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

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

איך לוקחים סצנה

1. 1

   מצאו

   מסננים של Trending, Popular ו-New יחד עם הקטגוריות. לעמוד נחיתה התחילו ב-Interactive Website — שם יושבות ההכנות למסך הראשון.

2. 2

   לחצו Remix

   נפתח עותק משלכם. המקור נשאר שלם, ובעותק שלכם מותר לשבור הכול.

3. 3

   צבעו מחדש

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

4. 4

   שימו באתר

   הייצוא מחזיר תג. ל-React יש קומפוננטה משלה, ול-Webflow ול-Framer יש אינטגרציות משלהם.

ההטמעה היא ממש שתי שורות:

<script type="module"
  src="https://unpkg.com/@splinetool/viewer@2.0.14/build/spline-viewer.js">
</script>
<spline-viewer
  url="https://prod.spline.design/<id>/scene.splinecode">
</spline-viewer>

ל-React יש את @splinetool/react-spline — תחת רישיון MIT, ‏1,416 כוכבים ב-GitHub, יותר מ-700 אלף התקנות בחודש. אותה עבודה, בתור קומפוננטה.

כן, באמת מותר להשתמש בזה

החלק הנעים: קובצי הקהילה מתפרסמים תחת CC BY 4.0. הרישיון מתיר שינוי ושימוש מסחרי, כלומר סצנה מהספרייה יכולה לעלות ישירות לעמוד נחיתה של לקוח.

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

אם בא לכם לבנות משלכם

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

אפשר להתחיל בחינם — הספרייה, הרמיקסים והעורך פתוחים מיד. מסלול בתשלום מתחיל ב-12 דולר לחודש בחיוב שנתי, מסיר את סימן המים מהייצוא לרשת ופותח קבצים ללא הגבלה.

שתי הערות מהשטח

בקצרה

מה שמעניין ב-Spline הוא לא שאפשר לעשות בו תלת-ממד — אלא שהתלת-ממד כבר נעשה בשבילכם. מאות סצנות אינטראקטיביות — רובוטים שעוקבים אחרי הסמן, זכוכית נוזלית, חלקיקים, טיפוגרפיה חיה — יושבות בפתוח, עוברות רמיקס בשתי לחיצות, ומגיעות לאתר שלכם בשתי שורות קוד. רישיון CC BY 4.0 מאפשר לקחת אותן גם לעבודה מסחרית.

אם מזמן רציתם שראש עמוד הנחיתה יתעורר לחיים, זו הדרך הקצרה ביותר לתוצאה שראינו.