Motion components for HyperFrames videos

Use it for the last frames: icon plus wordmark cut in slightly small and grey, settle to size while the wordmark darkens and the icon straightens, then true stillness..

Use it when a line should feel thrown into place: words arrive from scattered offsets, each at its own size, height and blur, and converge onto one baseline with a small overshoot.

Use it for a status line or any label that changes: each new label rises in from below with a vertical smear while the old one leaves upward, two frames of overlap.

Use it when a line should land with colour: glyphs appear behind a soft left to right edge (or the line rises), each one hot, cooling through a middle colour to ink.

Use it when text should be typed: characters land whole with seeded jitter around the rate, no caret.

Use it when a sentence should be read word by word: words land in light grey one after another, then a colour wave runs left to right turning each word accent, then ink.

Use it for a working state: the glyphs of a short label bob on their own phases.

Use it behind UI: two to four heavily blurred colour blobs that fade in and drift slowly.

Use it for anything that is being worked on: the slot content (an image or any HTML) sits heavily out of focus at reduced opacity, sharpens a little while waiting, then snaps to focus at the reveal time under a slow push.

Use it for a generated image arriving: the image starts as a thin horizontal line, the top edge snaps up and the bottom frontier travels down as a band of coarse pixels with a jagged edge.

Use it as the small living thing next to a label or in a field: a gradient sphere that fills the host, optionally defocused, whose colour moves through up to three stops on a schedule and which can pulse..

Use it on a surface that just changed: a soft light band sweeps across the host once.

Use it for organic accents or a full cover: N copies of a sprite pop around a focal point one after another with an overshoot, keep growing, then shrink and fade together.

Use it to say "we found these": N tokens carrying any image pop out at an origin, burst to seeded targets around it while spinning on their vertical axis, then float and drift outward.

Use it as a seam: a colour sweeps across the host along a diagonal edge with a soft glow riding the edge.

Use it to move a camera over anything: the content slot is wrapped and driven by a keyframe path of time, scale, x, y and ease.

Use it around a headline or a product: up to twelve images fly in from beyond the host edges to seeded slots on a ring that keeps the centre clear, overshoot and float.

Use it for a choice being made in UI: a rounded trigger that fills the host, whose background slides down onto the chosen item when the list opens and saturates to the highlight colour with a check mark, while the trigger label greys and the other items sit out of focus below.

Use it for a card, modal or panel taking over: a rounded panel grows from a small rect to the whole host while its content keeps its size at the centre.

Use it to point at something on a screenshot: selection draws a text highlight left to right over a rect; scan grows a translucent fill from the centre of a rect and fades a frame in around it, then reverts.

Use it as the frame of any input or status: a white pill that fills the host with an optional orb at the left, an arrow button at the right and a content slot between them.

Use it for any list, sheet or spec assembling itself: the children of the rows slot (or plain text items) fade and rise in one after another, top to bottom, with a touch of blur.

Use it to show a website or app: browser chrome with an address pill around a screen slot (or a tall screenshot), filling the host.