From 532efc98d86074e57621c48e62281f7a4ceb12aa Mon Sep 17 00:00:00 2001 From: Arpan Patra Date: Tue, 23 Jun 2026 02:33:21 +0530 Subject: [PATCH] feat(examples): add ease-attention-wiggle --- .../examples/ease-attention-wiggle/README.md | 35 ++++++++++++++++++ .../examples/ease-attention-wiggle/demo.html | 36 +++++++++++++++++++ .../examples/ease-attention-wiggle/style.css | 31 ++++++++++++++++ 3 files changed, 102 insertions(+) create mode 100644 submissions/examples/ease-attention-wiggle/README.md create mode 100644 submissions/examples/ease-attention-wiggle/demo.html create mode 100644 submissions/examples/ease-attention-wiggle/style.css diff --git a/submissions/examples/ease-attention-wiggle/README.md b/submissions/examples/ease-attention-wiggle/README.md new file mode 100644 index 0000000000..2a338bbec4 --- /dev/null +++ b/submissions/examples/ease-attention-wiggle/README.md @@ -0,0 +1,35 @@ +# ease-attention-wiggle + +## What does it do? +Playful horizontal wiggle to grab the user's attention — friendlier and slower than a shake. + +## Features +- `translateX` oscillation for a side-to-side wiggle +- 2–3 cycles (configurable via `animation-iteration-count`) +- CSS custom properties: + - `--ease-wiggle-amount` (default: 8px) + - `--ease-wiggle-speed` (default: 0.5s) +- Pure CSS, no JavaScript + +## Usage +```css +.element { + animation: wiggle 0.5s ease-in-out 2; +} + +@keyframes wiggle { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-8px); } + 50% { transform: translateX(8px); } + 75% { transform: translateX(-4px); } +} +``` + +## Browser Support +- Chrome 104+, Firefox 108+, Safari 14.1+ + +## Tech Stack +- HTML + CSS only, no JavaScript + +## Preview +Open `demo.html` directly in browser. diff --git a/submissions/examples/ease-attention-wiggle/demo.html b/submissions/examples/ease-attention-wiggle/demo.html new file mode 100644 index 0000000000..99494bafc6 --- /dev/null +++ b/submissions/examples/ease-attention-wiggle/demo.html @@ -0,0 +1,36 @@ + + + + + + ease-attention-wiggle — EaseMotion CSS + + + + +

ease-attention-wiggle

+

Playful horizontal wiggle to attract attention — friendlier than a shake.

+ +
+

Demo

+

The card wiggles automatically on load

+
Look at me!
+
+ +
+

Customization

+

The wiggle can be tuned via CSS custom properties:

+ 
--ease-wiggle-amount: 8px;
+--ease-wiggle-speed: 0.5s;
+
+ + diff --git a/submissions/examples/ease-attention-wiggle/style.css b/submissions/examples/ease-attention-wiggle/style.css new file mode 100644 index 0000000000..51adbcd6de --- /dev/null +++ b/submissions/examples/ease-attention-wiggle/style.css @@ -0,0 +1,31 @@ +/* ============================================================ + EaseMotion CSS — ease-attention-wiggle + Playful horizontal wiggle to attract attention + ============================================================ */ + +:root { + --ease-wiggle-amount: 8px; + --ease-wiggle-speed: 0.5s; +} + +.wiggle-card { + width: 240px; + height: 120px; + margin: 1.5rem auto; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #6366f1, #a78bfa); + border-radius: 14px; + font-weight: 600; + color: #ffffff; + font-size: 1.1rem; + animation: wiggle var(--ease-wiggle-speed) ease-in-out 3; +} + +@keyframes wiggle { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(calc(var(--ease-wiggle-amount) * -1)); } + 50% { transform: translateX(var(--ease-wiggle-amount)); } + 75% { transform: translateX(calc(var(--ease-wiggle-amount) * -0.5)); } +}