不満はシュレッダーにかけて忘れよう！というアプリを作ってみた

1. イライラしたらどうしてますか？

みなさんイライラしたり、嫌なことがあったときどうしてますか？
私は、いっぱいご飯を食べたり、甘い物を食べたり、だいたい食に走ります。

アンガーマネジメントには色々な方法があると思いますが、
「嫌なことは紙に書くとスッキリする」という話を聞いたことがありました。

それならいっそ、書いた不満をシュレッダーにかけてしまえばいいのでは？と思い、
不満を紙に書いてシュレッダーにかけるアプリを作ってみました。

2. できたもの

アプリはこちらです！ぜひ使ってみてください！

機能は単純で以下の3点です。

• 何があったかを書く
• なぜ嫌だったかを書く
• シュレッダーにかける

ちゃんと不満を書いた紙がシュレッダーにかけられる様子が見れるのでスッキリします!

3. 技術的ポイント

簡単にシュレッダーのアニメーション実装方法を書きたいと思います。

3.1. 紙が落ちていく様子

• setIntervalで Y方向に少しずつ移動
• transform: translateY()を使うことで滑らかな動き

let position = 0;

const moveInterval = setInterval(() => {
  position += 2;
  fallingPaper.style.transform = `translateY(${position}px)`;

  if (position >= 120) {
    clearInterval(moveInterval);
  }
}, 18);

3.2. 紙が消えていく様子

• clip-path: inset()を使って表示領域を下から削る
• 実際に切っているような錯覚を作れる

if (position > 30) {
  const clipPercent = Math.min((position - 30) * 1.1, 100);
  fallingPaper.style.clipPath = `inset(0 0 ${clipPercent}% 0)`;
}

3.3. 紙くずが落ちる様子

• 複数のdivを動的生成
• 回転＋落下＋フェードアウトを組み合わせ
• ランダム値で「毎回違う崩れ方」を演出

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(130px) rotate(720deg);
    opacity: 0;
  }
}

particle.style.animation =
  `fall ${0.8 + Math.random() * 0.6}s ease-in ${Math.random() * 0.5}s forwards`;

4. まとめ

今回は結構実用的なものができたのではと思っています。
シュレッダーにかけられる様子が気持ちいいです。

もしよければイライラしたときに使ってみてください！