frontend-atlas

Frontend Atlas

プレミアムなフロントエンドを実装するためのレイヤーです。兄弟スキルは、何を、どう選ぶかを判断します（taste-skill のアンチスロップルール、impeccable の批評／監査／仕上げ、soft-skill、minimalist-skill、brutalist-skill）。このスキルが扱うのは実装方法です。2026年の最高峰のサイトで使われているモーション、スクロール、タイポグラフィ、ホバー、トランジション、背景、シェーダー、コンポーネントのエフェクトについて、検証済みですぐにコピーして使えるレシピを提供します。さらに、適切なものを選び、しっくりくるまで調整するための判断力も備えています。

2026-09-27 に、gsap 3.15（すべてのプラグインが無料、新しい SplitText）、@gsap/react 2.1、 motion 13.4（motion/react）、lenis 1.3（lenis/react）、three r186、@react-three/fiber 9.8、 drei 10.7、animejs 4.5、tailwindcss 4.3、next 16.3、react 19.3 で検証済みです。すべての TS/TSX レシピはこれらのパッケージで型チェック済みです。主要なレシピは Chromium で実行し、以下のスクリプトで監査済みです。プロジェクトのルールがこのファイルより優先されます（「GSAP のみ」のプロジェクトでは、GSAP のみを使用します）。

使い方

1. コードを書く前に、以下の デザインの読み取り を作成します。5行以内にしてください。
2. エフェクトを探します。以下の候補一覧を確認するか、references/INDEX.md で検索します（すべてのレシピとそのアンカーが記載されています）。
3. 必要なセクションだけを開きます。リファレンスファイルは長いため（700～3000行）、複数の選択肢を比較する場合を除き、ファイル全体を読み込まないでください（その場合は、まずそのファイルの「選択ガイド」テーブルを確認してください）。
4. レシピをコピーし、選んだモーションの個性に合わせて 調整 の値を変更します。
5. scripts/motion-audit.mjs を使い、実際のブラウザーで検証します（「検証」を参照）。実際に動作を見ていなければ、完了ではありません。

リファレンスマップ

ファイル	開くタイミング
references/INDEX.md	エフェクトを名前で検索するとき（ファイル別に分類された474項目）。
references/motion-principles.md	イージング、継続時間、スプリング、スタッガー、振り付け、7種類のモーションパーソナリティプリセット。アニメーションを多用するビルドの前に読んでください。
references/scroll-gsap.md	Lenis のスムーズスクロール、ScrollTrigger による表示、ピン留め、スクラブ、横スクロールギャラリー、積み重ねカード、スクロール時の SplitText、画像シーケンス、動画スクラブ、Flip、Observer スライド、更新の管理。
references/scroll-css-native.md	JavaScript を使わないスクロールエフェクト：animation-timeline: scroll()/view()、プログレスバー、表示エフェクト、視差効果、CSS カルーセル、scroll-state() クエリ、フォールバック、ネイティブと GSAP の使い分け。
references/css-modern.md	@starting-style、dialog/popover、アンカーポジショニング、interpolate-size、@property、コンテナ／スタイルクエリ、:has()、OKLCH、text-wrap、sibling-index()、corner-shape、カスタマイズ可能な select、Tailwind v4 の対応付け、サポート状況一覧。
references/text-effects.md	分割テキストの表示エフェクト、スクランブル、タイプライター、単語の切り替え、テキストロール、可変フォントのアニメーション、マーキー、カウンター、グラデーション／シマー文字、パス上のテキスト、幅を調整したワードマーク、キネティックイントロ。
references/typography.md	文字サイズのスケール、流動的な文字サイズ、字間／行送り、OpenType、出典とライセンス付きの27種類のフォントペア、CLS を起こさない読み込み、エディトリアルな文字レイアウト。
references/interactions.md	カスタムカーソル、磁石効果、ホバー時の表示、画像トレイル、ボタン／リンクのホバー、傾き、スポットライトカード、タブインジケーター、アコーディオン、ポップオーバー、トースト、ドロワー、ドック、ドラッグ、マイクロフィードバック、操作感の調整表。
references/page-transitions.md	View Transitions（同一ドキュメント、ドキュメント間）、Next 16 の React <ViewTransition>、共有要素、GSAP オーバーレイトランジション、Swup/Barba/Astro、プリローダー、イントロの表示制御、フルスクリーンメニュー、ルートの管理。
references/backgrounds-svg-canvas.md	メッシュ／オーロラ／粒子／グリッド背景、円錐グラデーションの境界線、SVG の描画／モーフィング／グー／ディスプレイスメント、Canvas のパーティクル／ドットグリッド／フローフィールド、Lottie と Rive の比較。
references/webgl-shaders-3d.md	WebGL のローディングシェル、シェーダーライブラリ（GLSL）、画像の歪み、DOM から WebGL へのギャラリー、流体カーソル、パーティクル、R3F のガラス風ヒーロー、球体、ポストプロセッシング、Paper Shaders、WebGPU/TSL。
references/component-recipes.md	67種類の名前付きコンポーネント（21st.dev、Aceternity、Magic UI、React Bits、Motion Primitives、Cult UI など）：インストールコマンド、自分で所有するコード、使いすぎの評価、セクションの組み合わせ。
references/color-surfaces.md	OKLCH の色段階、セマンティックトークン、コントラスト（WCAG/APCA）、ダークモード、グラデーション、ガラス／リキッドガラス、シャドウ、境界線、角丸、画像の処理。
references/layout-composition.md	ブレイクアウトグリッド、12列／サブグリッド、流動的な余白、10種類のヒーロー骨格、ベントー、セクションパターン、スティッキー／オーバーラップレイアウト、ナビゲーション、レスポンシブ戦略。
references/aesthetic-directions.md	30種類のビジュアル表現から選択または実現するとき。各表現にトークン、フォント、モーションの特徴、実際の参考サイト、AI 生成らしさの見分け方を掲載。
references/libraries.md	37種類のライブラリから選択／セットアップするとき：サイズ、インストール、SSR に関する注意点、ステータス、プロジェクトの種類ごとの推奨スタック。
references/performance-a11y.md	アニメーションを含むものをリリースする前に：プロパティのコスト、カクつきのデバッグ、画面外の処理の一時停止、ピン留めによる CLS、適切なモーション低減、WCAG のモーション基準、QA チェックリスト。
references/inspiration-sources.md	参考例、コンポーネント、フォント、アイコン、アセット、ツールを探すとき、または公開サイトで見たエフェクトをリバースエンジニアリングするとき。

