M-027 Animation medium

Kinetic Typography Poster キネティック・タイポグラフィポスター

High-energy motion poster featuring alternating angled marquee banners, brutalist color blocks, interactive pause controls, and Swiss modernism aesthetics. 流れるテキストリボンや幾何学ストライプ、一時停止切り替えを備えた動的タイポグラフィポスター。

kinetic-typography marquee poster brutalism animation

ライブデモ Live Demo

MANIFESTO // 2026
KINETIC CADENCE • RADICAL TYPE • UNCOMPROMISED FORM • 
BOLD • TENSION • EXPERIMENT • DISRUPT • EVOLVE • 
NEVER STATIC • INFINITE LOOP • SYSTEMATIC MOTION • 
SWISS BRUTALISM × WEB STANDARDSFPS: 60 / SEC: AUTO

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

何ができるかWhat it does

High-energy motion poster featuring alternating angled marquee banners, brutalist color blocks, interactive pause controls, and Swiss modernism aesthetics.

流れるテキストリボンや幾何学ストライプ、一時停止切り替えを備えた動的タイポグラフィポスター。

どこで使うかWhere to use

Portfolio, product showcase, landing page.

ポートフォリオ、製品紹介、ランディングページ。

特徴Key features

High-energy motion poster featuring alternating angled marquee banners, brutalist color blocks, interactive pause controls, and Swiss modernism aesthetics.

流れるテキストリボンや幾何学ストライプ、一時停止切り替えを備えた動的タイポグラフィポスター。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--kt-bg#f5f046Change this CSS custom property to match your brand color.

実装コード Implementation Code 

