R-004 Video Template complex

How to create a bar chart reveal 棒グラフリビールの作り方

Remotion video template: monthly revenue bars grow upward one by one with count-up numbers. Violet accent highlights the peak bar. 1920×1080 / 30fps / 10s. 月次売上の棒グラフが左から1本ずつ伸び上がりながら数値がカウントアップするチャートリビールシーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。

remotion video chart bar chart reveal count-up animation motion template tsx react

ライブデモ Live Demo

1920 × 1080  ·  30 fps  ·  10 s  ·  H.264

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

何ができるかWhat it does

Remotion video template: monthly revenue bars grow upward one by one with count-up numbers. Violet accent highlights the peak bar. 1920×1080 / 30fps / 10s.

月次売上の棒グラフが左から1本ずつ伸び上がりながら数値がカウントアップするチャートリビールシーンの Remotion 動画テンプレ。1920×1080 / 30fps / 10秒。

どこで使うかWhere to use

social media content, product demo, marketing video

月次レポート、収益発表、データジャーナリズム、マーケティング分析動画

特徴Key features

Remotion bar chart video: monthly revenue bars grow upward sequentially with count-up numbers. Violet accent highlights the peak bar. Clean data storytelling motion design. 1920×1080 / 30fps / 10s.

Remotionバーチャート動画：月次収益バーが順次上向きに成長し数値がカウントアップ。バイオレットアクセントがピークバーをハイライト。クリーンなデータストーリーテリングモーションデザイン。1920×1080・30fps・10秒。

調整可能パラメータ Adjustable Parameters

Parameter Default Description

実装コード Implementation Code 

import React from 'react';
import { Easing, interpolate, spring } from 'remotion';

interface Theme {
  text:      string;
  barColor:  string;
  peakColor: string;
  radius:    number;
}

interface ChartBarProps {
  frame:         number;
  fps:           number;
  appearFrame:   number;
  value:         number;
  maxValue:      number;
  isPeak:        boolean;
  countDuration: number;
  theme:         Theme;
}

