feat: add organic liquid wave fluid indicator with adaptable fill level (#428)

[Pcmhacker-piro]

Closes #428

Pull Request Description

Adds an organic liquid wave fluid indicator — a pure CSS progress/fill-level indicator that simulates a fluid surface using rotating border-radius shapes with multi-layer depth blending.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/liquid-wave-fluid-indicator/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

Three core CSS classes:

• .ease-wave-container — the outer container with overflow: hidden and rounded corners
• .ease-wave-liquid — the primary wave layer with ::after pseudo-element for depth
• @keyframes ease-kf-wave — continuous 360° rotation animation

The fill level is controlled entirely via the --fill-level CSS custom property (e.g. style="--fill-level: 60%").

How does a developer use it?

<div class="ease-wave-container" style="--fill-level: 60%;">
  <div class="ease-wave-liquid"></div>
  <div class="ease-wave-label">
    <span class="ease-wave-value">60</span>
    <span class="ease-wave-unit">Percent</span>
  </div>
</div>
Why does it fit EaseMotion CSS?
Fluid wave indicators are a popular micro-interaction pattern for progress bars, battery indicators, and dashboard metrics. This implementation is pure CSS (no JS required for animation), uses the established ease- prefix convention, includes a prefers-reduced-motion fallback, and follows EaseMotion's animation-first philosophy.
Demo
- Demo added (demo.html opens directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
- The technique uses non-uniform border-radius values on oversized elements that rotate continuously, creating the organic wave illusion
- Two layers (primary + ::after pseudo-element) rotate at different speeds and opposite directions for depth
- The demo includes an interactive slider and preset buttons to adjust fill level in real-time
- will-change: transform is set on the wave layer for GPU-accelerated animation
- prefers-reduced-motion flattens the wave to a static fill
Closes #428

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/liquid-wave-fluid-indicator

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check this