feat: add react shimmer pulse tooltip for crypto interfaces

submissions/react/react-tooltip-shimmer-pulse-crypto/README.md

@@ -0,0 +1,104 @@
+# React Shimmer Pulse Tooltip – Crypto
+
+A reusable React tooltip component featuring a shimmer pulse animation designed for crypto dashboards, trading interfaces and financial applications. Built with EaseMotion CSS utility classes, responsive layouts and accessible tooltip semantics.
+
+---
+
+## Features
+
+- React functional component
+- Shimmer Pulse animation
+- Crypto-inspired UI
+- Responsive layout
+- Accessible tooltip semantics
+- EaseMotion CSS utility classes
+- Customizable props
+- Optional external stylesheet
+- Lightweight and reusable
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | string | `"BTC"` | Trigger button label |
+| `text` | string | `"Bitcoin is trading above resistance."` | Tooltip content |
+| `position` | string | `"top"` | Tooltip position (`top`, `bottom`, `left`, `right`) |
+
+---
+
+## Usage
+
+```jsx
+import ShimmerPulseTooltip from "./ShimmerPulseTooltip";
+
+function App() {
+  return (
+    <ShimmerPulseTooltip
+      label="ETH"
+      text="Ethereum network activity is increasing."
+      position="top"
+    />
+  );
+}
+```
+
+---
+
+## Styling
+
+Import the stylesheet:
+
+```jsx
+import "./style.css";
+```
+
+The component uses EaseMotion CSS utility classes including:
+
+- `ease-fade-in`
+- `ease-hover-lift`
+
+along with a custom shimmer pulse animation.
+
+---
+
+## Accessibility
+
+- Uses `role="tooltip"`
+- Links trigger and tooltip with `aria-describedby`
+- Keyboard accessible using `:focus-within`
+- Hover and keyboard interaction supported
+
+---
+
+## Responsive
+
+The tooltip automatically adapts spacing and sizing for smaller screens while preserving readability.
+
+---
+
+## Folder Structure
+
+```
+react-tooltip-shimmer-pulse-crypto/
+│
+├── ShimmerPulseTooltip.jsx
+├── style.css
+└── README.md
+```
+
+---
+
+## Browser Support
+
+- Chrome
+- Firefox
+- Edge
+- Safari
+
+---
+
+## License
+
+Designed for the EaseMotion CSS React examples collection.

submissions/react/react-tooltip-shimmer-pulse-crypto/ShimmerPulseTooltip.jsx

@@ -0,0 +1,34 @@
+import "./style.css";
+
+export default function ShimmerPulseTooltip({
+  text = "Bitcoin is trading above resistance.",
+  label = "BTC",
+  position = "top"
+}) {
+  return (
+    <div className="tooltip-wrapper ease-fade-in ease-hover-lift">
+      <button
+        className="tooltip-trigger"
+        aria-describedby="crypto-tooltip"
+      >
+        {label}
+      </button>
+
+      <div
+        id="crypto-tooltip"
+        role="tooltip"
+        className={`tooltip tooltip-${position}`}
+      >
+        <div className="tooltip-shimmer"></div>
+
+        <div className="tooltip-content">
+          <strong>{label}</strong>
+
+          <p>{text}</p>
+        </div>
+
+        <span className="tooltip-arrow"></span>
+      </div>
+    </div>
+  );
+}

submissions/react/react-tooltip-shimmer-pulse-crypto/style.css

@@ -0,0 +1,135 @@
+.tooltip-wrapper{
+  position:relative;
+  display:inline-flex;
+  justify-content:center;
+  align-items:center;
+  margin:4rem;
+}
+
+.tooltip-trigger{
+  padding:.9rem 1.5rem;
+  border:none;
+  border-radius:12px;
+  background:#111827;
+  color:#fff;
+  cursor:pointer;
+  font-size:1rem;
+  font-weight:600;
+  transition:transform .3s ease;
+}
+
+.tooltip-trigger:hover{
+  transform:translateY(-2px);
+}
+
+.tooltip{
+  position:absolute;
+  min-width:240px;
+  padding:1rem;
+  border-radius:14px;
+  overflow:hidden;
+  background:#18181b;
+  color:#fff;
+  box-shadow:0 18px 40px rgba(0,0,0,.35);
+  opacity:0;
+  visibility:hidden;
+  transform:translateY(8px) scale(.95);
+  transition:all .35s ease;
+}
+
+.tooltip-wrapper:hover .tooltip,
+.tooltip-wrapper:focus-within .tooltip{
+  opacity:1;
+  visibility:visible;
+  transform:translateY(0) scale(1);
+}
+
+.tooltip-top{
+  top:auto;
+  bottom:calc(100% + 14px);
+  left:50%;
+  transform:translateX(-50%) translateY(8px) scale(.95);
+}
+
+.tooltip-bottom{
+  top:calc(100% + 14px);
+  left:50%;
+  transform:translateX(-50%) translateY(-8px) scale(.95);
+}
+
+.tooltip-left{
+  right:calc(100% + 14px);
+  top:50%;
+  transform:translateY(-50%) scale(.95);
+}
+
+.tooltip-right{
+  left:calc(100% + 14px);
+  top:50%;
+  transform:translateY(-50%) scale(.95);
+}
+
+.tooltip-content{
+  position:relative;
+  z-index:2;
+}
+
+.tooltip-content strong{
+  display:block;
+  margin-bottom:.35rem;
+  font-size:1rem;
+}
+
+.tooltip-content p{
+  font-size:.9rem;
+  line-height:1.6;
+  color:#d4d4d8;
+}
+
+.tooltip-shimmer{
+  position:absolute;
+  inset:0;
+  background:linear-gradient(
+    120deg,
+    transparent 20%,
+    rgba(255,255,255,.18) 50%,
+    transparent 80%
+  );
+  transform:translateX(-100%);
+  animation:shimmerPulse 2s linear infinite;
+}
+
+.tooltip-arrow{
+  position:absolute;
+  left:50%;
+  bottom:-8px;
+  width:16px;
+  height:16px;
+  background:#18181b;
+  transform:translateX(-50%) rotate(45deg);
+}
+
+@keyframes shimmerPulse{
+  from{
+    transform:translateX(-100%);
+  }
+
+  to{
+    transform:translateX(100%);
+  }
+}
+
+@media(max-width:600px){
+  .tooltip{
+    min-width:200px;
+    font-size:.9rem;
+  }
+
+  .tooltip-trigger{
+    width:100%;
+  }
+
+  .tooltip-wrapper{
+    margin:2rem 1rem;
+  }
+}