✴️
【Reactbits】ShinyTextコンポーネントの実装ガイド
ShinyTextコンポーネントの実装ガイド
概要
ShinyTextは、テキストに光沢のあるアニメーション効果を追加するReactコンポーネントです。グラデーションが左から右に流れるように動き、テキストに輝きを与えます。
完成イメージ
プロジェクト構成
シンプルなNext.jsプロジェクトでの実装例を紹介します。
my-app/
├── src/
│ ├── components/
│ │ └── ShinyText/
│ │ ├── ShinyText.tsx
│ │ └── index.ts
│ ├── pages/
│ │ └── index.tsx
│ └── styles/
│ └── globals.css
├── package.json
└── tsconfig.json
実装手順
1. ShinyTextコンポーネントの作成
// src/components/ShinyText/ShinyText.tsx
import React from 'react';
interface ShinyTextProps {
text: string;
disabled?: boolean;
speed?: number;
className?: string;
}
const ShinyText: React.FC<ShinyTextProps> = ({
text,
disabled = false,
speed = 5,
className = ''
}) => {
const animationDuration = `${speed}s`;
return (
<div
className={`bg-clip-text inline-block ${disabled ? '' : 'animate-shine'} ${className}`}
style={{
backgroundImage: 'linear-gradient(120deg, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.4) 60%)',
backgroundSize: '200% 100%',
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
WebkitTextFillColor: 'transparent',
color: 'transparent',
animationDuration: animationDuration,
}}
>
{text}
</div>
);
};
export default ShinyText;
2. エクスポート用のインデックスファイル
// src/components/ShinyText/index.ts
export { default as ShinyText } from './ShinyText';
3. CSSアニメーションの定義
/* src/styles/globals.css に追加 */
@keyframes shine {
0% {
background-position: 100%;
}
100% {
background-position: -100%;
}
}
.animate-shine {
animation: shine 3s linear infinite;
}
4. 使用例 - ホームページでの実装
// src/pages/index.tsx
import React from 'react';
import { ShinyText } from '../components/ShinyText';
const techStack = ['React', 'TypeScript', 'Next.js', 'Tailwind CSS'];
export default function HomePage() {
return (
<div className="min-h-screen bg-black p-8">
<h1 className="text-4xl font-bold text-white text-center mb-8">
My Tech Stack
</h1>
{/* シンプルな使用例 */}
<div className="text-center mb-12">
<ShinyText text="Welcome to my portfolio!" speed={2} />
</div>
{/* 技術スタックの表示 */}
<div className="flex flex-wrap justify-center gap-3">
{techStack.map((tech) => (
<span
key={tech}
className="px-4 py-2 bg-gray-800 rounded-full border border-gray-600"
>
<ShinyText text={tech} speed={3} />
</span>
))}
</div>
</div>
);
}
技術的なポイント
1. グラデーションとテキストクリッピング
background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.4) 60%);
background-clip: text;
-webkit-background-clip: text;
- グラデーションをテキストの形にクリップすることで、文字の部分だけにグラデーションを表示
2. テキストの透明化
color: transparent;
-webkit-text-fill-color: transparent;
- テキスト自体を透明にして、背景のグラデーションが見えるようにする
3. アニメーション制御
background-size: 200% 100%;
animation: shine 3s linear infinite;
- 背景サイズを200%にして、アニメーションで位置を動かすことで流れる効果を実現
4. カスタマイズ可能なプロパティ
-
text: 表示するテキスト -
disabled: アニメーションの有効/無効 -
speed: アニメーション速度（秒） -
className: 追加のCSSクラス
トラブルシューティング
よくある問題と解決方法
-
テキストが表示されない
-
color: transparentと-webkit-text-fill-color: transparentが正しく設定されているか確認 - グラデーションの透明度が高すぎないか確認
-
-
アニメーションが動かない
-
@keyframes shineがCSSに定義されているか確認 -
.animate-shineクラスが正しく適用されているか確認
-
-
グラデーションが見えない
-
background-clip: textが適用されているか確認 - 親要素の
overflow: hiddenが効果を妨げていないか確認
-
プロジェクトのセットアップ
1. Next.jsプロジェクトの作成
npx create-next-app@latest my-shiny-text-app --typescript --tailwind
cd my-shiny-text-app
2. 必要なディレクトリの作成
mkdir -p src/components/ShinyText
3. package.jsonの設定例
{
"name": "my-shiny-text-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "14.0.0",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10",
"postcss": "^8",
"tailwindcss": "^3",
"typescript": "^5"
}
}
参考リソース：Reactbits
Reactbitsは、Reactの様々なUIコンポーネントやアニメーション効果の実装例を学べる学習リソースです。ShinyTextのようなエフェクトも含め、モダンなUIパターンのコードサンプルが豊富に掲載されています。
Reactbitsの特徴
- 学習向けコンテンツ: 実装の仕組みを理解できるようにコードが公開されている
- 多様なコンポーネント例: ShinyText以外にも、様々なアニメーション効果の実装例が見られる
- コピー&ペースト可能: コードをそのままプロジェクトに組み込んで使える
- 実装の理解: どのように動作するのか、コードを見ながら学習できる
Reactbitsから学べること
- CSSアニメーションの効果的な使い方
- Reactコンポーネントの設計パターン
- インタラクティブなUIの実装テクニック
- パフォーマンスを考慮したアニメーション実装
このような学習リソースを参考にしながら、自分のプロジェクトに合わせてカスタマイズしていくことで、より深い理解と実践的なスキルが身につきます。
まとめ
ShinyTextコンポーネントは、シンプルながら効果的なビジュアルエフェクトを提供します。このガイドで紹介したシンプルなディレクトリ構成なら、すぐに実装を始められます。
実装のポイント
- シンプルな構成: componentsフォルダに集約して管理しやすく
- 再利用性: propsで柔軟にカスタマイズ可能
- パフォーマンス: CSSアニメーションで軽量な実装
このコンポーネントを基に、さらに複雑なアニメーション効果を追加したり、他のUIコンポーネントと組み合わせたりすることで、より魅力的なユーザーインターフェースを構築できます。Reactbitsのような学習リソースを活用しながら、様々なUIパターンを学び、自分のプロジェクトに最適な実装を行いましょう。
Discussion