diff --git a/submissions/examples/ease-badge-pulse/README.md b/submissions/examples/ease-badge-pulse/README.md new file mode 100644 index 0000000..b70023a --- /dev/null +++ b/submissions/examples/ease-badge-pulse/README.md @@ -0,0 +1,9 @@ +# Ease Badge Pulse Component + +A highly performant, pure CSS notification badge component featuring an infinite expanding pulse ring layout. + +## Features +- Zero JavaScript dependencies. +- Smooth hardware-accelerated animations (`transform` scale and `opacity`). +- 4 built-in state variants: `danger`, `success`, `warning`, and `info`. +- Anchored default `absolute` top-right positioning system built-in. diff --git a/submissions/examples/ease-badge-pulse/demo.html b/submissions/examples/ease-badge-pulse/demo.html new file mode 100644 index 0000000..385a1ed --- /dev/null +++ b/submissions/examples/ease-badge-pulse/demo.html @@ -0,0 +1,29 @@ + + + + + + Ease Badge Pulse Demo + + + +
+
+ 🔔 + +
+
+ 👤 + +
+
+ ⚠️ + +
+
+ 💡 + +
+
+ + diff --git a/submissions/examples/ease-badge-pulse/style.css b/submissions/examples/ease-badge-pulse/style.css new file mode 100644 index 0000000..261037c --- /dev/null +++ b/submissions/examples/ease-badge-pulse/style.css @@ -0,0 +1,61 @@ +.demo-wrapper { + display: flex; + justify-content: center; + align-items: center; + gap: 60px; + min-height: 100vh; + background-color: #f8f9fa; +} + +.icon-container { + position: relative; + width: 48px; + height: 48px; + background: #ffffff; + border-radius: 12px; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); +} + +.ease-badge-pulse { + position: absolute; + top: -4px; + right: -4px; + width: 12px; + height: 12px; + border-radius: 50%; + z-index: 2; +} + +.ease-badge-pulse::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: inherit; + animation: badge-pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; + z-index: -1; +} + +@keyframes badge-pulse-ring { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(2); + opacity: 0; + } +} + +.badge-danger { background-color: #dc3545; } +.badge-success { background-color: #28a745; } +.badge-warning { background-color: #ffc107; } +.badge-info { background-color: #17a2b8; } +