<div class="demo-stage kt-root"><div class="kt-poster"><div class="kt-header"><span class="kt-stamp">MANIFESTO // 2026</span><button type="button" class="kt-ctrl" aria-pressed="false" aria-label="Toggle typography motion animation"><span class="kt-indicator" aria-hidden="true"></span>FREEZE</button></div><div class="kt-marquee-box kt-tilt"><div class="kt-track kt-track-1"><span class="kt-phrase">KINETIC CADENCE &bull; RADICAL TYPE &bull; UNCOMPROMISED FORM &bull;&nbsp;</span><span class="kt-phrase" aria-hidden="true">KINETIC CADENCE &bull; RADICAL TYPE &bull; UNCOMPROMISED FORM &bull;&nbsp;</span></div></div><div class="kt-accent-strip"><div class="kt-track kt-track-rev"><span class="kt-phrase-bold">BOLD &bull; TENSION &bull; EXPERIMENT &bull; DISRUPT &bull; EVOLVE &bull;&nbsp;</span><span class="kt-phrase-bold" aria-hidden="true">BOLD &bull; TENSION &bull; EXPERIMENT &bull; DISRUPT &bull; EVOLVE &bull;&nbsp;</span></div></div><div class="kt-marquee-box"><div class="kt-track kt-track-2"><span class="kt-phrase">NEVER STATIC &bull; INFINITE LOOP &bull; SYSTEMATIC MOTION &bull;&nbsp;</span><span class="kt-phrase" aria-hidden="true">NEVER STATIC &bull; INFINITE LOOP &bull; SYSTEMATIC MOTION &bull;&nbsp;</span></div></div><div class="kt-footer"><span class="kt-meta">SWISS BRUTALISM &times; WEB STANDARDS</span><span class="kt-coords">FPS: 60 / SEC: AUTO</span></div></div></div>
<script>
(() => { document.querySelectorAll('.kt-root').forEach((root) => { const btn = root.querySelector('.kt-ctrl'); if (!btn) return; if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { root.classList.add('kt-paused'); btn.setAttribute('aria-pressed', 'true'); btn.textContent = 'REDUCED MOTION'; btn.disabled = true; btn.setAttribute('aria-label', 'Animation disabled by reduced motion preference'); return; } btn.addEventListener('click', () => { const isPaused = root.classList.toggle('kt-paused'); btn.setAttribute('aria-pressed', String(isPaused)); const ind = document.createElement('span'); ind.className = 'kt-indicator'; ind.setAttribute('aria-hidden', 'true'); btn.textContent = isPaused ? 'PLAY' : 'FREEZE'; btn.prepend(ind); }); }); })();
</script>
.kt-root{--kt-bg:#f5f046;--kt-ink:#0a0a0a;--kt-red:#ff2a2a;--kt-white:#ffffff;display:flex;align-items:center;justify-content:center;min-height:380px;padding:24px 16px;background:#121212;color:var(--kt-ink);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;box-sizing:border-box;width:100%}.kt-root *,.kt-root *::before,.kt-root *::after{box-sizing:border-box}.kt-root .kt-poster{width:100%;max-width:580px;background:var(--kt-bg);border:8px solid var(--kt-ink);border-radius:4px;padding:20px 16px;box-shadow:12px 12px 0 var(--kt-red),0 20px 40px rgba(0,0,0,0.8);overflow:hidden;position:relative}.kt-root .kt-header{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--kt-ink);padding-bottom:12px;margin-bottom:18px}.kt-root .kt-stamp{font-family:monospace;font-size:12px;font-weight:900;letter-spacing:1px}.kt-root .kt-ctrl{background:var(--kt-ink);color:var(--kt-white);border:none;padding:6px 14px;border-radius:3px;font-family:monospace;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;letter-spacing:1px}.kt-root .kt-ctrl:focus-visible{outline:2px solid var(--kt-red);outline-offset:2px}.kt-root .kt-indicator{width:7px;height:7px;border-radius:50%;background:#00ff66}.kt-root.kt-paused .kt-indicator{background:var(--kt-red)}.kt-root.kt-paused .kt-track{animation-play-state:paused}.kt-root .kt-marquee-box{overflow:hidden;white-space:nowrap;background:var(--kt-ink);color:var(--kt-white);padding:8px 0;border:3px solid var(--kt-ink);margin:8px 0}.kt-root .kt-tilt{transform:rotate(-2deg);box-shadow:0 4px 10px rgba(0,0,0,0.2)}.kt-root .kt-accent-strip{overflow:hidden;white-space:nowrap;background:var(--kt-red);color:var(--kt-white);padding:10px 0;border:3px solid var(--kt-ink);margin:8px 0;transform:rotate(1.5deg)}.kt-root .kt-track{display:inline-flex;width:max-content}.kt-root .kt-phrase{font-size:26px;letter-spacing:1.5px;text-transform:uppercase}.kt-root .kt-phrase-bold{font-size:22px;letter-spacing:2px;font-weight:900;text-transform:uppercase}.kt-root .kt-footer{display:flex;justify-content:space-between;align-items:center;border-top:4px solid var(--kt-ink);padding-top:12px;margin-top:18px;font-family:monospace;font-size:10px;font-weight:800;letter-spacing:1px}@media (max-width:440px){.kt-root .kt-phrase{font-size:20px}.kt-root .kt-phrase-bold{font-size:17px}.kt-root .kt-poster{padding:14px 10px}}@media (prefers-reduced-motion: no-preference){.kt-root .kt-track-1{animation:kt-scroll-left 14s linear infinite}.kt-root .kt-track-rev{animation:kt-scroll-right 12s linear infinite}.kt-root .kt-track-2{animation:kt-scroll-left 18s linear infinite}}@keyframes kt-scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes kt-scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@media not all and (prefers-reduced-motion: no-preference){.kt-root *{transition:none!important;animation:none!important}}
.kt-root .kt-header,.kt-root .kt-footer{gap:10px;flex-wrap:wrap}.kt-root .kt-poster{min-width:0}
import { useState, useEffect } from "react";
import "./M-027.css";
function useReducedMotion() {
  const [reduced, setReduced] = useState(true);
  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReduced(media.matches);
    sync();
    media.addEventListener("change", sync);
    return () => media.removeEventListener("change", sync);
  }, []);
  return reduced;
}
function KineticTypographyPoster() {
  const [paused, setPaused] = useState(false);
  const reduced = useReducedMotion();
  return <div className={"demo-stage kt-root" + (paused || reduced ? " kt-paused" : "")}><div className="kt-poster"><div className="kt-header"><span className="kt-stamp">{"MANIFESTO // 2026"}</span><button type="button" className="kt-ctrl" disabled={reduced} aria-pressed={paused || reduced} onClick={() => setPaused((value) => !value)} aria-label={reduced ? "Animation disabled by reduced motion preference" : "Toggle animation playback"}>{reduced ? "REDUCED MOTION" : paused ? "Resume" : "Pause"}</button></div><div className="kt-marquee-box kt-tilt"><div className="kt-track kt-track-1"><span className="kt-phrase">{"KINETIC CADENCE \u2022 RADICAL TYPE \u2022 UNCOMPROMISED FORM \u2022\xA0"}</span><span className="kt-phrase" aria-hidden="true">{"KINETIC CADENCE \u2022 RADICAL TYPE \u2022 UNCOMPROMISED FORM \u2022\xA0"}</span></div></div><div className="kt-accent-strip"><div className="kt-track kt-track-rev"><span className="kt-phrase-bold">{"BOLD \u2022 TENSION \u2022 EXPERIMENT \u2022 DISRUPT \u2022 EVOLVE \u2022\xA0"}</span><span className="kt-phrase-bold" aria-hidden="true">{"BOLD \u2022 TENSION \u2022 EXPERIMENT \u2022 DISRUPT \u2022 EVOLVE \u2022\xA0"}</span></div></div><div className="kt-marquee-box"><div className="kt-track kt-track-2"><span className="kt-phrase">{"NEVER STATIC \u2022 INFINITE LOOP \u2022 SYSTEMATIC MOTION \u2022\xA0"}</span><span className="kt-phrase" aria-hidden="true">{"NEVER STATIC \u2022 INFINITE LOOP \u2022 SYSTEMATIC MOTION \u2022\xA0"}</span></div></div><div className="kt-footer"><span className="kt-meta">{"SWISS BRUTALISM \xD7 WEB STANDARDS"}</span><span className="kt-coords">{"FPS: 60 / SEC: AUTO"}</span></div></div></div>;
}
export {
  KineticTypographyPoster as default
};

