グラデ見出し＆光沢

<!-- FlowDesk：ヒーローのグラデ発光キャッチコピー -->
<section class="gt-stage">
  <header class="gt-nav">
    <div class="gt-brand"><span class="gt-mark">◆</span> FlowDesk</div>
    <nav class="gt-menu">
      <span>機能</span><span>料金</span><span>導入事例</span>
    </nav>
    <button class="gt-cta" type="button">無料で始める</button>
  </header>

  <div class="gt-hero">
    <span class="gt-pill">NEW · ワークフロー自動化</span>
    <!-- 各文字を span 化し、グラデ＋浮遊アニメで発光 -->
    <h1 class="gt-headline" id="gtHeadline" data-text="チームの流れを、もっと速く。">チームの流れを、もっと速く。</h1>
    <p class="gt-sub">散らばったタスク・承認・通知をひとつのダッシュボードへ。FlowDesk が日々の業務を自動でつなぎます。</p>
    <div class="gt-actions">
      <button class="gt-primary" type="button">デモを予約</button>
      <button class="gt-ghost" type="button">▶ 30秒ツアー</button>
    </div>
  </div>
</section>

/* FlowDesk：ヒーローのグラデ発光見出し */
:root {
  --navy: #0f1b34;
  --blue: #4f7cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 400px;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  background: radial-gradient(130% 120% at 80% -10%, #1c2f57 0%, #0f1b34 55%, #0a1228 100%);
  color: #eef2ff;
  overflow: hidden;
}

.gt-stage { height: 400px; padding: 16px 26px; display: flex; flex-direction: column; }

.gt-nav { display: flex; align-items: center; gap: 18px; }
.gt-brand { font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }
.gt-mark { color: var(--blue); }
.gt-menu { display: flex; gap: 16px; margin-left: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.gt-cta {
  margin-left: auto;
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 14px; border: none; border-radius: 9px; cursor: pointer;
  color: #fff; background: rgba(79, 124, 255, 0.22);
  border: 1px solid rgba(79, 124, 255, 0.4);
}

.gt-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 460px; }
.gt-pill {
  align-self: flex-start;
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(79, 124, 255, 0.16); color: #9db4ff;
  margin-bottom: 14px;
}

/* グラデ見出し：文字spanは JS 生成 */
.gt-headline {
  margin: 0 0 14px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.gt-char {
  display: inline-block;
  background: linear-gradient(100deg, #8fb0ff, #4f7cff 40%, #b58cff 70%, #6fe0ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* 背景スライドで発光、上下浮遊で生き生きと */
  animation: gt-shine 3.4s linear infinite, gt-float 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.gt-char--space { -webkit-text-fill-color: initial; animation: none; }

@keyframes gt-shine {
  to { background-position: 220% 0; }
}
@keyframes gt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.gt-sub { margin: 0 0 18px; font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }

.gt-actions { display: flex; gap: 10px; }
.gt-primary, .gt-ghost {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
}
.gt-primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, #5f8bff, var(--blue));
  box-shadow: 0 10px 22px rgba(79, 124, 255, 0.45);
}
.gt-ghost {
  background: transparent; color: #cdd8ff;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .gt-char { animation: none; }
}

// FlowDesk：見出しを1文字ずつ span 化し、遅延差で浮遊させる
(() => {
  const h = document.getElementById("gtHeadline");
  if (!h) return; // null安全

  const text = h.dataset.text || h.textContent || "";
  h.textContent = ""; // 元テキストを消して span を積む

  Array.from(text).forEach((ch, i) => {
    const span = document.createElement("span");
    if (ch === " " || ch === "　") {
      span.className = "gt-char gt-char--space";
      span.textContent = ch;
    } else {
      span.className = "gt-char";
      span.textContent = ch;
      // 文字ごとに僅かな遅延でウェーブ感を出す
      span.style.setProperty("--d", `${(i * 0.06).toFixed(2)}s`);
    }
    h.appendChild(span);
  });
})();

<!-- グラデーション文字＋光沢スイープ：見出しを上質に動かす -->
<div class="gtext-stage">
  <p class="gtext-eyebrow">CREATIVE CODE</p>
  <h1 class="gtext-title" id="gtextTitle">Animate&nbsp;Everything</h1>
  <p class="gtext-tagline">background-clip と keyframes だけで作る発光見出し</p>
</div>

/* 暗い背景で文字グラデを流し、光沢を横切らせる */
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 360px;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  background: radial-gradient(120% 120% at 50% 20%, #181a35 0%, #0a0b16 70%);
  color: #e8eaff;
  padding: 20px;
}
.gtext-stage { display: grid; gap: 12px; }

.gtext-eyebrow {
  margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .42em;
  color: #7c8bff;
}

/* グラデを文字でクリップ＋背景位置をアニメで流す */
.gtext-title {
  margin: 0;
  font-size: clamp(34px, 9vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  background: linear-gradient(100deg, #ff7eb3, #a47cff, #39d3ff, #6df0c2, #ff7eb3);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gtextFlow 7s linear infinite;
  position: relative;
  filter: drop-shadow(0 2px 16px rgba(120, 140, 255, .4));
}
@keyframes gtextFlow {
  to { background-position: 280% 50%; }
}

/* 文字ごとに分割した span。inline-block だと親の background-clip:text が
   効かず透明になってしまうため、各 span に同じグラデを直接適用して可視化する。 */
.gtext-char {
  display: inline-block;
  background: linear-gradient(100deg, #ff7eb3, #a47cff, #39d3ff, #6df0c2, #ff7eb3);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.gtext-tagline {
  margin: 0;
  font-size: 13px;
  color: #9aa0cf;
  letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {
  .gtext-title { animation: none; background-position: 0 50%; }
}

// グラデ見出し：文字を span 分割し、軽い浮遊で立体感を足す（任意の上乗せ演出）
(() => {
  const title = document.getElementById('gtextTitle');
  if (!title) return; // null安全

  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const text = title.textContent;
  title.textContent = '';

  // 1文字ずつ span 化（ 由来の空白も保持）
  const frag = document.createDocumentFragment();
  Array.from(text).forEach((ch, i) => {
    const span = document.createElement('span');
    span.className = 'gtext-char';
    span.textContent = ch === ' ' ? ' ' : ch;
    if (!reduce) {
      // 文字ごとに位相差をつけて上下にゆらす＋グラデも流す（2アニメ併用）
      span.style.animation = `gtextFloat 3.2s ease-in-out ${i * 0.06}s infinite, gtextFlow 7s linear infinite`;
    }
    frag.appendChild(span);
  });
  title.appendChild(frag);

  // 浮遊用キーフレームを動的に注入（CSSを汚さず完結）
  if (!reduce && !document.getElementById('gtextFloatStyle')) {
    const style = document.createElement('style');
    style.id = 'gtextFloatStyle';
    style.textContent =
      '@keyframes gtextFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}';
    document.head.appendChild(style);
  }
})();