--tt-bind: 533. While Typetura identifies element width, you can pass values from anything into
--tt-bind to manipulate Typetura like viewer distance, ambient light, cursor position, etc.
CSSanimation:var(--tt-key)1svar(--tt-ease)1calc(-1s * var(--tt-bind) / var(--tt-max))bothpaused;
This property takes your keyframes, and associates them with the element context. The animation is paused at a point on the animation timeline defined by the context.
Leveraging the native CSS animation API provides the power Typetura needs to transform your typography, or any other CSS property, across contexts you define. There is no longer a need for breakpoints, complex CSS locks math, or numerous styles for different components. Instead all this information is held inside your keyframes, and adapts to your contexts.