エフェクト一覧（リクエストの多いもの）

効果	場所
スムーズスクロール（GSAP ティッカー上の Lenis）	scroll-gsap.md#1-setup-and-lenis-sync
スクロール時の表示、JS 不要	scroll-css-native.md#5-reveal-on-enter-fade--slide--clip--blur
カードを段階的に表示	scroll-gsap.md#3-batch-reveal-on-enter
見出しの行マスク表示	text-effects.md#1-line-mask-reveal-splittext-mask-lines
キネティックなヒーローイントロのタイムライン	text-effects.md#27-kinetic-headline-intro-sequence, motion-principles.md#9-orchestrating-a-hero-intro-gsap-motion-css
固定ヒーローのズーム／クリップ拡張	scroll-gsap.md#6-pinned-hero-zoom-and-clip-expansion
固定された複数ステップのストーリー	scroll-gsap.md#7-pinned-multi-step-timeline-with-label-snap
横スクロールギャラリー	scroll-gsap.md#8-horizontal-scroll-gallery, CSS: scroll-css-native.md#10-horizontal-scroll-section-sticky--view-timeline
積み重なるカード	scroll-gsap.md#9-stacked-cards, CSS: scroll-css-native.md#11-stacking-cards
固定分割レイアウトのスクロールテリング	scroll-gsap.md#10-sticky-split-layout
パララックス	scroll-css-native.md#6-parallax-layers, scroll-gsap.md#11-parallax-layers
スクロールに合わせて単語が光る	scroll-gsap.md#5-text-fills-as-you-scroll, scroll-css-native.md#12-text-fill--word-by-word-highlight-on-scroll
スクロール速度に応じた傾斜／マーキー	scroll-gsap.md#13-scroll-velocity-skew-and-marquee
Apple 風画像シーケンス／動画スクラブ	scroll-gsap.md#17-scroll-scrubbed-video-and-image-sequence
全画面スライドセクション	scroll-gsap.md#15-observer-full-screen-slides
読書進捗、スクロール時に縮小する固定ヘッダー	scroll-css-native.md#4-reading-progress-bar-page-and-per-article, #8-sticky-header-compact--frosted-on-scroll
テキストのスクランブル／復号	text-effects.md#6-scramble--decode--decrypted-text
単語の回転、ホバー時のテキストロール	text-effects.md#8-rotating-words-height-masked-slot, #9-text-roll-on-hover
カーソル近接による可変フォント	text-effects.md#12-cursor-proximity-variable-type
幅に合わせた巨大なフッターワードマーク	text-effects.md#14-fit-text-to-width-giant-wordmark-footer
マーキー（CSS／速度連動）	text-effects.md#22-css-only-infinite-marquee, #23-velocity-reactive-marquee
数値カウンター	text-effects.md#24-number-animation
フォントの組み合わせ	typography.md#9-font-pairing-playbook-2026
カスタムカーソル、マグネットボタン	interactions.md#1-custom-cursor-with-trailing-ring, #2-magnetic-elements
ホバー時に画像を表示するリスト、画像トレイル	interactions.md#3-hover-image-reveal-and-image-trail
ボタンのホバー／押下システム	interactions.md#4-button-hover-and-press-system
スポットライトグローカードグリッド	interactions.md#7-spotlight-glow-card-grid
タブのスライドインジケーター	interactions.md#8-tabs-indicator-and-nav-hover-highlight
マイクロインタラクションキット（長押し、コピー、いいね、切り替え）	interactions.md#13-micro-interaction-kit
Next 16 のネイティブなルート遷移	page-transitions.md#4-react-193-viewtransition--next-16-routes
リストから詳細への共有要素	page-transitions.md#5-shared-element-list-detail-3-ways
カーテン／オーバーレイによるルート遷移	page-transitions.md#7-gsap-overlay-route-transitions-the-awwwards-default
クリック位置から広がる円形テーマ切り替え	page-transitions.md#10-circle-reveal-from-the-click-point-theme-toggle--routes
プリローダー＋開始を制御したヒーローイントロ	page-transitions.md#18-counter-0-100--curtain-skipped-on-repeat-visits, #19-intro-gate-store-hero-waits-for-preloader
全画面メニュー、スクロール時に隠れるナビゲーション	page-transitions.md#23-fullscreen-menu-overlay, #24-nav-hide-on-scroll-down--show-on-up
CSS によるダイアログ／ポップオーバーの表示・非表示	css-modern.md#1-enterexit-from-displaynone-starting-style--allow-discrete
メッシュグラデーション、オーロラ、グレイン	backgrounds-svg-canvas.md#1-layered-radial-mesh-gradient, #2-aurora-blobs, #3-grain-noise-overlay
ボーダービーム／回転する円錐グラデーションの境界線	backgrounds-svg-canvas.md#8-border-beam-along-the-edge, #7-animated-conic-border
SVG の線描画、モーフィング	backgrounds-svg-canvas.md#14-stroke-drawing, #15-shape-morphing
インタラクティブなドットグリッド、星座	backgrounds-svg-canvas.md#29-interactive-spring-dot-grid, #27-constellation-network
シェーダーグラデーション背景	webgl-shaders-3d.md#1-gatekeeping-and-loading-shell-next-16 + #3-shader-library-glsl
WebGL の画像ホバー／ギャラリー	webgl-shaders-3d.md#4-image-effects-and-dom-to-webgl
流体カーソル、パーティクルのモーフィング	webgl-shaders-3d.md#5-cursor-fluid-simulation, #6-particles-morphing-points-mouse-repulsion-gpgpu
3D ガラスのヒーロー（R3F）	webgl-shaders-3d.md#7-r3f-hero-scene-glass-environment-gltf-scroll-camera-3d-text
地球儀	component-recipes.md#14-globe-cobe, webgl-shaders-3d.md#8-globes-cobe-three-globe-custom
Bento グリッド	layout-composition.md#7-bento-grids-done-right, component-recipes.md#43-bento-grid
実証済みのセクションの組み合わせ	component-recipes.md#recipe-combos
ヒーローレイアウト	layout-composition.md#6-hero-paradigms-10-skeletons
1 色のブランドカラーからパレットを作成	color-surfaces.md#2-12-step-ramp-generator-ts-gamut-aware
ダークモード、テーマのフラッシュなし	color-surfaces.md#10-dark-mode-done-right, #11-theme-switch-without-fouc
ガラス／リキッドガラス	color-surfaces.md#15-glassmorphism-done-right, #16-liquid-glass-approximations-tiered
ビジュアルの方向性を選ぶ	aesthetic-directions.md#decision-guide---choosing-a-direction-from-a-brief

