AI向け説明 AI Description

`M-001` は CSS で定義したグラデーションテキストを2本配置し、`@keyframes scroll` で水平方向にトランスレートしてループさせる構造です。`--flow-duration` カスタムプロパティで速度を制御し、ユーザー操作やデータ属性と連動させることができます。

`M-001` duplicates the gradient text strip twice and animates both in a horizontal marquee using `@keyframes scroll`. The loop speed is controlled by the `--flow-duration` custom property so you can sync it with sliders, data attributes, or prefers-reduced-motion guards.

調整可能パラメータ Adjustable Parameters

• --flow-duration — アニメーション1周の秒数（例: 8s〜18s） duration of a full loop (e.g., 8s, 18s)
• --flow-gradient — テキストのlinear-gradient色 linear-gradient colors for the text
• --flow-gap — 繰り返しテキストセグメント間のギャップ gap between repeating text segments
• prefers-reduced-motion — ユーザー設定を尊重してループを遅くまたは停止 respect user settings by slowing/stopping the loop

実装 Implementation

HTML + CSS + JS

<section class="text-flow-demo" data-speed="12">
  <div class="text-flow-demo__viewport">
    <div class="text-flow-demo__track" aria-hidden="true">
      <span>Text Flow Basic · DevSnips ·</span>
      <span>Text Flow Basic · DevSnips ·</span>
    </div>
    <div class="text-flow-demo__track">
      <span>Text Flow Basic · DevSnips ·</span>
      <span>Text Flow Basic · DevSnips ·</span>
    </div>
  </div>
  <input type="range" min="6" max="20" value="12" data-speed-control>
</section>

<style>
:root {
  --flow-duration: 12s;
  --flow-gradient: linear-gradient(90deg, #7f5af0, #22d3ee, #ffa7c4);
}
.text-flow-demo__viewport {
  overflow: hidden;
  background: #050714;
  border-radius: 18px;
  padding: 28px 0;
}
.text-flow-demo__track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee var(--flow-duration) linear infinite;
}
.text-flow-demo__track span {
  font-size: 48px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--flow-gradient);
  -webkit-background-clip: text;
  color: transparent;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-flow-demo__track {
    animation-duration: calc(var(--flow-duration) * 2);
  }
}
</style>

<script>
const control = document.querySelector("[data-speed-control]");
const demo = document.querySelector(".text-flow-demo");
control.addEventListener("input", (event) => {
  const seconds = `${event.target.value}s`;
  demo.style.setProperty("--flow-duration", seconds);
});
</script>

React (JSX + CSS)

// react/M-001.jsx
import { useState } from "react";
import "./M-001.css";

export default function TextFlowBasic() {
  const [speed, setSpeed] = useState(12);

  return (
    <section className="text-flow-basic" style={{ ["--flow-duration"]: `${speed}s` }}>
      <div className="text-flow-basic__viewport">
        <Track label="Text Flow Basic · DevSnips · " />
        <Track label="Text Flow Basic · DevSnips · " aria-hidden="true" />
      </div>
      <label className="text-flow-basic__label">
        Speed (seconds)
        <input
          type="range"
          min="6"
          max="20"
          value={speed}
          onChange={(event) => setSpeed(Number(event.target.value))}
        />
        <output>{speed}s</output>
      </label>
    </section>
  );
}

function Track({ label, ...props }) {
  return (
    <div className="text-flow-basic__track" {...props}>
      <span>{label}</span>
      <span>{label}</span>
    </div>
  );
}

/* react/M-001.css */
:root {
  --flow-gradient: linear-gradient(90deg, #7f5af0, #ffa7c4, #22d3ee);
}
.text-flow-basic {
  background: #050714;
  border-radius: 20px;
  padding: 32px;
  color: #fff;
}
.text-flow-basic__viewport {
  overflow: hidden;
  border-radius: 16px;
  padding: 32px 0;
}
.text-flow-basic__track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marquee var(--flow-duration, 12s) linear infinite;
}
.text-flow-basic__track span {
  font-size: clamp(26px, 4vw, 48px);
  background: var(--flow-gradient);
  -webkit-background-clip: text;
  color: transparent;
  white-space: nowrap;
}
.text-flow-basic__label {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

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

同じ構造でキーフレームとギャップ値を調整することで、縦方向のマーキーや交互複数行コンテンツに適応できます。AIに高度なバリエーションを指示する際にこのページを参照してください。

You can adapt the same structure for vertical marquees or alternating multi-line content by tweaking the keyframes and gap values. Refer to this page when instructing AI about advanced variations.