add SpeedLines component

bea4dev · bea4dev · commit d6ddd2f3ae21 · 2026-01-02T16:29:11.000+09:00
diff --git a/docs/docs/lib/animation.md b/docs/docs/lib/animation.md
@@ -71,3 +71,18 @@ useAnimation(async (ctx) => {
 ```
 
 The key is that you can start motions early and await them later. That makes it easy to layer animations without complex bookkeeping.
+
+## Effects: SpeedLines
+
+`<SpeedLines />` is a focused-line overlay that reacts to the current frame and adds a subtle jitter.
+
+```tsx
+import { SpeedLines } from "../src/lib/animation/effect/speed-lines"
+import { FillFrame } from "../src/lib/layout/fill-frame"
+
+const Impact = () => (
+  <FillFrame>
+    <SpeedLines />
+  </FillFrame>
+)
+```
diff --git a/docs/docs/lib/media.md b/docs/docs/lib/media.md
@@ -51,3 +51,23 @@ For longer clips, set `showWaveform` to enable it explicitly:
 ```tsx
 <Sound sound="assets/music.mp3" showWaveform />
 ```
+
+### `<Character>`
+
+Switches between closed/open mouth images based on audio loudness.
+If `clipLabel` is provided, it only reacts to audio inside clips with that label.
+
+```tsx
+import { Character } from "../src/lib/sound/character"
+
+<Clip label="Voice">
+  <Sound sound="assets/voice.mp3" />
+</Clip>
+
+<Character
+  mouthClosed="assets/char_closed.png"
+  mouthOpen="assets/char_open.png"
+  threshold={0.12}
+  clipLabel="Voice"
+/>
+```
diff --git a/docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/animation.md b/docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/animation.md
@@ -71,3 +71,18 @@ useAnimation(async (ctx) => {
 ```
 
 ポイントは「先に動かしておいて、あとで await する」ことができる点です。これにより、同期的に順番通りに実行するだけでなく、簡単に重ね合わせ（並行演出）も作れます。
+
+## Effects: SpeedLines
+
+`<SpeedLines />` は集中線のオーバーレイで、フレームに合わせて微妙に揺れます。
+
+```tsx
+import { SpeedLines } from "../src/lib/animation/effect/speed-lines"
+import { FillFrame } from "../src/lib/layout/fill-frame"
+
+const Impact = () => (
+  <FillFrame>
+    <SpeedLines />
+  </FillFrame>
+)
+```
diff --git a/docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/media.md b/docs/i18n/ja/docusaurus-plugin-content-docs/current/lib/media.md
@@ -49,3 +49,23 @@ import { Sound } from "../src/lib/sound/sound"
 ```tsx
 <Sound sound="assets/music.mp3" showWaveform />
 ```
+
+### `<Character>`
+
+音量に応じて口の閉じた/開いた画像を切り替えます。
+`clipLabel` を指定すると、そのラベルのクリップ内の音声にのみ反応します。
+
+```tsx
+import { Character } from "../src/lib/sound/character"
+
+<Clip label="Voice">
+  <Sound sound="assets/voice.mp3" />
+</Clip>
+
+<Character
+  mouthClosed="assets/char_closed.png"
+  mouthOpen="assets/char_open.png"
+  threshold={0.12}
+  clipLabel="Voice"
+/>
+```
diff --git a/src/lib/animation/effect/speed-lines.tsx b/src/lib/animation/effect/speed-lines.tsx
@@ -0,0 +1,112 @@
+import { seconds, useCurrentFrame } from "../../frame"
+
+/**
+ * Speed-line overlay (concentric radial rays with jitter).
+ *
+ * 集中線のオーバーレイ。
+ *
+ * @example
+ * ```tsx
+ * import { SpeedLines } from "../src/lib/animation/effect/speed-lines"
+ *
+ * <SpeedLines />
+ * ```
+ */
+export const SpeedLines = () => {
+  const frame = useCurrentFrame()
+  const step = Math.floor(frame / 2)
+  const fade = Math.min(1, Math.max(0, frame / seconds(0.2)))
+  const opacity = fade * 0.78
+  const rand = (seed: number) => {
+    const x = Math.sin(seed * 97.13 + step * 41.37) * 43758.5453123
+    return x - Math.floor(x)
+  }
+  const jitter = (seed: number) => rand(seed) * 2 - 1
+  const driftA = { x: jitter(1.1) * 22, y: jitter(2.2) * 22 }
+  const driftB = { x: jitter(3.3) * 18, y: jitter(4.4) * 18 }
+  const scaleA = 1.02 + jitter(5.5) * 0.05
+  const scaleB = 1.0 + jitter(6.6) * 0.05
+  const rotA = jitter(7.7) * 24
+  const rotB = jitter(8.8) * 22
+  const rotC = jitter(9.9) * 18
+  const rotD = jitter(10.1) * 28
+  const rayMask =
+    "radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,1) 34%, rgba(0,0,0,1) 72%, rgba(0,0,0,0) 88%)"
+
+  return (
+    <>
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: "200%",
+          height: "200%",
+          transform: `translate(-50%, -50%) translate(${driftA.x}px, ${driftA.y}px) rotate(${rotA}deg) scale(${scaleA})`,
+          transformOrigin: "center",
+          opacity,
+          backgroundImage:
+            "repeating-conic-gradient(from 1deg, rgba(255, 255, 255, 0.9) 0deg 0.6deg, rgba(255, 255, 255, 0) 0.6deg 18deg)",
+          maskImage: rayMask,
+          WebkitMaskImage: rayMask,
+          mixBlendMode: "screen",
+          pointerEvents: "none",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: "185%",
+          height: "185%",
+          transform: `translate(-50%, -50%) translate(${driftB.x}px, ${driftB.y}px) rotate(${rotB}deg) scale(${scaleB})`,
+          transformOrigin: "center",
+          opacity: opacity * 0.75,
+          backgroundImage:
+            "repeating-conic-gradient(from 7deg, rgba(255, 255, 255, 0.75) 0deg 0.6deg, rgba(255, 255, 255, 0) 0.6deg 20deg)",
+          maskImage: rayMask,
+          WebkitMaskImage: rayMask,
+          mixBlendMode: "screen",
+          pointerEvents: "none",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: "210%",
+          height: "210%",
+          transform: `translate(-50%, -50%) translate(${-driftA.x * 0.6}px, ${driftA.y * 0.6}px) rotate(${rotC}deg) scale(${scaleA * 1.02})`,
+          transformOrigin: "center",
+          opacity: opacity * 0.6,
+          backgroundImage:
+            "repeating-conic-gradient(from 3deg, rgba(255, 255, 255, 0.7) 0deg 0.5deg, rgba(255, 255, 255, 0) 0.5deg 22deg)",
+          maskImage: rayMask,
+          WebkitMaskImage: rayMask,
+          mixBlendMode: "screen",
+          pointerEvents: "none",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          left: "50%",
+          top: "50%",
+          width: "175%",
+          height: "175%",
+          transform: `translate(-50%, -50%) translate(${-driftB.x * 0.5}px, ${driftB.y * 0.5}px) rotate(${rotD}deg) scale(${scaleB * 0.98})`,
+          transformOrigin: "center",
+          opacity: opacity * 0.55,
+          backgroundImage:
+            "repeating-conic-gradient(from 11deg, rgba(255, 255, 255, 0.8) 0deg 0.6deg, rgba(255, 255, 255, 0) 0.6deg 24deg)",
+          maskImage: rayMask,
+          WebkitMaskImage: rayMask,
+          mixBlendMode: "screen",
+          pointerEvents: "none",
+        }}
+      />
+    </>
+  )
+}
diff --git a/src/lib/sound/character.tsx b/src/lib/sound/character.tsx
@@ -5,7 +5,12 @@ import { type AudioSegment, useAudioSegments } from "../audio-plan"
 import { loadWaveformData, type WaveformData } from "../audio-waveform"
 import { useTimelineClips } from "../timeline"
 
-type CharacterProps = {
+/**
+ * Character mouth-flap props driven by audio amplitude.
+ *
+ * キャラの口パク用 props。
+ */
+export type CharacterProps = {
   mouthClosed: string
   mouthOpen: string
   threshold?: number
@@ -90,6 +95,24 @@ const resolveSegmentAmplitude = (
   return amplitude
 }
 
+/**
+ * Switches between closed/open mouth images based on audio loudness.
+ *
+ * 音量に応じて口の閉じた/開いた画像を切り替えます。
+ *
+ * @example
+ * ```tsx
+ * <Clip label="Voice">
+ *   <Sound sound="assets/voice.mp3" />
+ * </Clip>
+ * <Character
+ *   mouthClosed="assets/char_closed.png"
+ *   mouthOpen="assets/char_open.png"
+ *   threshold={0.12}
+ *   clipLabel="Voice"
+ * />
+ * ```
+ */
 export const Character = ({
   mouthClosed,
   mouthOpen,
