T-002 Theme simple

How to create a mood gradient cycle ムードグラデーションサイクルの作り方

Cycles mood-based gradients with buttons and a hue-rotate animation. ボタンでムード別グラデーションを切り替え、CSSアニメーションで色相を循環させるテーマ演出。

gradient theme mood

ライブデモ Live Demo

Calm & Peaceful

Soothing colors for relaxation

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Cycles mood-based gradients with buttons and a hue-rotate animation.

ボタンでムード別グラデーションを切り替え、CSSアニメーションで色相を循環させるテーマ演出。

どこで使うかWhere to use

dark mode support, user preferences, seasonal themes, brand customization

アンビエントUI、音楽プレイヤー、瞑想アプリ、ムードボード、クリエイティブサイト

特徴Key features

Continuously cycling gradient background that transitions through a mood-based color palette. CSS @keyframes animates background-position or hue-rotate. Configurable cycle speed and color stops. Creates an ambient, living background effect.

ムードベースのカラーパレットを循環するContinuously cycling gradientBackground。CSS @keyframesがbackground-positionまたはhue-rotateをアニメーション。サイクル速度とカラーストップを設定可能。アンビエントで生きた背景エフェクトを作成。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--cycle-duration—adjust cycle speed
gradient presets—create presets with brand colors
transition timing—modify transition easing function
mood count—increase or decrease mood variations

実装コード Implementation Code 

// 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>
  );
}
: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); }
}
import { useState } from "react";
import "./T-002.css";

const gradients = {
  bright: "linear-gradient(120deg, #ff6b6b, #ffd166, #1dd3b0)",
  calm: "linear-gradient(120deg, #5c6ac4, #6fffe9, #bee3db)",
  sunset: "linear-gradient(120deg, #ff9a8b, #f6416c, #fbda61)",
};

export default function MoodGradientCycle() {
  const [mood, setMood] = useState("bright");

  return (
    <section className="mood-panel" style={{ "--mood-gradient": gradients[mood] }}>
      <div className="mood-content">
        <p>{mood.toUpperCase()} MODE</p>
        <h3>Gradient mood board</h3>
        <div className="mood-pills">
          {Object.keys(gradients).map((name) => (
            <button key={name} className={name === mood ? "active" : ""} onClick={() => setMood(name)}>
              {name}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
:root {
  --mood-gradient: linear-gradient(120deg, #ff6b6b, #ffd166, #1dd3b0);
}

.mood-panel {
  border-radius: 24px;
  padding: clamp(24px, 5vw, 40px);
  color: #fff;
  background: var(--mood-gradient);
  animation: moodShift 12s linear infinite;
}

.mood-content {
  text-align: center;
}

.mood-pills {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.mood-pills button {
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.mood-pills button.active {
  background: rgba(255, 255, 255, 0.85);
  color: #050712;
}

@keyframes moodShift {
  to {
    filter: hue-rotate(360deg);
  }
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

A large linear-gradient with multiple color stops has its background-size set larger than the element (e.g., 400% 400%). A @keyframes animation shifts the background-position between 0%/0% and 100%/100%, cycling through all the color stops continuously. The slow animation speed (10-20s) creates a gentle, organic mood transition.

複数のカラーストップを持つ大きなlinear-gradientがbackground-sizeを要素より大きく設定（例：400% 400%）。@keyframesアニメーションがbackground-positionを0%/0%から100%/100%の間でシフトし、全てのカラーストップを継続的に循環。遅いアニメーション速度（10〜20秒）が穏やかで有機的なムードトランジションを作成。

カスタマイズ方法Customization

Group color stops by mood (calm: blues/greens, energetic: reds/oranges) and swap the gradient based on user input. Increase animation-duration for a very slow ambient cycle. Add opacity animation alongside the gradient for a breathing effect.

カラーストップをムード別にグループ化（穏やか：青/緑、活発：赤/オレンジ）してユーザー入力に基づいてグラデーションを交換。非常にゆっくりしたアンビエントサイクルにanimation-durationを増加。呼吸エフェクトのためにグラデーションと並行してopacityアニメーションを追加。

注意点Caveats

Continuous animated backgrounds can be distracting and drain battery on mobile. Provide a pause/disable control. Always respect prefers-reduced-motion by stopping the cycle and showing a static gradient instead.

継続的なアニメーション背景は気を散らし、モバイルではバッテリーを消耗させる可能性があります。一時停止/無効化コントロールを提供してください。prefers-reduced-motionを常に尊重してサイクルを停止し代わりに静的なグラデーションを表示してください。

よくある質問 Frequently Asked Questions

How to customize the mood gradient cycle? Mood Gradient Cycleをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the mood gradient cycle in React? ReactでMood Gradient Cycleを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of mood gradient cycle? Mood Gradient Cycleのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.