Skip to content

feat(submission): add neon glowing input field on focus (#55581) #55598

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 1 commit into from
Jul 25, 2026
+89 −0
Merged

feat(submission): add neon glowing input field on focus (#55581) #55598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions submissions/examples/neon-glowing-input-55581/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Neon Glowing Input Field on Focus

## What does this do?
Creates an input field component that exhibits a tracing "neon glow" effect along its borders when it receives focus. This adds a beautiful cyberpunk or modern dark-mode aesthetic to the library.

## How is it used?
```html
<div class="ease-input-neon">
<input type="text" placeholder="Search the matrix...">
</div>
```

## Why does it fit EaseMotion CSS?
It provides a high-quality, pure CSS animated focus state that feels engaging and natural, completely avoiding the need for JavaScript listeners while delivering a highly interactive human-readable class name. Perfect for Dark Mode UIs, Login/Signup Forms, and Prominent Search Inputs.

## Tech Stack
- HTML
- CSS (No JavaScript)
35 changes: 35 additions & 0 deletions submissions/examples/neon-glowing-input-55581/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Glowing Input Demo</title>
<link rel="stylesheet" href="style.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #0b0b14;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<label for="neon-input">Click inside to see the glow</label>
<div class="ease-input-neon">
<input type="text" id="neon-input" placeholder="Search the matrix...">
</div>
</div>
</body>
</html>
36 changes: 36 additions & 0 deletions submissions/examples/neon-glowing-input-55581/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
.ease-input-neon {
position: relative;
display: inline-block;
z-index: 1;
}

.ease-input-neon input {
padding: 12px 16px;
font-size: 1rem;
color: #fff;
background: #1e1e2f;
border: 2px solid #2d2d44;
border-radius: 8px;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ease-input-neon input:focus {
border-color: #00f3ff;
box-shadow: 0 0 15px rgba(0, 243, 255, 0.4),
inset 0 0 10px rgba(0, 243, 255, 0.1);
animation: ease-neon-pulse 2s infinite alternate;
}

.ease-input-neon input::placeholder {
color: #64648b;
}

@keyframes ease-neon-pulse {
0% {
box-shadow: 0 0 15px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(0, 243, 255, 0.1);
}
100% {
box-shadow: 0 0 25px rgba(0, 243, 255, 0.7), inset 0 0 15px rgba(0, 243, 255, 0.3);
}
}
Loading