Wandering Eyes

A loading animation with moving eyes that simulate natural eye movement and blinking. It renders two eyes that move and blink in a continuous loop. Use it for loading states where a more human-like animation is desired.

byTurboStarter from Loading UI

Installation

terminal

pnpm dlx layro-cli add @turbostarter/wandering-eyes

npx layro-cli add @turbostarter/wandering-eyes

npx layro-cli add @turbostarter/wandering-eyes

bunx layro-cli add @turbostarter/wandering-eyes

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import { cn } from "@/lib/utils";

type WanderingEyesProps = React.ComponentProps<"span"> & {
  eyeScale?: number;
  gapScale?: number;
  pupilScale?: number;
  blinkScale?: number;
  travelScale?: number;
};

function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
}