KenBurns
Hero-image slow zoom+pan with 8 compass directions, loops with alternate or hold
Default (top-right, 20 s)
Wraps any image or block. Slow zoom + pan — loop alternates direction by default.
// after animista.net (Ana Travas), re-authored on jatui motion tokensCompass directions
8 cardinal + ordinal directions control where the pan drifts. Faster durationS to see them quickly.
// after animista.net (Ana Travas), re-authored on jatui motion tokens top
// after animista.net (Ana Travas), re-authored on jatui motion tokens bottom
// after animista.net (Ana Travas), re-authored on jatui motion tokens left
// after animista.net (Ana Travas), re-authored on jatui motion tokens right
// after animista.net (Ana Travas), re-authored on jatui motion tokens top-left
// after animista.net (Ana Travas), re-authored on jatui motion tokens top-right
// after animista.net (Ana Travas), re-authored on jatui motion tokens bottom-left
// after animista.net (Ana Travas), re-authored on jatui motion tokens bottom-right
Hold at end
loop="hold" zooms once and stays at the final frame — useful for hero banners that enter once.
With a real image
Drop in an <img> as a child. The component handles overflow: hidden and pointer-events on children.