componentry

Eye Tracking

Component 86

About

A pair of animated eyes whose pupils follow the cursor, with blink, dilation and realistic, cartoon, minimal and cyber style variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Eye Tracking to your project and fits it to your theme.

Code

How Eye Tracking is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { EyeTracking } from "@/components/ui/eye-tracking";

export default function Default() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background text-foreground">
      <EyeTracking eyeSize={140} gap={50} />
    </div>
  );
}

Dependencies

More by componentry

View all
  • Scroll Choreography

    Scroll Choreography

    1K
  • Collection Surfer

    Collection Surfer

    797
  • Liquid Glass Carousel

    Liquid Glass Carousel

    412
  • Wheel Carousel

    Wheel Carousel

    372
  • Animated Gradient

    Animated Gradient

    371
  • Circuit Board

    Circuit Board

    156
  • Infinite Image Field

    Infinite Image Field

    108
  • Magnetic Dock

    Magnetic Dock

    101