PixelRotate

Full 360° rotation loop with configurable direction, duration, and trigger.

Configurable duration, easing, repeat count, and animation direction
Trigger modes: mount, hover, focus, viewport
Signals the end of its last iteration: onComplete (React), @complete (Vue), (complete) (Angular)
Respects prefers-reduced-motion automatically

Status: stable
Category: animations
Since: v1.6.0

API

import { PixelRotate } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`children` (required)	`React.ReactNode`	—	Content to rotate.
`duration`	`number`	`1800`	Animation duration in milliseconds. Default `1800`.
`repeat`	`number \| 'infinite'`	`'infinite'`	Iteration count: a number or `'infinite'`. Default `'infinite'`.
`direction`	`'normal' \| 'reverse' \| 'alternate' \| 'alternate-reverse'`	`'normal'`	CSS `animation-direction`. Default `'normal'`.
`easing`	`string`	`'linear'`	CSS `animation-timing-function`. Default `'linear'`.
`trigger`	`'mount' \| 'hover' \| 'click' \| 'focus' \| 'inView' \| boolean`	`'mount'`	When the animation should play. Default `'mount'`.
`onComplete`	`() => void`	—	Fires after the final iteration.
`className`	`string`	—	Extra class names applied to the wrapping `<div>`.

ref points to <div>.

WCAG target: 2.1 AA

respects prefers-reduced-motion

Animation is suppressed when the user has requested reduced motion.

Usage

import { PixelRotate } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelRotate>
      <span>Rotate</span>
    </PixelRotate>
  );
}

Examples

Default

import { PixelRotate } from '@pxlkit/ui-kit';

export function Default() {
  return (
    <PixelRotate>
      <span>Rotate</span>
    </PixelRotate>
  );
}

Reverse Direction

import { PixelRotate } from '@pxlkit/ui-kit';

export function ReverseDirection() {
  return (
    <PixelRotate direction="reverse" duration={2400}>
      <span>Reverse</span>
    </PixelRotate>
  );
}

Hover Trigger

import { PixelRotate } from '@pxlkit/ui-kit';

export function HoverTrigger() {
  return (
    <PixelRotate trigger="hover" repeat={1} duration={900}>
      <span>Hover me</span>
    </PixelRotate>
  );
}

Related