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.
Enter Total sting length (ms) and pick a Frame rate, then name each beat and give it a Relative weight.
Set an Easing per beat — decelerate, accelerate or standard — and use Add a beat for another step.
Read the In and Out timecodes, the frame count per beat and any warning for beats under 100ms, then press Copy shot list.
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.