motion-keyframesOfficial · by ShadereraKeyframes
Values over time: numbers and 3D points held between keys and eased into each, smooth paths through many points at even speed, and eases from strike and glide to a stateless spring settle and CSS-style bezier.
“Use the shaderera-plugins skill to add motion-keyframes to this film and wire it in, then run check and show me a still.”
- Type
- component · Animation & Camera
- Version
- 0.1.0 · published
- Licence
- MIT
- Built on
- No other plugins
- npm
- No packages
- Copies
- Used by
- Tags
- keyframes, animation, easing, tween, track, timeline, motion
How to
use it.
Keyframed values over time with easing: numbers, points and progress, asked for their value at t.
import { glide, progress, strike, track, track3 } from './motion/keyframes.ts'const scale = track([[0, 1], [4, 1.2, glide], [6, 0.8, strike]]) // held, then eased into each keyconst pos = track3([[0, [0, 0, 0]], [10, [2, 1, -3]]])const fade = progress(t, 3.5, 4) // 0 → 1 over half a second// in render(t)card.scale = scale(t)Eases: linear, smooth (default), strike (a hit), accel, glide, hold (a cut), sine, expo, circ, back(overshoot), settle(stiffness) (a critically damped spring as a formula, the damped feel with no state) and bezier(x1, y1, x2, y2) (a curve from a motion designer's editor).
A track comes to rest on every key. path3(points, from, to, ease) is one move through several points that never stops between them: a centripetal Catmull-Rom curve at even speed.
Stateless: any t gives the same value whenever it is asked.
More in Animation & Camera
camera-keyframesOfficial · by ShadereraCamera keysA 3D camera as keyframed shots (eye, target, lens, roll) eased over time: dolly, yaw, crane, roll, snap; WebGPU view and projection matrices or a three.js camera; the lens opens for vertical variants.camera-shakeOfficial · by ShadereraCamera shakeA camera that breathes, is handheld, or kicks on the hits of the music: seeded noise and hit envelopes as formulas of t, applied in camera space.