Jello

Quick implementation

.jello-box:hover {
  animation: jello 0.9s both;
}

@keyframes jello {
  0% { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  100% { transform: scale3d(1, 1, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .jello-box:hover {
    animation: none;
    transform: scale3d(1.1, 1.1, 1);
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS developer. Create a "Jello" animation effect for a UI element.

Requirements:
1. Use @keyframes with scale3d() to alternate between X and Y axis scaling.
2. The effect should simulate a gelatinous squish (wobble).
3. Include a fallback for prefers-reduced-motion that disables the animation and applies a simple scale transform.
4. Provide two variants:
   - Vanilla CSS using a class like .jello-effect.
   - Tailwind CSS using arbitrary values or a custom plugin configuration.

Ensure the code is performant and uses hardware-accelerated properties.

Why this matters in 2026

Playful micro-interactions like the jello effect significantly boost user engagement by providing immediate, tactile feedback on actions like clicks or hovers. Unlike standard transitions, this specific squish-stretch motion mimics real-world physics, making digital interfaces feel more organic and responsive to the user's input.

The logic

The effect is achieved by rapidly alternating scaleX and scaleY values within a scale3d() transform. By pushing the element wider while shrinking it vertically, and then reversing the process, we create a visual "slosh" that simulates a jelly-like consistency. The specific keyframe percentages are tuned to create a dampening effect where the oscillation settles quickly back to the original state.

Accessibility & performance

Because the animation relies entirely on transform, it runs on the compositor thread and avoids expensive layout recalculations, ensuring 60fps performance even on lower-end devices. However, the rapid motion can trigger vestibular disorders, so the @media (prefers-reduced-motion: reduce) query is mandatory to disable the effect for sensitive users.