REFERENCE
- Gallery page: https://magpui.com/en/i/password-field-with-an-all-seeing-eye-2f619f
- First frame (image): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/password-field-with-an-all-seeing-eye-2f619f/shot.jpg
- Clip (mp4): https://dnioievkvxejjbxgwvko.supabase.co/storage/v1/object/public/media/password-field-with-an-all-seeing-eye-2f619f/clip.mp4
- Original post: https://x.com/jh3yy/status/2099669732592947517 by @jh3yy
Before building, download the first frame and look at it. If ffmpeg is available, download the clip and extract frames (ffmpeg -i clip.mp4 -vf fps=2 frame-%02d.png), then study the motion frame by frame. Match what you see; the text below describes it, the frames are the truth.
BUILD
A dark reset-password form where the reveal toggle is a glowing eye at the end of the input. Activating it casts a cone of warm light across the field; characters inside the beam become visible while the rest stays masked, and the beam follows the pointer.
DESIGN SYSTEM
- Background #0B0B0B with a faint grid; title 22px bold #D4D4D4.
- Input #141414, 1px #3A2A1A border, 10px radius, dots #BDBDBD.
- Eye 22px: amber #F59E0B iris with orange #EA580C glow; beam a conic-gradient of rgba(245,158,11,.35) to transparent.
MOTION
- Toggle on: eye opens (scaleY 0.1 to 1, 250ms), beam fades in 300ms.
- Beam angle follows the pointer x over the field, eased (lerp 0.12).
- Characters under the beam swap from dots to letters via a mask; outside stay dots.
- Toggle off: beam collapses into the eye, 200ms.
SECTIONS
- Title.
- Password input with eye button.
- Light beam overlay.
IMPLEMENTATION
- Render the plain text and the dots as two stacked layers; mask the plain layer with the beam cone (CSS mask-image with a conic-gradient driven by a CSS variable).
- Button with aria-pressed and a Show password label.
- prefers-reduced-motion: skip the animation and show the end state.
ADAPT TO THE PROJECT
- Reuse the project's existing tokens, components and fonts; map colors to the closest existing tokens.
- Do not copy logos, brand names, characters or artwork from the reference. Use neutral placeholders.
SUCCESS CHECK
- Only characters inside the beam are readable.
- Keyboard users can toggle and see the whole value (beam widens to full when focused).
- No layout shift between states.
