Eagle Vision

A cursor-following targeting effect inspired by Assassin’s Creed. The rings change size and color based on proximity to a target element, creating an immersive “lock-on” experience.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/eagle-vision.json"

Install Manually

Install dependencies

npm install framer-motion

Copy the source code

Copy the code into components/ui/eagle-vision.tsx

Usage

1import { EagleVision, EagleVisionTarget } from "@/components/ui/eagle-vision"
2
3export function Demo() {
4return (
5  <div>
6    <EagleVision />
7    <EagleVisionTarget>
8      <button className="px-4 py-2 bg-blue-500 text-white rounded">
9        Find Me
10      </button>
11    </EagleVisionTarget>
12  </div>
13)
14}

Props

Prop Name	Type	Default	Description
EagleVision	`component`	`-`	Renders cursor-following targeting rings
EagleVisionTarget	`component`	`-`	Wrapper for target element

Dialog Form Expandable Bento Grid