OnomaUI

pachin motion

pachin has 2 kinds of motion.

ぱちん2 motionsOfficial

Motion by meaning

Bubble pops
Clasp snaps shut

Bubble pops

Dismiss a notice

Bursts out to 140% and vanishes.

Duration
0.26s
Repeats
No
Easing
ease-out
Animates
Scale · Opacity scale opacity
Show CSS
@keyframes onoma-pachin {
  0% { transform: scale(1, 1); opacity: 1; }
  35% { transform: scale(1.2, 1.2); opacity: 1; }
  100% { transform: scale(1.4, 1.4); opacity: 0; }
}

.onoma-pachin {
  animation: onoma-pachin 0.26s ease-out both;
}

/* Reduced motion: only fade out */
@keyframes onoma-pachin-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-pachin { animation: onoma-pachin-fade 0.2s ease-out both; }
}
Try with my objectUse the code

Clasp snaps shut

Lock in a setting

Twists 6° and tightens for an instant, then clicks back.

Duration
0.28s
Repeats
No
Easing
ease-out
Animates
Rotation · Scale rotate scale
Show CSS
@keyframes onoma-pachin-2 {
  0% { transform: rotate(0deg) scale(1, 1); }
  20% { transform: rotate(6deg) scale(0.94, 0.94); }
  45% { transform: rotate(-1.8deg) scale(1.02, 1.02); }
  70% { transform: rotate(0.6deg) scale(1, 1); }
  100% { transform: rotate(0deg) scale(1, 1); }
}

.onoma-pachin-2 {
  animation: onoma-pachin-2 0.28s ease-out both;
}

/* Reduced motion: no motion */
@media (prefers-reduced-motion: reduce) {
  .onoma-pachin-2 { animation: none; }
}
Try with my objectUse the code

Compare with similar motions

pachinBubble pops
kiraGlint for an instant
shupoPop out like a cork

Words for the same motion

ぱっちん