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 @@ + + +
+ + +Playful horizontal wiggle to attract attention — friendlier than a shake.
+ +The card wiggles automatically on load
+The wiggle can be tuned via CSS custom properties:
+--ease-wiggle-amount: 8px; +--ease-wiggle-speed: 0.5s;+