undefined

---

// src/styles/theme.ts
export const colors = {
  primary: '#2D3748',      // ダークグレー（メインUI）
  accent: '#6366F1',       // インディゴ（CTAボタン等）
  background: '#1A202C',   // ダークBG
  backgroundLight: '#2D3748',
  text: '#E2E8F0',         // ライトグレー（本文）
  textMuted: '#A0AEC0',    // ミュートテキスト
  hoo: '#FFFFFF',          // Hooは白ラインアート
  success: '#48BB78',      // 成功
  error: '#F56565',        // エラー
};

// リール回転（常時）
const reelRotation = (frame / fps) * 30; // 1秒で30度

// 首傾げ（curious時）
const tilt = spring({
  frame: frame - startFrame,
  fps,
  config: { damping: 15, stiffness: 80 },
}) * 15;

// リール高速回転（recording/happy時）
const fastRotation = (frame / fps) * 180;

// テープ流れ（strokeDashoffsetで表現）
const tapeOffset = (frame / fps) * 50;

構成:
├── Hook (0-5秒)
│   └── 問題提起テキスト + Hooが右下から登場
├── Problem (5-12秒)
│   └── 課題の可視化 + Hoo心配顔
├── Solution (12-25秒)
│   └── MUEDnote機能デモ + Hooが説明
└── CTA (25-30秒)
    └── ダウンロード促し + Hoo喜び

MUEDnoteの30秒プロモ動画を作成。
Hook: "音楽制作、記録してる？"
Problem: アイデアが消えていく様子
Solution: MUEDnoteの3つの機能をハイライト
CTA: App Storeへ誘導
Hooを各シーンで使用。

構成:
├── タイトル (0-3秒): 機能名 + アイコン
├── デモ (3-12秒): 操作画面のアニメーション
└── 締め (12-15秒): Hoo「ほほう」+ ロゴ

構成:
├── 導入 (0-5秒): Hoo挨拶「こんにちは！」
├── ステップ1 (5-20秒): 最初の操作説明
├── ステップ2 (20-35秒): 次の操作説明
├── ステップ3 (35-50秒): 最後の操作説明
└── まとめ (50-60秒): Hoo「ほほう、簡単でしょう？」

muednote-videos/           # 別ディレクトリ推奨
├── src/
│   ├── Root.tsx
│   ├── compositions/
│   │   ├── PromoVideo.tsx
│   │   ├── FeatureDemo.tsx
│   │   └── Tutorial.tsx
│   ├── components/
│   │   ├── Hoo/
│   │   │   ├── HooCharacter.tsx
│   │   │   ├── HooExpressions.tsx
│   │   │   └── animations.ts
│   │   ├── Text/
│   │   │   ├── TitleText.tsx
│   │   │   ├── TypewriterText.tsx
│   │   │   └── HighlightText.tsx
│   │   ├── Transitions/
│   │   │   ├── FadeSlide.tsx
│   │   │   ├── ScaleIn.tsx
│   │   │   └── WipeTransition.tsx
│   │   └── UI/
│   │       ├── PhoneMockup.tsx
│   │       ├── AppStoreBadge.tsx
│   │       └── Logo.tsx
│   ├── styles/
│   │   └── theme.ts
│   └── utils/
│       └── animations.ts
├── public/
│   └── assets/           # ロゴ、スクリーンショット等
└── out/                  # レンダリング出力

const FadeSlideIn: React.FC<{children: React.ReactNode; delay?: number}> = ({
  children,
  delay = 0,
}) => {
  const frame = useCurrentFrame();
  const adjustedFrame = frame - delay;

  const opacity = interpolate(adjustedFrame, [0, 20], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  const translateY = interpolate(adjustedFrame, [0, 20], [30, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity, transform: `translateY(${translateY}px)` }}>
      {children}
    </div>
  );
};

const TypewriterText: React.FC<{text: string; startFrame?: number}> = ({
  text,
  startFrame = 0,
}) => {
  const frame = useCurrentFrame();
  const adjustedFrame = frame - startFrame;

  const charsToShow = Math.floor(
    interpolate(adjustedFrame, [0, text.length * 3], [0, text.length], {
      extrapolateRight: 'clamp',
    })
  );

  return <span>{text.slice(0, charsToShow)}</span>;
};

const scaleValue = spring({
  frame: frame - delay,
  fps,
  config: {
    damping: 10,
    stiffness: 100,
    mass: 0.5,
  },
});

npx remotion render src/index.ts CompositionName out/video.mp4

npx remotion render src/index.ts CompositionName out/video-hq.mp4 \
  --codec=h264 \
  --quality=100

undefined

undefined

npx remotion render src/index.ts ShortLoop out/loop.gif \
  --codec=gif