Vue BitsでVueアプリにリッチなアニメーションを導入する

はじめに

Vueでサイトを作っていると、「もう少しインパクトが欲しいな」と思うことがあります。

個人的には、Reactで使えるアニメーションライブラリがVueにないことにモヤモヤしていました。特に React Bits という3万スター超えのライブラリを見て「Vueでも同じようなの欲しいな」と思っていたんですよ。

そんな中で見つけたのが Vue Bits です。これ、React Bitsの公式Vue移植版なんですよね。同じDavid Haz氏がメンテナンスしていて、すでにGitHubスターが3,300を超えています。

Vue Bitsとは

Vue Bitsは、アニメーション付きのVueコンポーネントを90以上収録したオープンソースのライブラリです。MIT + Commons Clauseライセンスで提供されていて、毎週新しいコンポーネントが追加されています。

公式サイト: https://vue-bits.dev

コンポーネントは大きく4つのカテゴリに分かれています。

テキストアニメーション: タイピングエフェクト、グリッチ効果、スプリットテキストなど
アニメーション: フェードイン、スライド、パララックスなど
コンポーネント: インタラクティブなUIパーツ
背景: パーティクル、グラデーション、幾何学模様など

特徴・メリット

React Bitsとの互換性

React Bitsで気に入ったコンポーネントがあれば、Vue Bitsでもほぼ同じものが使えます。プロジェクトによってReactとVueを使い分けている人には、これが地味に嬉しいポイントです。

最小限の依存関係

重たいライブラリを入れるとバンドルサイズが膨らんで困ることがあります。Vue Bitsは最小限の依存関係で設計されていて、モダンなVue/Nuxtプロジェクトにシームレスに統合できます。

高いカスタマイズ性

propsを通じてかなり細かくカスタマイズできます。ソースコード自体もコピーして使う形式なので、必要に応じて自分で改造することも可能です。

毎週アップデート

これ、意外と重要なんですよね。90以上のコンポーネントが収録されていますが、毎週新しいコンポーネントが追加されています。コミュニティも活発で、コントリビューターは20人以上います。

インストール方法

Vue Bitsは jsrepo というCLIツールを使ってインストールします。npmから直接入れる形式ではないのがちょっと独特ですね。

jsrepoを使ったインストール

まず、jsrepoをインストールします。

npm install -g jsrepo

次に、使いたいコンポーネントを追加します。

npx jsrepo add github/DavidHDev/vue-bits/TextAnimations/SplitText

コンポーネントごとにコマンドを実行する形式です。使いたいものだけ入れられるので、バンドルサイズを抑えられます。

詳細なセットアップ手順は、各コンポーネントのドキュメントページに記載されています。

基本的な使い方

インストールしたコンポーネントは、通常のVueコンポーネントとして使えます。

テキストアニメーションの例

<template>
  <div class="hero-section">
    <SplitText
      text="Welcome to my portfolio"
      :delay="50"
      :animation-from="{ opacity: 0, y: 40 }"
      :animation-to="{ opacity: 1, y: 0 }"
    />
  </div>
</template>

<script setup lang="ts">
import SplitText from '@/components/ui/SplitText.vue';
</script>

背景エフェクトの例

<template>
  <div class="relative min-h-screen">
    <Particles
      class="absolute inset-0"
      :quantity="100"
      color="#ffffff"
    />
    <div class="relative z-10">
      <!-- コンテンツ -->
    </div>
  </div>
</template>

<script setup lang="ts">
import Particles from '@/components/ui/Particles.vue';
</script>

propsで細かく調整できるので、サイトのトンマナに合わせやすいです。