Function Example

apps/docs/src/app/docs/develop/react/frames/ExampleFrameCustom.tsx:40–64

()

}

const Example = (): JSX.Element => {
  return (
    <AnimatorGeneralProvider disabled={false} dismissed={false} duration={{ enter: 2, exit: 2 }}>
      <Animator root active>
        <Animated
          className="relative flex size-full text-center"
          animated={{
            transitions: {
              entering: {
                width: ['50%', '100%'],
                height: ['100%', '25%'],
                easing: 'steps(5, end)',
                repeat: Infinity,
                direction: 'alternate'
              }
            }
          }}
        >
          <FrameBase settings={frameSettings} />
          <div className="relative m-auto p-4">Futuristic Sci-Fi UI Web Framework</div>
        </Animated>
      </Animator>
    </AnimatorGeneralProvider>
  )
}

const ExampleFrameCustom = (): JSX.Element => {
  return (