diff --git a/submissions/examples/neon-glowing-input-55581/README.md b/submissions/examples/neon-glowing-input-55581/README.md new file mode 100644 index 00000000000..d4ccb546e92 --- /dev/null +++ b/submissions/examples/neon-glowing-input-55581/README.md @@ -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 +
+ +
+``` + +## 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) diff --git a/submissions/examples/neon-glowing-input-55581/demo.html b/submissions/examples/neon-glowing-input-55581/demo.html new file mode 100644 index 00000000000..e8b35cb4608 --- /dev/null +++ b/submissions/examples/neon-glowing-input-55581/demo.html @@ -0,0 +1,35 @@ + + + + + + Neon Glowing Input Demo + + + + +
+ +
+ +
+
+ + diff --git a/submissions/examples/neon-glowing-input-55581/style.css b/submissions/examples/neon-glowing-input-55581/style.css new file mode 100644 index 00000000000..0ae3283d957 --- /dev/null +++ b/submissions/examples/neon-glowing-input-55581/style.css @@ -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); + } +}