デザインの読み取り（必ず最初に行う）

Direction:           <one entry from aesthetic-directions.md, or a named blend of two>
Motion personality:  <preset from motion-principles.md#21-motion-personality-presets>
Signature moment:    <the ONE effect a visitor will remember, and where it lives>
Supporting layer:    <one reveal system + hover/press/focus feedback + transitions>
Stack:               <CSS-native | Motion | GSAP+Lenis | +OGL/R3F> because <reason>

依頼が曖昧（「高級感を出して」など）な場合は、製品、対象ユーザー、既存のブランドから意図を推測し、その読み取りを伝えてから進めます。まったく異なる方向性が同程度に妥当な場合に限り、質問してください。

技術スタックの選択

表現したい効果を実現できる、最も軽量なツールを選びます。

1. CSS のみ：ホバー／押下／フォーカス、ポップオーバー／ダイアログの表示・終了（@starting-style）、アコーディオン、表示時のリビール、プログレスバー（スクロール駆動アニメーションをフォールバック付きで使用）、マーキー、グラデーション／コニックグラデーションのアニメーション（@property）。JS 不要で、メインスレッドを使いません。
2. Motion（motion/react）：React アプリの UI。レイアウトアニメーション、共有要素の layoutId、表示／終了、ジェスチャーとドラッグ、スプリング、並べ替え可能なリスト。
3. GSAP + ScrollTrigger + Lenis：スクロールを使ったストーリーテリングやタイムライン。ピン留め、スクラブによる複数ステップのシーケンス、横方向のセクション、SplitText、Flip、DrawSVG／MorphSVG、イントロシーケンス。
4. WebGL（2D シェーダー効果には OGL、シーンには R3F）：コンセプトに必要な場合に限ります。必ずローディングシェルを通じて静的なポスター画像をフォールバックとして配信します（webgl recipe 1）。

