Loading page
About this tool
Split a logo sting into weighted beats and get frame-accurate in and out points, timecodes and easing curves for your editor.
The Logo Animation Storyboard Builder converts a total sting length and a set of weighted beats into whole-frame in and out points, SMPTE timecodes and a CSS cubic-bezier easing curve for each step. Frames are allocated by rounding the running cumulative total rather than each beat separately, so the parts always add up to the timeline exactly with no dropped or doubled frame. It also checks each beat against the motion band that reads as movement rather than a cut - roughly 100ms at the low end and 500ms for a single element - and flags stings long enough to need a pause control under WCAG 2.1 SC 2.2.2.
Open Logo Animation Storyboard Builder on AltFTool — it loads instantly in your browser.
Add your input to the workspace.
Adjust the options until the result looks right.
Copy or download the output and put it to work.
Cumulative rounding guarantees the beats sum to the timeline exactly, whatever the weights.
Every beat carries a cubic-bezier you can paste straight into CSS or a keyframe editor.
Warns about beats that round to zero frames, land under 100ms, or push the sting past the 5 second pausable threshold.
Most brand stings sit between 2 and 5 seconds. Past 5 seconds, WCAG 2.1 SC 2.2.2 asks for a way to pause, stop or hide auto-playing motion shown alongside other content, which is a practical reason to keep a web sting short.
About 100 milliseconds. Below that the eye reads the change as an instant cut instead of a movement, which is why Material Design's shortest motion durations start there. Simple transitions typically land near 200ms and medium ones near 300ms.
Use decelerate, cubic-bezier(0, 0, 0.2, 1), for something entering the frame; accelerate, cubic-bezier(0.4, 0, 1, 1), for something leaving; and the standard curve, cubic-bezier(0.4, 0, 0.2, 1), for movement within the frame. Linear is only right for continuous motion such as a rotation.
Multiply the duration in seconds by the frame rate and round to a whole frame: 500ms at 30fps is 15 frames. Rounding each beat independently makes the parts drift away from the total, so this tool rounds the running cumulative boundary instead, which keeps the sum exact.