ライブデモ Live Demo

CSSカスタムプロパティで定義された複数のグラデーションプリセットを順次切り替えます。手動モードではボタンで即座にムードを変更できます。

Cycle through multiple gradient presets defined with CSS custom properties. Manual mode allows instant mood changes via buttons.

Calm & Peaceful

Soothing colors for relaxation

AI向け説明 AI Description

`T-002` はCSSカスタムプロパティに格納された複数のグラデーションプリセットを `@keyframes` で順次切り替えます。手動モードではJavaScriptで `--current-gradient` を直接設定し、アニメーションを停止して即座にムードを変更できます。

`T-002` cycles through gradient presets stored in CSS custom properties via `@keyframes`. In manual mode, JavaScript sets `--current-gradient` directly, stops the animation, and applies instant mood changes.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS + JS

<div class="gradient-preview cycling">
  <div class="preview-content">
    <h3 id="mood_title">Calm & Peaceful</h3>
  </div>
</div>
<button data-mood="auto">Auto Cycle</button>
<button data-mood="calm">Calm</button>
<button data-mood="energy">Energy</button>

<style>
:root {
  --cycle-duration: 8s;
  --gradient-calm: linear-gradient(135deg, #667eea, #764ba2);
  --gradient-energy: linear-gradient(135deg, #f093fb, #f5576c);
  --gradient-focus: linear-gradient(135deg, #4facfe, #00f2fe);
  --gradient-zen: linear-gradient(135deg, #43e97b, #38f9d7);
}

.gradient-preview {
  background: var(--current-gradient);
  transition: background 1.2s ease;
}

.gradient-preview.cycling {
  animation: gradientCycle var(--cycle-duration) ease-in-out infinite;
}

@keyframes gradientCycle {
  0%   { background: var(--gradient-calm); }
  25%  { background: var(--gradient-energy); }
  50%  { background: var(--gradient-focus); }
  75%  { background: var(--gradient-zen); }
  100% { background: var(--gradient-calm); }
}
</style>

<script>
const preview = document.querySelector(".gradient-preview");
document.querySelectorAll("[data-mood]").forEach(btn => {
  btn.addEventListener("click", () => {
    const mood = btn.dataset.mood;
    if (mood === "auto") {
      preview.classList.add("cycling");
      preview.style.removeProperty("background");
    } else {
      preview.classList.remove("cycling");
      preview.style.background = `var(--gradient-${mood})`;
    }
  });
});
</script>

React (JSX + CSS)

// react/T-002.jsx
import { useState } from "react";
import "./T-002.css";

const moods = {
  calm: { title: "Calm", gradient: "linear-gradient(135deg, #667eea, #764ba2)" },
  energy: { title: "Energy", gradient: "linear-gradient(135deg, #f093fb, #f5576c)" },
  focus: { title: "Focus", gradient: "linear-gradient(135deg, #4facfe, #00f2fe)" },
  zen: { title: "Zen", gradient: "linear-gradient(135deg, #43e97b, #38f9d7)" },
};

export default function MoodGradientCycle() {
  const [mode, setMode] = useState("auto");

  return (
    <div
      className={`gradient-preview ${mode === "auto" ? "cycling" : ""}`}
      style={mode !== "auto" ? { background: moods[mode].gradient } : {}}
    >
      <h3>{mode === "auto" ? "Auto Cycling" : moods[mode].title}</h3>
      {["auto", ...Object.keys(moods)].map(m => (
        <button key={m} onClick={() => setMode(m)}>{m}</button>
      ))}
    </div>
  );
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

時間帯やユーザーアクション（スクロール位置、マウス位置）に基づいてムードを動的に変更することで、より没入感のある体験を作成できます。

Create more immersive experiences by dynamically changing moods based on time of day or user actions (scroll position, mouse position).