.kt-root{--kt-bg:#f5f046;--kt-ink:#0a0a0a;--kt-red:#ff2a2a;--kt-white:#ffffff;display:flex;align-items:center;justify-content:center;min-height:380px;padding:24px 16px;background:#121212;color:var(--kt-ink);font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;box-sizing:border-box;width:100%}.kt-root *,.kt-root *::before,.kt-root *::after{box-sizing:border-box}.kt-root .kt-poster{width:100%;max-width:580px;background:var(--kt-bg);border:8px solid var(--kt-ink);border-radius:4px;padding:20px 16px;box-shadow:12px 12px 0 var(--kt-red),0 20px 40px rgba(0,0,0,0.8);overflow:hidden;position:relative}.kt-root .kt-header{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--kt-ink);padding-bottom:12px;margin-bottom:18px}.kt-root .kt-stamp{font-family:monospace;font-size:12px;font-weight:900;letter-spacing:1px}.kt-root .kt-ctrl{background:var(--kt-ink);color:var(--kt-white);border:none;padding:6px 14px;border-radius:3px;font-family:monospace;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;letter-spacing:1px}.kt-root .kt-ctrl:focus-visible{outline:2px solid var(--kt-red);outline-offset:2px}.kt-root .kt-indicator{width:7px;height:7px;border-radius:50%;background:#00ff66}.kt-root.kt-paused .kt-indicator{background:var(--kt-red)}.kt-root.kt-paused .kt-track{animation-play-state:paused}.kt-root .kt-marquee-box{overflow:hidden;white-space:nowrap;background:var(--kt-ink);color:var(--kt-white);padding:8px 0;border:3px solid var(--kt-ink);margin:8px 0}.kt-root .kt-tilt{transform:rotate(-2deg);box-shadow:0 4px 10px rgba(0,0,0,0.2)}.kt-root .kt-accent-strip{overflow:hidden;white-space:nowrap;background:var(--kt-red);color:var(--kt-white);padding:10px 0;border:3px solid var(--kt-ink);margin:8px 0;transform:rotate(1.5deg)}.kt-root .kt-track{display:inline-flex;width:max-content}.kt-root .kt-phrase{font-size:26px;letter-spacing:1.5px;text-transform:uppercase}.kt-root .kt-phrase-bold{font-size:22px;letter-spacing:2px;font-weight:900;text-transform:uppercase}.kt-root .kt-footer{display:flex;justify-content:space-between;align-items:center;border-top:4px solid var(--kt-ink);padding-top:12px;margin-top:18px;font-family:monospace;font-size:10px;font-weight:800;letter-spacing:1px}@media (max-width:440px){.kt-root .kt-phrase{font-size:20px}.kt-root .kt-phrase-bold{font-size:17px}.kt-root .kt-poster{padding:14px 10px}}@media (prefers-reduced-motion: no-preference){.kt-root .kt-track-1{animation:kt-scroll-left 14s linear infinite}.kt-root .kt-track-rev{animation:kt-scroll-right 12s linear infinite}.kt-root .kt-track-2{animation:kt-scroll-left 18s linear infinite}}@keyframes kt-scroll-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}@keyframes kt-scroll-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}
@media not all and (prefers-reduced-motion: no-preference){.kt-root *{transition:none!important;animation:none!important}}
.kt-root .kt-header,.kt-root .kt-footer{gap:10px;flex-wrap:wrap}.kt-root .kt-poster{min-width:0}

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

仕組みHow it works

Scoped CSS creates the visual design; small vanilla JavaScript handlers update the local demo state.

スコープ化したCSSで描画し、Vanilla JavaScriptでデモ内の状態だけを更新します。

カスタマイズ方法Customization

Change this CSS custom property to match your brand color.

CSSカスタムプロパティでブランドカラーを変更できます。

注意点Caveats

The sample content is fictional. No external assets or libraries are required. Motion follows the operating system preference. Demo labels are English; surrounding documentation supports Japanese and English.

デモ内容は架空です。外部素材・ライブラリは不要。OSの動きを減らす設定に対応します。デモ内のラベルは英語、解説は日英対応です。

よくある質問 Frequently Asked Questions

Does this demo need external libraries? 外部ライブラリは必要ですか？

The sample content is fictional. No external assets or libraries are required. Motion follows the operating system preference. Demo labels are English; surrounding documentation supports Japanese and English.

デモ内容は架空です。外部素材・ライブラリは不要。OSの動きを減らす設定に対応します。デモ内のラベルは英語、解説は日英対応です。

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

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