Ronen Aminoff
ENעברית
בואו נדבר

כלים

Kinetic Type Director

מביימים את התנועה של כותרת במילים פשוטות, ומייצאים אותה כ-⁠CSS וכ-⁠JSON.

  • לנסות בדפדפן

רץ בדפדפן. אין מה להתקין.

לנסות בדפדפן

רץ בדף הזה. שום דבר לא עולה לשרת.

Spring Lineup

ease out · duration 600 ms · stagger 50 ms · rise 0.55em · scale 100% · tracking 0% · total 650 ms

Direct the motion

Plan

Say how the line should move, or pick a direction.

You see the plan before anything moves.

History

  1. Nothing yet. Every direction you apply, cancel or undo is listed here.

Take it with you

CSS keyframes that play exactly what the stage plays, and the same motion as JSON.

/* Kinetic Type Director · "Spring Lineup" · made on ronenaminoff.com/lab/kinetic-type-director/
   HTML: <p class="ktd-line"><span class="w">Spring</span> <span class="w">Lineup</span></p> */
.ktd-line .w {
  display: inline-block;
  animation: ktd-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ktd-line .w:nth-child(2) { animation-delay: 50ms; }
@keyframes ktd-in {
  from { transform: translateY(0.55em) scale(1); opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ktd-line .w { animation: none; }
}

{
  "tool": "Kinetic Type Director",
  "version": 1,
  "line": "Spring Lineup",
  "unit": "word",
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "easingToken": "out",
  "totalMs": 650,
  "words": [
    {
      "text": "Spring",
      "delayMs": 0,
      "durationMs": 600
    },
    {
      "text": "Lineup",
      "delayMs": 50,
      "durationMs": 600
    }
  ],
  "keyframes": [
    {
      "offset": 0,
      "translateYEm": 0.55,
      "scale": 1,
      "opacity": 1
    },
    {
      "offset": 1,
      "translateYEm": 0,
      "scale": 1,
      "opacity": 1
    }
  ],
  "trackingEm": 0,
  "glitch": null,
  "reducedMotion": "no animation: the line appears in place",
  "spec": {
    "ease": "out",
    "dur": 600,
    "stagger": 50,
    "rise": 0.55,
    "fade": false,
    "glitch": false,
    "scale": 100,
    "tracking": 0
  }
}
01

מה הוא עושה

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

הוראות במילים פשוטות הופכות לתוכנית שאפשר לקרוא: אילו ערכים משתנים, ממה ולמה. מחילים, מבטלים, ולוקחים את התנועה הלאה כ-⁠CSS keyframes וכקובץ JSON.

  • תוכנית לפני שמשהו זז
  • מבקש אישור לפני תנועה מסוכנת
  • ייצוא שמנגן בדיוק את אותה תנועה
02

איך משתמשים

  1. כתבו שורה משלכם, או השאירו את הדוגמה.
  2. תנו הוראה במילים, או בחרו אחת. קראו את התוכנית ואז החילו אותה.
  3. Undo מנגן את השינוי האחרון לאחור.
  4. העתיקו או הורידו את ה-⁠CSS וה-⁠JSON.
03

שימוש בפרויקט

מדביקים את ה-⁠CSS בדף ועוטפים כל מילה ב-⁠span, כמו שמראה ההערה בראש הקובץ. ה-⁠JSON מחזיק את אותה תנועה לכל מילה, בשביל סקריפט או כלי אחר.

מה נבדק

  • עבר Unit: directions to planned changes; refusals with reasons; risky motion asks first; exact undo Node 22, Linux
  • עבר Unit: CSS and JSON exports carry the stage motion: distance, scale, stagger, easing, glitch, reduced motion Node 22, Linux
  • עבר Browser: plan, apply, approve, refuse, undo, line errors; the exported CSS runs the same animation in the page Chromium (Playwright), 1280px
04

מגבלות

  • מבין את ההוראות שמופיעות בדוגמאות, בערך תריסר מילים. זה דקדוק קטן, לא מודל שפה.
  • מזיז מילים שלמות, לא אותיות בודדות.
  • עוד אין ייצוא ל-⁠After Effects, ולכן לא נטען שום דבר לגבי After Effects.
05

איך בניתי את זה

  • נבנה עם Claude Code בסשן אחד בענן, ב-⁠9 בנובמבר 2026.
  • הוא רץ על מנוע התנועה של הכותרת בדף הבית, כך שאותו דקדוק נבדק בשני מקומות.
  • נבדק ב-⁠Node וב-⁠Chromium. לא נבדק ב-⁠After Effects.

מה לא עבד

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