Components

PhaseAnimator

PhaseAnimator sequences a finite set of named phases and re-renders your content with the current phase value.

Example

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

Automatic Progression

Loading preview…

Code
'use client';
import { Card } from '@swiftuijs/ui';
import { Text } from '@swiftuijs/ui';
import { VStack } from '@swiftuijs/ui';
import { PhaseAnimator } from '@swiftuijs/ui';
export default function Example() {
    return ((<PhaseAnimator interval={900} phases={['idle', 'pressed', 'settled']}>
      {(phase) => (<Card>
          <VStack spacing={8} style={{ padding: '16px' }}>
            <Text style={{ fontWeight: 600 }}>Current phase</Text>
            <Text>{phase}</Text>
          </VStack>
        </Card>)}
    </PhaseAnimator>));
}

Status: adapted

Usage and limitations

  • phases is the ordered sequence of values exposed to the render function

  • trigger="automatic" advances on the configured interval

  • trigger="onDemand" lets the rendered content advance or reset through controls

  • 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.

More examples

On-Demand Progression

API reference

PropTypeRequiredDescription
children(phase: TPhase, controls: IPhaseAnimatorControls<TPhase>) => React.ReactNodeYesRender function for the current phase.
intervalnumberNoMilliseconds between automatic phase changes. Default: 1000
phasesTPhase[]YesOrdered phases to cycle through.
repeatbooleanNoWhether to wrap back to the first phase. Default: true
triggerPhaseAnimatorTriggerNoAnimation trigger style. Default: 'automatic'

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

Edit this page on GitHubReport an issue

PasteButton

PasteButton reads plain text from the clipboard and forwards it to your app, aligned with SwiftUI's clipboard action model.

PhotosPicker

PhotosPicker opens an image-only asset chooser and forwards selected files, keeping SwiftUI's media selection intent while relying on the browser's native file picker.