Motion と GSAP は、用途を分ければ同じプロジェクト内で併用できますが、同じ要素には使いません。 スムーズスクロールのインスタンスは 1 つ、RAF ループも 1 つにします（GSAP がある場合は、gsap.ticker から Lenis を動かします）。

コードに影響するプラットフォームの仕様（2026-09-27 検証済み）

• CSS スクロール駆動アニメーション：Chrome 115+、Safari 26+、Firefox は 159 から（2026-10-27 リリース予定）。Baseline ではないため、必ず @supports (animation-timeline: view()) とフォールバックを用意してください。
• View Transitions：同一ドキュメント内ではすべてのエンジンで利用可能（Firefox 144+）。ドキュメント間では Firefox で利用できません。React 19.3 では <ViewTransition>／addTransitionType が安定版としてエクスポートされます。Next 16.3 ではフラグは不要です。
• GSAP のデフォルトの pin: true は CLS を引き起こします：Chromium で、100vh のセクションあたりピン留め時に 0.75、解除時に 1.0 を測定しました（スクロールは除外対象の入力ではありません）。CSS の position: sticky とスクラブ、および pinType: "transform" はどちらも 0 でした。レイアウトが許す場合は sticky トラックを優先してください。
• ページ上の順序とは異なる順番で作成された ScrollTrigger（遅延読み込みされるセクション、useGSAP の dependencies 内にある useLenis() の値）は、ピン留めの長さ分だけ早く発火します。refreshPriority が高いものから先に更新され、refreshPriority を指定するとページ上の位置による自動ソートが有効になります。（公式の gsap-scrolltrigger skill の説明は逆になっています。一次情報を優先してください。）
• 現時点では Chromium のみ：interpolate-size、corner-shape、CSS カルーセル（::scroll-marker）、scroll-state() クエリ、if()、@function。プログレッシブエンハンスメントとしてのみ使用してください。
• 古いスニペットを動作不能にする API の変更：cobe 2 には onRender がありません（独自の rAF から globe.update() を呼び出します）。drei 10 の PresentationControls が受け取るのは config ではなく damping です。THREE.Clock は非推奨です（r183+）。Next 16 の Image では priority の代わりに preload を使います。Motion の AnimateView は motion/react-animate-view からインポートします。tsParticles v4 では ParticlesProvider を使います。
• ラッパーにインラインの style={{ position: ... }} を指定すると、呼び出し元の absolute inset-0 クラスが上書きされ、サイズが 0 px になります。className を受け取るコンポーネントでは、配置指定にクラスを使ってください。

ページの演出設計図

