NinA AI Agency

Button with eyes

A button with two eyes that follow your cursor. Come close and they open wide; click and they squeeze shut.

Follows your mouseReact + Tailwind, no extra packagesFree
Works inClaude CodeChatGPT CodexGemini CLIGitHub CopilotCursorLovablev0

Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.

Build a cinematic website effect: Button with eyes.

What it is: A button with two eyes that follow your cursor. Come close and they open wide; click and they squeeze shut.

Behaviour:
- Pill-shaped button with two white eyes (24 px) with black pupils on the left, and the text plus an arrow on the right.
- The pupils follow the cursor across the whole page (pointermove on window), clamped inside the eye with atan2 and a maximum distance, smoothly with a lerp.
- The closer the cursor gets to the button, the bigger the eyes (scale up to 1.25) and pupils; on hover the button looks slightly up at the cursor.
- When pressed the eyes squeeze shut (a ^ ^ shape) and the button springs in a little; on release they open again. Now and then they blink on their own.
- Accessible as a normal button with a text label; the eyes are aria-hidden. With prefers-reduced-motion the eyes only look, without scaling.

Requirements:
- Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript.
- Fully operable with keyboard and touch, with the right aria attributes.
- Respect prefers-reduced-motion: less or no movement.
- Use the colours, fonts and border radii of my project.
- At the end, show me where the component lives and how to use it.
- Put a short credit at the top of the file as a comment: "Based on the AI Toolkit by NinA AI Agency, https://www.nina-ai.nl/en/toolkit/cinematic/ogen-knop". Keep it there.

More effects