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
- Head turn from a frame sequenceThe technique behind characters that watch you: a sequence of frames you scrub with the mouse, with a crossfade between frames.
- Particle globeA spinning globe of hundreds of light points. Drag it around; points near your cursor light up and move aside.
- Flowing mesh gradientA living background on the GPU: colours that slowly flow into each other and bend around your cursor. No library, pure WebGL.