レイヤー	予算	一般的なレシピ
到着	1.2 秒以内にヒーローを読める状態にする	実際のブランド演出や重いアセットがある場合に限り、任意でプリローダーを使用し、その後ヒーローのタイムラインを再生します。見出しは行ごとにマスクで表示し、メディアは拡大・クリップインで登場させ、ナビゲーションは最後にフェードインします
シグネチャー	ページごとに必ず 1 つ	ピン留めスクラブシーケンス、水平ギャラリー、カードの積み重ね、WebGL ヒーロー、またはキネティック見出し
リズム	すべてのセクションで同じシステム	すべての表示演出で、同じイージング、移動距離（24-48 px）、スタッガー（40-80 ms）を使用します。セクションごとに新しい演出を加えないでください
フィードバック	すべてのインタラクティブ要素	ホバー／押下／フォーカス時に 120-250 ms で反応します。マグネット効果やカーソル効果は (pointer: fine) の場合に限ります
トランジション	ルートと状態の変化	ビュートランジション、または移動方向に合ったカーテン演出を使います
フィナーレ	フッター	大きく画面に合わせたワードマーク、マーキー、または控えめな締めくくりにします。別の派手な演出は加えません

• ビューポートごとにヒーロー効果は 1 つにします。競合する動きが 2 つあると、互いの効果が打ち消されます。
• 動きは空間モデルに従わせます。要素は論理的な出所から現れ、移動先へと消えていくようにします。ページ全体で方向を統一してください。
• 最も大きな要素を先に見せ、その後に詳細を続けます。メディアが演出の中心ならテキストは最後に、見出しが中心ならテキストを先に表示します。
• 退出は登場より速くします（約 0.75 倍）。頻度の高い操作には、動きをほとんど加えないか、まったく加えません。
• 表示演出は 1 回だけにします。コンテンツがビューポートに入るたびに再アニメーションすると、ノイズになります。
• スクロール連動の動きは、指に追従するように感じられる必要があります。わずかなスムージングを加えてスクラブし（scrub: 0.5 から 1）、スクロールと競合する時間ベースのアニメーションは使わないでください。
• コンテンツページでスクロールの速度や方向を乗っ取らないでください。スクロールを閉じ込めず、ピン留めしてください。

必須事項

• prefers-reduced-motion：移動を不透明度の変化または静的な最終状態に置き換え、視差、オートプレイ、マーキー、スクロールの乗っ取りを停止し、すべてのコンテンツを表示したままにします（performance-a11y.md#15-reduced-motion-reduce-dont-remove）。
• 5 秒を超えて自動的に動くコンテンツ（マーキー、カルーセル、動画背景）には、一時停止コントロールを用意するか、ホバー／フォーカス時に一時停止させます（WCAG 2.2.2）。
• 原則として transform と opacity をアニメーションさせます。小さな要素や短時間だけ表示される要素なら、filter、backdrop-filter、clip-path、mask も使用できますが、ビューポート全体の領域ではスクラブしないでください。
• ポインター効果（カスタムカーソル、マグネット効果、傾き、ホバー時の表示）は (hover: hover) and (pointer: fine) の場合に限り、タッチ操作に適した代替手段も用意します。ホバーするまで非表示にする状態も、同じ条件で制御します（横向きのタブレットは幅が lg でもホバーできません）。
• LCP 要素を長いプリローダーの背後に隠してはいけません。コンテンツをサーバー側でレンダリングし、表示された状態またはすぐに表示できる状態からアニメーションさせます。ローダーや導入用カーテンはオプトイン方式にします。ヘッドスクリプトが html[data-intro="run"] を設定しない限り非表示にすることで、JavaScript を使わない訪問者やバンドルの読み込みに失敗した場合に、空白画面が表示されないようにします。
• テキスト分割では、アクセシブルなラベルを維持します（親に aria-label を付け、分割した各要素に aria-hidden を付けます）。
• すべてを適切にクリーンアップします：useGSAP のスコープ、ScrollTriggers、Lenis、RAF ループ、オブザーバー、WebGL コンテキストをクリーンアップしてください。モジュールスコープで window を使用しないでください（SSR）。
• マジックナンバーではなくトークンを使います。時間、イージング、距離、スタッガーは、CSS カスタムプロパティまたは単一の TS 定数モジュールにまとめます。
• 両方のテーマがある場合は両方でテストし、375 px と 1440 px、および CPU を 4 倍にスロットルした状態でもテストします。

検証プロトコル

スクリプトはこのスキルの scripts/ フォルダーにあり、プロジェクトに playwright-core（または playwright）をインストールし、Chrome/Edge をインストールする必要があります（または AUDIT_BROWSER を設定してください）。以下の <skill-dir> は、このスキルのベースディレクトリです（スキルの読み込み時に表示されます。手動インストールの場合は ~/.claude/skills/frontend-atlas です）。

