EFFECT PLUGINS / 背景エフェクト
GridEffect（lines）
細い格子線が動くグリッドパターンエフェクト。テクニカル・ミニマル・エンジニアリング系のデザインに。
概要
等間隔のグリッド線（格子状）が静かに動くエフェクトです。テクノロジー・ゲーム・データ可視化系のページのベーストーンとして使いやすい、主張を抑えた背景エフェクトです。--grid-color でグリッド線の色と透明度を細かく調整できます。
CSS カスタム変数
| 変数名 | デフォルト | 説明 |
|---|---|---|
--grid-size |
60 |
グリッド間隔（px） |
--grid-color |
rgba(100, 140, 200, 0.15) |
グリッド線の色（CSS color値） |
使用例
セクションへの適用
sections:
- type: hero
title: "タイトル"
effects:
- GridEffect
ページ全体への適用
---
layout: layouts/base.njk
effects:
- GridEffect
---
CSS 変数での調整
:root {
--grid-size: 40;
--grid-color: rgba(0, 200, 100, 0.12); /* グリーン系グリッド */
}