Interaction Test | @ak2lab/engine Sandbox

effect-cursor-magnetic

カスタムカーソル + 磁力エフェクト

data-cursor-area を付与したセクション内でのみカスタムカーソルが有効になります。
data-magnetic を付与した要素はカーソルに向かって吸い付きます。

← このエリア内でカーソルが変化します

上のエリア外ではカーソルは通常に戻ります。

属性	対象	説明
data-cursor-area	セクション／コンテナ要素	このエリア内でカスタムカーソルを有効化
data-magnetic	任意のインライン要素	カーソルに吸い付く磁力エフェクトを付与

layout-hero-particle

テキストをパーティクル化して表示するヒーローセクション。
マウスを近づけると粒子が反発し、離れると元の形に戻ります。
上部の「INTERACTION」テキストがこのプラグインのデモです。

パラメーター	型	デフォルト	説明
text	string	—	パーティクル化するテキスト（必須）
subtitle	string	""	上部の小見出し英字テキスト
color	string	""	パーティクル色（空欄で --color-primary を使用）
fontSize	string	"15vw"	テキストサイズ（vw / px / em 可）
fontWeight	string	"700"	フォントウェイト
fontFamily	string	""	フォントファミリー（省略で CSS 継承）
height	string	"100vh"	セクション高さ
bg	string	"#0b0b0f"	背景色
id	string	"main"	同一ページに複数配置する場合に一意な値を指定

block-card-kinetic

ホバーすると 3D ティルト、グレア（光の反射）、パララックス画像が動作します。
dark パラメーターでダークテーマにも対応。

複雑な状態管理をシンプルなクラスにカプセル化し、堅牢で拡張性の高いフロントエンド基盤を構築します。

物理演算に基づいた自然なイージングと、残像効果を用いた視覚的なフィードバックを実装します。

不要な DOM 操作を避け、Canvas を活用した GPU アクセラレーションで 60fps の体験を提供します。

パラメーター	型	デフォルト	説明
title	string	—	カードタイトル（必須）
img	string	""	画像 URL（省略時は画像なし）
imgAlt	string	title と同値	画像 alt テキスト
link	string	""	クリック先 URL（省略時はリンクなし）
linkText	string	"詳しく見る →"	リンクテキスト
dark	boolean	false	ダークテーマ

block-button-wave

クリックすると波形 SVG が画面を覆い、href へ遷移します。
href が # の場合はアニメーションのみ再生してリセットします（デモ用）。

パラメーター	型	デフォルト	説明
text	string	—	ボタンラベル（必須）
href	string	"#"	遷移先 URL（"#" でデモモード）
color	string	"var(--color-primary)"	ウェーブの色
textColor	string	"var(--color-primary)"	ボタンテキスト色