Components

KeyframeAnimator

KeyframeAnimator steps through explicit frame values over time, exposing each frame to a render function.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { KeyframeAnimator } from '@swiftuijs/ui';
export default function Example() {
    return ((<KeyframeAnimator interval={700} keyframes={[
            { scale: 1, opacity: 0.45 },
            { scale: 1.08, opacity: 0.75 },
            { scale: 1.15, opacity: 1 },
        ]}>
      {(frame) => (<Card>
          <div style={{
                padding: '24px',
                textAlign: 'center',
                transform: `scale(${frame.scale})`,
                opacity: frame.opacity,
                transition: 'transform 200ms ease, opacity 200ms ease',
            }}>
            Keyframe content
          </div>
        </Card>)}
    </KeyframeAnimator>));
}

Status: adapted

Usage and limitations

  • keyframes is the ordered sequence of frame objects exposed to the render function

  • interval controls the dwell time per frame in this web adaptation

  • repeat={false} stops at the last frame instead of looping

  • Automatic progression pauses while the system's Reduce Motion setting is enabled; manual controls remain available. Non-repeating sequences stop scheduling after their final value.

API reference

PropTypeRequiredDescription
children(frame: TFrame, controls: IPhaseAnimatorControls<TFrame>) => React.ReactNodeYesRender function for the current keyframe.
intervalnumberNoMilliseconds between keyframes. Default: 1000
keyframesTFrame[]YesOrdered keyframe values to step through.
repeatbooleanNoWhether to repeat from the first keyframe after the last. Default: true

Inherits additional props from Omit<IBaseComponent, 'children'>.

Edit this page on GitHubReport an issue

Inspector

Inspector presents supplemental controls or contextual details beside primary content.

Label

Combine a title with an optional icon.