概要
Webサイトに美しいグラデーションやアニメーションエフェクトを追加したいと思ったことはありませんか？
WebGLやシェーダーを使えば実現できますが、GLSLを一から学んで実装するのはハードルが高いです。
そんな時に便利なのがPaper Shadersです。
このライブラリを使えば複雑なシェーダーエフェクトを簡単に実装できます。
Paper Shadersとは
Paper Shadersは、もともとPaperというデザインツールの一部として開発されたシェーダー機能を、独立したライブラリとして切り出したものです。
Paper Shadersは、ゼロ依存で高速なシェーダーライブラリです。
主な特徴は以下の通りです。
- 外部ライブラリへの依存がない
- ReactまたはVanilla JavaScriptで使用可能
- 多彩なエフェクト（2025年11月現在 27種類）
- ウィンドウリサイズ時のcanvasリサイズなど、地味に面倒な処理も自動で対応
通常、WebGLでグラフィックを描画する場合、canvas要素の初期化やリサイズ処理など、実装すべき細かい処理が多数あります。
以下は筆者が以前書いたWebGLの基礎実装に関する記事ですが、これらの面倒な処理をPaper Shadersが全て引き受けてくれます。
どんなエフェクトが使えるのか
Paper Shadersでは大きく分けて3つのカテゴリのエフェクトが提供されています。
1. 画像フィルター
- Paper Texture
- Fluted Glass
- Water
- Image Dithering
- Halftone Dots
2. ロゴアニメーション
- Heatmap
- Liquid Metal
3. 背景エフェクト
- Mesh Gradient
- Dot Orbit
- Dot Grid
- Warp、Spiral、Swirl、Waves
- 各種ノイズ
- などなど
すべてのエフェクトは公式サイトでプレビューを確認できます。
インストール方法
プロジェクトの種類に応じてパッケージを選択します。
# React向け
npm i @paper-design/shaders-react
# Vanilla JavaScript向け
npm i @paper-design/shaders
このライブラリは現在バージョン1に達しておらず、破壊的変更が提供される可能性があります。
バージョンを固定することが公式から推奨されています。
基本的な使い方
Reactでの実装例
使い勝手の良さそうなMesh Gradientエフェクトを実装してみましょう。
import { MeshGradient } from '@paper-design/shaders-react'
function App() {
return (
<MeshGradient
colors={['#5100ff', '#00ff80', '#ffcc00', '#ea00ff']}
distortion={1}
swirl={0.8}
speed={0.2}
style={{ width: '100vw', height: '100vh' }}
/>
)
}
実際の見た目は次のようになります。
colorsやdistortionなどに好きな値を入れて見た目を変えることができます。
エフェクトによって変えられる値は様々ですが、公式ドキュメントにて詳しく説明されているので迷うこともないかと思います。
例に挙げたMesh Gradientでいえばこちらのページで詳細を見られます。
ビジュアルエディタもついているので、感覚的な調整が可能です。
実装時の考慮
シェーダーは基本的にGPUで処理されるため高速ですが、以下のような点に注意しましょう。
- 複数のシェーダーを同時に表示する場合は、GPUの負荷を考慮する
- モバイルデバイスではパラメータを控えめに設定する
-
speed={0}にすることで静止画として使用し、負荷を最小化する - シェーダーを複数重ねて表現することはできない
Paper Shadersでは1つのシェーダーエフェクトのみを表示する設計となっています。
複数のシェーダーを重ねたい場合は、unicorn.studioなど別のツールを検討する必要があります。
ライセンスについて
Paper ShadersはPolyForm Shield licenseで提供されています。
主なポイントは以下の通りです。
- 商用・非商用利用が可能
- Paper製品やPaper Shadersと競合するサービスでの使用は禁止
詳細はライセンス全文を確認してください。
まとめ
Paper Shadersを使えば、WebGLやGLSLの深い知識がなくても、綺麗な見た目のシェーダーエフェクトを簡単に実装できます。
主な利点
- npmでインストールするだけで使える手軽さ
- 外部ライブラリへの依存がない
- ReactまたはVanilla JavaScriptで使用可能
- 多彩なエフェクト（2025年11月現在 27種類）
- ビジュアルエディタでパラメータを調整可能
Webサイトの背景やヒーローセクション、ローディング画面などに活用して、ユーザー体験を向上させましょう！