until coffee cools

ホーム画面をリッチにしたい！ということで手書き風アニメーションを実現する方法を調べて実装しました。

1. Figmaでテキストを入力

Figmaでアニメーション表示したいテキストを入力し、好みのフォントを選択します。

2. pencil機能でなぞる

今回利用するライブラリのVivus.jsはpath要素に対して線描画アニメーションを行われます。そのため画面下部のメニューバーからpencilを選択し、テキストをなぞって1本のpath要素を作成します。

残念ながら私はペンタブを持っていないので、同僚のデザイナーさんに頼んで書いてもらいました。ありがとうございます。

書き終わったらSVG形式でエクスポートします。

3. 自分の好みに合わせてカスタマイズ

エディタでpath要素を編集します。簡単な意味の説明と私の設定値を記載します。

属性名	意味	設定値
`stroke`	色	#FAF0E6
`strokeWidth`	太さ	6
`strokeLinecap`	始点と終点の形状	round
`strokeLinejoin`	角の部分の形状	round
`fill`	塗りつぶし（Vivusでは使わない）	none
`shapeRendering`	レンダリングの形状	geometricPrecision

4. Vivus.jsをインストール

ルートディレクトリで以下のコマンドを実行します。

npm install vivus

5. SVG描画を担当するコンポーネントを作成

外部ファイル読み込みを減らすため、コンポーネントを作成してこの中に埋め込みます。

'use client';
import { useEffect, useRef } from "react";
import Vivus from 'vivus';

export const HomeSvg = () => {
    const svgRef = useRef(null);

    useEffect(() => {
        if (svgRef.current) {
            new Vivus(svgRef.current, {
                type: 'oneByOne', // 一本線の時は不要。複数pathがある場合は上から順番に描画される
                duration: 600, // アニメーション時間
                animTimingFunction: Vivus.EASE, // 描画スピード。開始：ゆっくり　中間：速い　終了：ゆっくり
            });
        }
    }, []);

    return (
        <svg
            ref={svgRef}
            width="200"
            height="90"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                d="長くなるので省略。step2でエクスポートしたSVGファイルのd属性。"
                stroke="#FAF0E6"
                strokeWidth="6"
                strokeLinecap="round"
                strokeLinejoin="round"
                fill="none"
                shapeRendering="geometricPrecision"
            />
        </svg>
    );
};

6. 描画したい画面で呼び出す

あとはapp/page.tsxでコンポーネントを呼び出すだけです。

    <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
        <HomeSvg />
    </div>

7. まとめ

動きがあるだけでリッチに見えますね💰