PagieraKeyframes with /real freedom
Animate any property on a timeline, shape every interval with curves or springs, split text into letters, and start from 34 effects you can edit.
Each property has its own lane; curves control the interval to the next key.
How it works04
- 01
Select a layer
Open Motion in the editor rail and pick a layer whose layout already works.
- 02
Set keys
Start the stopwatch, move the playhead, change the value; a key is added.
- 03
Shape the curve
Pick a preset ease, drag bezier handles or switch to a spring.
- 04
Choose a trigger
Play on load or when scrolled into view, once, looping or ping-pong.
What you can do06
- Props
Seven property groups
Transform, 3D and skew, appearance, shadow, filters, mask and text.
- Ease
Curves and springs
Bezier handles, preset eases, hold keys, or spring stiffness and damping.
- Text
Split and stagger
Animate letters or words forward, backward, from the centre or randomly.
- Noise
Wiggle
Smooth random variation with amount and speed, layered on any track.
- FX
Editable effects
Entrances, text reveals, attention, loops and exits become normal keyframes.
- Web
CSS on the site
Published motion is CSS; reduced motion leaves content readable at rest.
Built-in limits04
- 34effect presets
- 120keys per property
- 60 smaximum time
- 40named animations
The timeline previews page motion; it does not export a rendered video.
Motion Editor
Questions
Keyframes replace a layer's preset entrance; enabling them converts the entrance into editable tracks.
Visitors who prefer reduced motion see the layer in its readable resting state.
Yes. Named animations from the Motion panel can be played from the action graph.
Try it in your own app
Install the package and open the studio on a protected route.
bun add pagiera