Tailwind UI Pattern Registry for humans and agents

input focus spotlight border conic-gradient rotate form premium focus state for form inputs search bar with spotlight effect hero input field with visual emphasis AI prompt input with glowing border default focus ring looks boring need eye-catching input focus for hero sections want rotating border glow without JS mouse tracking

Input Spotlight

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/input-spotlight.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="input-spotlight"><input type="text" class="w-full bg-transparent px-4 py-3 text-white outline-none" placeholder="Search..."></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1104 bytes · 56 lines
Custom Properties
--spotlight-color--spotlight-size--spotlight-speed
Classes
.input-spotlight
input focus spotlight border conic-gradient rotate form

A rotating spotlight beam that sweeps around the input border on :focus-within. Uses a conic-gradient with a narrow bright slice on a ::before pseudo-element, masked by a solid ::after background to create the border illusion. The animation pauses when not focused.

Search input

<div class="input-spotlight">
  <input type="text"
    class="w-full rounded-lg bg-transparent px-4 py-3 text-white placeholder-white/40 outline-none"
    placeholder="Search for anything...">
</div>

With icon

<div class="input-spotlight flex items-center gap-3 px-4">
  <svg class="h-5 w-5 shrink-0 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
  <input type="text"
    class="w-full bg-transparent py-3 text-white placeholder-white/40 outline-none"
    placeholder="Ask AI anything...">
</div>

Custom color

<div class="input-spotlight" style="--spotlight-color: oklch(0.7 0.2 160);">
  <input type="email"
    class="w-full rounded-lg bg-transparent px-4 py-3 text-white placeholder-white/40 outline-none"
    placeholder="Enter your email">
</div>