// Value label: "$48k", "$89k", etc.
function formatK(raw: number): string {
  return '
/* Global reset for Remotion canvas */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * Font strategy
 * ──────────────────────────────────────────────────────────────────────────
 * Default: system-ui — no network dependency, safe for Lambda / CI rendering.
 *
 * To use Inter in local Remotion Studio, uncomment the @import below.
 * For Lambda / serverless rendering, use @remotion/google-fonts or place
 * Inter.woff2 in public/ and reference it via staticFile().
 *
 * @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
 */

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

仕組みHow it works

Each bar is a React component receiving a target height and a delay. Remotion's spring() animates scaleY from 0 to 1 with the delay applied via frame offset. A count-up label above each bar uses interpolate() mapped to the bar's final value. The peak bar gets an accent color and a highlight badge via conditional styling.

各バーはターゲット高さと遅延を受け取るReactコンポーネント。Remotionのspring()がフレームオフセットで適用された遅延でscaleYを0から1にアニメーション。各バー上のカウントアップラベルはバーの最終値にマッピングされたinterpolate()を使用。ピークバーは条件付きスタイリングでアクセントカラーとハイライトバッジを取得。

カスタマイズ方法Customization

Update the data array with your monthly values and labels. Change barColor and accentColor to match your brand. Add a Y-axis and grid lines for a more formal chart style.

dataArrayを月次値とラベルで更新。barColorとaccentColorをブランドに合わせて変更。より正式なチャートスタイルのためにY軸とグリッドラインを追加。

注意点Caveats

Ensure bar labels are readable at the final video resolution — test with actual data values that might be much longer than placeholder values. Use monospace fonts for numbers to prevent layout shift during count-up.

最終動画解像度でバーラベルが読めることを確認してください — プレースホルダー値よりはるかに長い可能性がある実際のデータ値でテストしてください。カウントアップ中のレイアウトシフトを防ぐために数値にモノスペースフォントを使用してください。

よくある質問 Frequently Asked Questions

How to customize the bar chart reveal? Bar Chart Revealをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the bar chart reveal in React? ReactでBar Chart Revealを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of bar chart reveal? Bar Chart Revealのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

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

+ Math.round(raw / 1000) + 'k'; } export const ChartBar: React.FC<ChartBarProps> = ({ frame, fps, appearFrame, value, maxValue, isPeak, countDuration, theme, }) => { const relFrame = frame - appearFrame; // ── Entrance: spring grow ───────────────────────────────────────────────── const growSpring = spring({ frame: relFrame, fps, config: { damping: 18, stiffness: 60, mass: 1 }, }); const targetPct = (value / maxValue) * 100; const barHeightPct = interpolate(growSpring, [0, 1], [0, targetPct]); // ── Label opacity ───────────────────────────────────────────────────────── const labelOpacity = interpolate(growSpring, [0, 0.25], [0, 1], { extrapolateRight: 'clamp' }); // ── Count-up ────────────────────────────────────────────────────────────── const countProgress = interpolate(relFrame, [0, countDuration], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad), }); const displayValue = formatK(value * countProgress); const accent = isPeak ? theme.peakColor : theme.barColor; const accentLight = isPeak ? '#a78bfa' : '#818cf8'; return ( <div style={{ flex: 1, height: '100%', display: 'flex', alignItems: 'flex-end', position: 'relative', }}> {/* Value label above bar top */} <div style={{ position: 'absolute', bottom: `${barHeightPct}%`, left: '50%', transform: 'translateX(-50%) translateY(-10px)', fontSize: 22, fontWeight: 700, color: isPeak ? theme.peakColor : theme.text, opacity: labelOpacity, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', }}> {displayValue} </div> {/* Bar */} <div style={{ width: '100%', height: `${barHeightPct}%`, background: `linear-gradient(to top, ${accent} 0%, ${accentLight} 100%)`, borderRadius: `${theme.radius}px ${theme.radius}px 0 0`, boxShadow: isPeak ? `0 -4px 20px ${theme.peakColor}44` : `0 -2px 12px ${theme.barColor}22`, }} /> </div> ); }; 
/* Global reset for Remotion canvas */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * Font strategy
 * ──────────────────────────────────────────────────────────────────────────
 * Default: system-ui — no network dependency, safe for Lambda / CI rendering.
 *
 * To use Inter in local Remotion Studio, uncomment the @import below.
 * For Lambda / serverless rendering, use @remotion/google-fonts or place
 * Inter.woff2 in public/ and reference it via staticFile().
 *
 * @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
 */

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

仕組みHow it works

Each bar is a React component receiving a target height and a delay. Remotion's spring() animates scaleY from 0 to 1 with the delay applied via frame offset. A count-up label above each bar uses interpolate() mapped to the bar's final value. The peak bar gets an accent color and a highlight badge via conditional styling.

各バーはターゲット高さと遅延を受け取るReactコンポーネント。Remotionのspring()がフレームオフセットで適用された遅延でscaleYを0から1にアニメーション。各バー上のカウントアップラベルはバーの最終値にマッピングされたinterpolate()を使用。ピークバーは条件付きスタイリングでアクセントカラーとハイライトバッジを取得。

カスタマイズ方法Customization

Update the data array with your monthly values and labels. Change barColor and accentColor to match your brand. Add a Y-axis and grid lines for a more formal chart style.

dataArrayを月次値とラベルで更新。barColorとaccentColorをブランドに合わせて変更。より正式なチャートスタイルのためにY軸とグリッドラインを追加。

注意点Caveats

Ensure bar labels are readable at the final video resolution — test with actual data values that might be much longer than placeholder values. Use monospace fonts for numbers to prevent layout shift during count-up.

最終動画解像度でバーラベルが読めることを確認してください — プレースホルダー値よりはるかに長い可能性がある実際のデータ値でテストしてください。カウントアップ中のレイアウトシフトを防ぐために数値にモノスペースフォントを使用してください。

よくある質問 Frequently Asked Questions

How to customize the bar chart reveal? Bar Chart Revealをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the bar chart reveal in React? ReactでBar Chart Revealを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of bar chart reveal? Bar Chart Revealのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

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