1. 開発サーバーを起動し、次を実行します。 node <skill-dir>/scripts/motion-audit.mjs http://localhost:3000 --out motion-audit --widths 1440,390 --steps 16 実際のホイール入力でスクロールするため（Lenis/ScrollTrigger が反応します）、イントロのフレームと各スクロールステップをスクリーンショットに撮り、さらに prefers-reduced-motion: reduce で再実行します。コンソールエラー、問題の要素を含む水平オーバーフロー、ビューポートに入ったものの一度も表示されなかったコンテンツ（発火しなかったリビール）、シフトするノードを含む CLS、フレームペーシング、長時間アニメーションフレームを報告します。ヘッドレス環境での数値は、実環境のデータではなく、変更前後の比較に使用します。
2. node <skill-dir>/scripts/contact-sheet.mjs motion-audit --match motion-1440-scroll を実行すると、スクロール全体をまとめた1枚の画像が生成されます。これを見て、演出、ピン留め、クロスフェードを確認します。
3. スクロール効果が早すぎる、または遅すぎる場合は、ScrollTrigger.getAll().map(t => [t.trigger, t.start]) と各トリガーの getBoundingClientRect().top + scrollY を比較します（事実の説明にある作成順序のバグを参照してください）。
4. キーボードで確認します。メニュー、ダイアログ、遷移を Tab キーでたどり、フォーカスが見える状態に保たれ、必要な場所でトラップされることを確認します。その後、変更したファイルに対して web-design-guidelines スキルを実行します。

このスキルのメンテナンス：リファレンスを編集した後は、スキルのフォルダーから node scripts/maintenance/build-index.mjs を実行します（references/INDEX.md が再生成されます）。また、node scripts/maintenance/check-links.mjs --links も実行します。変更したレシピは、信頼する前にブラウザーで再検証してください。

関連スキル

このスキルと併用することをおすすめします（インストールコマンドはリポジトリの README にあります）。インストール済みの場合は、使用するスタックを決めた後に、詳細な API リファレンスとして活用してください。

• gsap-core、gsap-timeline、gsap-scrolltrigger、gsap-plugins、gsap-react、gsap-utils、 gsap-performance、gsap-frameworks：GreenSock 公式スキル（greensock/gsap-skills）。gsap-scrolltrigger で refreshPriority の順序付けが説明されている場合は、上記のプラットフォームに関する事実を優先してください。
• vercel-react-view-transitions：Next での React <ViewTransition> に関する詳細なパターンです。
• web-design-guidelines：最終確認に使う Vercel の Web Interface Guidelines です。
• vercel-react-best-practices：React/Next のパフォーマンスルールです（3つとも vercel-labs/agent-skills に含まれています）。
• テイストと批評：taste-skill、redesign-skill、soft-skill（Leonxlnx/taste-skill）、impeccable（pbakaus/impeccable）。

優先順位：プロジェクトのルール > このスキルのスタック選定 > 関連スキルのデフォルト（GSAP スキルの「GSAP を推奨」は、CSS または Motion のほうが軽量であると判断して選択した場合、それを覆しません）。

避けるべきモーションの悪癖（簡易リスト）

• すべてのセクションに同じタイミングでフェードアップを適用する、AI によるデフォルトのリビール。練り上げたリビールシステムを1つ使い、何も演出せずそのまま表示するセクションも設けます。
• UI でのバウンスや弾性イージング、ゼロからのスケール、装飾の回転や揺れ。
• 紫から青へのオーロラ + グリッド + 光線 + きらめくボタン + ベントを、デフォルトの組み合わせとして積み上げること（aesthetic-directions.md#global-ai-slop-tells-evidence-ranked）。
• あらゆる要素に傾き、グロー、マグネティック効果を同時に適用すること。
• コンテンツサイトや製品サイトで、必要もないのにカスタムカーソルを使うこと。
• テキストブロックへのパララックス、コンテンツに対する約 0.3 を超えるパララックス比率、プレーンテキストコンテンツの水平スクロール。
• カウンターを表示するためだけのプリローダー。
• タイプライター風の見出し、すべての見出しへのグラデーションテキスト、明確なコンセプトのないグリッチ効果。

依頼内容がこのリストに該当する場合は、関連するリファレンスファイルにある洗練された案を選び、その理由を簡潔に伝えてください。