How to create a text flow basic テキストが横方向に流れる基本アニメーションの作り方

/* 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%);
  }
}

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

export default function TextFlowBasic() {
  const [speed, setSpeed] = useState(12);
  const label = "Text Flow Basic · Vibe UI Pattern Library · ";
  const dynamicStyle = { "--flow-duration": `${speed}s` };

  return (
    <section className="text-flow-basic" style={dynamicStyle}>
      <div className="text-flow-basic__viewport">
        <Track label={label} />
        <Track label={label} aria-hidden="true" />
      </div>
      <label className="text-flow-basic__label">
        <span>Speed (seconds)</span>
        <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, ...rest }) {
  return (
    <div className="text-flow-basic__track" {...rest}>
      <span>{label}</span>
      <span>{label}</span>
    </div>
  );
}

:root {
  --flow-gradient: linear-gradient(90deg, #7f5af0, #ffa7c4, #22d3ee);
}

.text-flow-basic {
  background: #050714;
  border-radius: 24px;
  padding: clamp(20px, 5vw, 36px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text-flow-basic__viewport {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: clamp(18px, 4vw, 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(28px, 6vw, 54px);
  font-weight: 600;
  white-space: nowrap;
  background: var(--flow-gradient);
  -webkit-background-clip: text;
  color: transparent;
}

.text-flow-basic__label {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 600;
}

.text-flow-basic__label input[type="range"] {
  flex: 1;
  min-width: 160px;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text-flow-basic__track {
    animation-duration: calc(var(--flow-duration, 12s) * 2);
  }
}