History Remix

Composed scene template inspired by the Remotion prompt “History”.

Source: Remotion Prompt Gallery

prompt-remixes4 scenesremotion-promptgallery-importshiam56history

Save

Create a 1920x1080 da…

12K

Tempo

15K

Canvas

Full Sequence

4 scenes

Title Slide

90f

Scene 1

Prompt Remix

History

Create a 1920x1080 dark-themed (#1A1A2E) composition called 'BarLineChart' with a combinati…

Stat Counter

120f

Scene 2

Create a 1920x1080 da…

12K

Tempo

15K

Canvas

List Reveal

105f

Scene 3

Scene beats

Create a 1920x1080 dark-themed (#1A1A2E) composition called 'BarLineChart' with a combi…

Pick reusable scene primitives

Compose a clearer story arc

Preserve the motion direction

Ship as a reusable template

Gradient Text

90f

Scene 4

History

Prompted by Shiam56 with ```tsx import React from "react"; import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Sequence } from "remotion"; import { evolvePath } from "@remotion/paths"; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]; const revenue = [8000, 12000, 15000, 11000, 18000, 22000]; const conversionRate = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2]; const CHART_WIDTH = 1400; const CHART_HEIGHT = 600; const BAR_WIDTH = 80; const MAX_REVENUE = 25000; const CHART_LEFT = 200; const CHART_BOTTOM = 900; export const BarLineChart: React.FC = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Spring configuration for smooth animation const springConfig = { damping: 100, stiffness: 100, mass: 0.8, }; // Calculate line path const barSpacing = CHART_WIDTH / revenue.length; const linePoints = revenue.map((_, i) => { const x = CHART_LEFT + i * barSpacing + barSpacing / 2; const y = CHART_BOTTOM - (conversionRate[i] / 5) * CHART_HEIGHT; return { x, y }; }); // Create SVG path const linePath = linePoints .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`) .join(" "); // Line animation progress (starts after bars begin, trails behind) const lineProgress = spring({ fps, frame: frame - 20, config: { ...springConfig, damping: 50 }, }); // Get stroke-dasharray and offset for line drawing effect const lineEvolution = linePath ? evolvePath(Math.min(lineProgress, 1), linePath) : { strokeDasharray: "0", strokeDashoffset: 0 }; // Pulse animation for the dot marker const pulse = spring({ fps, frame: frame - 100, config: { damping: 5, stiffness: 150, mass: 0.5 }, }); const dotScale = 1 + pulse * 0.3; // Get current tip position based on progress const getTipPosition = () => { const totalPoints = linePoints.length - 1; const exactIndex = lineProgress * totalPoints; const index = Math.floor(exactIndex); const nextIndex = Math.min(index + 1, totalPoints); const localProgress = exactIndex - index; if (index >= linePoints.length) return linePoints[linePoints.length - 1]; const current = linePoints[index]; const next = linePoints[nextIndex]; return { x: interpolate(localProgress, [0, 1], [current.x, next.x]), y: interpolate(localProgress, [0, 1], [current.y, next.y]), }; }; const tipPosition = getTipPosition(); return ( {/* Grid lines */} {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => ( ))} {/* Y-axis labels */} {[0, 6250, 12500, 18750, 25000].map((val, i) => ( ${val / 1000}K ))} {/* Conversion rate axis labels */} {[0, 1.25, 2.5, 3.75, 5].map((val, i) => ( {val}% ))} {/* Bars with sequential spring animation */} {revenue.map((rev, i) => { const barStartFrame = i * 12; // Stagger by 12 frames with overlap const barProgress = spring({ fps, frame: frame - barStartFrame, config: springConfig, }); const barHeight = (rev / MAX_REVENUE) * CHART_HEIGHT * barProgress; const x = CHART_LEFT + i * barSpacing + (barSpacing - BAR_WIDTH) / 2; const y = CHART_BOTTOM - barHeight; return ( {/* Revenue label */} {barProgress > 0.8 && ( ${rev / 1000}K )} ); })} {/* X-axis labels */} {months.map((month, i) => { const x = CHART_LEFT + i * barSpacing + barSpacing / 2; return ( {month} ); })} {/* Conversion rate line with glow effect */} {/* Pulsing dot marker at line tip */} {lineProgress > 0 && ( )} ); }; ``` Register in your `Root.tsx`: ```tsx ``` Opus 4.5

<iframe
  src="https://motioness.com/embed/prompt-history?scenePlan=%5B%7B%22sceneId%22%3A%22title-slide%22%2C%22durationInFrames%22%3A90%2C%22offset%22%3A0%2C%22props%22%3A%7B%22title%22%3A%22%7B%7Btitle%7D%7D%22%2C%22subtitle%22%3A%22%7B%7Bsubtitle%7D%7D%22%2C%22label%22%3A%22Prompt+Remix%22%2C%22layout%22%3A%22left-aligned%22%7D%7D%2C%7B%22sceneId%22%3A%22stat-counter%22%2C%22durationInFrames%22%3A120%2C%22offset%22%3A0%2C%22props%22%3A%7B%22stat1Value%22%3A8%2C%22stat1Label%22%3A%22Create+a+1920x1080+da%E2%80%A6%22%2C%22stat1Suffix%22%3A%22K%22%2C%22stat2Value%22%3A12%2C%22stat2Label%22%3A%22Tempo%22%2C%22stat2Suffix%22%3A%22K%22%2C%22stat3Value%22%3A15%2C%22stat3Label%22%3A%22Canvas%22%2C%22stat3Suffix%22%3A%22K%22%7D%7D%2C%7B%22sceneId%22%3A%22list-reveal%22%2C%22durationInFrames%22%3A105%2C%22offset%22%3A0%2C%22props%22%3A%7B%22title%22%3A%22Scene+beats%22%2C%22style%22%3A%22checkmarks%22%2C%22item1%22%3A%22Create+a+1920x1080+dark-themed+%28%231A1A2E%29+composition+called+%27BarLineChart%27+with+a+combi%E2%80%A6%22%2C%22item2%22%3A%22Pick+reusable+scene+primitives%22%2C%22item3%22%3A%22Compose+a+clearer+story+arc%22%2C%22item4%22%3A%22Preserve+the+motion+direction%22%2C%22item5%22%3A%22Ship+as+a+reusable+template%22%7D%7D%2C%7B%22sceneId%22%3A%22gradient-text%22%2C%22durationInFrames%22%3A90%2C%22offset%22%3A0%2C%22props%22%3A%7B%22text%22%3A%22%7B%7Btitle%7D%7D%22%2C%22subtitle%22%3A%22Prompted+by+%7B%7Bauthor%7D%7D+with+%60%60%60tsx+import+React+from+%5C%22react%5C%22%3B+import+%7B+AbsoluteFill%2C+useCurrentFrame%2C+useVideoConfig%2C+spring%2C+interpolate%2C+Sequence+%7D+from+%5C%22remotion%5C%22%3B+import+%7B+evolvePath+%7D+from+%5C%22%40remotion%2Fpaths%5C%22%3B+const+months+%3D+%5B%5C%22Jan%5C%22%2C+%5C%22Feb%5C%22%2C+%5C%22Mar%5C%22%2C+%5C%22Apr%5C%22%2C+%5C%22May%5C%22%2C+%5C%22Jun%5C%22%5D%3B+const+revenue+%3D+%5B8000%2C+12000%2C+15000%2C+11000%2C+18000%2C+22000%5D%3B+const+conversionRate+%3D+%5B2.1%2C+2.8%2C+3.2%2C+2.9%2C+3.8%2C+4.2%5D%3B+const+CHART_WIDTH+%3D+1400%3B+const+CHART_HEIGHT+%3D+600%3B+const+BAR_WIDTH+%3D+80%3B+const+MAX_REVENUE+%3D+25000%3B+const+CHART_LEFT+%3D+200%3B+const+CHART_BOTTOM+%3D+900%3B+export+const+BarLineChart%3A+React.FC+%3D+%28%29+%3D%3E+%7B+const+frame+%3D+useCurrentFrame%28%29%3B+const+%7B+fps+%7D+%3D+useVideoConfig%28%29%3B+%2F%2F+Spring+configuration+for+smooth+animation+const+springConfig+%3D+%7B+damping%3A+100%2C+stiffness%3A+100%2C+mass%3A+0.8%2C+%7D%3B+%2F%2F+Calculate+line+path+const+barSpacing+%3D+CHART_WIDTH+%2F+revenue.length%3B+const+linePoints+%3D+revenue.map%28%28_%2C+i%29+%3D%3E+%7B+const+x+%3D+CHART_LEFT+%2B+i+*+barSpacing+%2B+barSpacing+%2F+2%3B+const+y+%3D+CHART_BOTTOM+-+%28conversionRate%5Bi%5D+%2F+5%29+*+CHART_HEIGHT%3B+return+%7B+x%2C+y+%7D%3B+%7D%29%3B+%2F%2F+Create+SVG+path+const+linePath+%3D+linePoints+.map%28%28p%2C+i%29+%3D%3E+%60%24%7Bi+%3D%3D%3D+0+%3F+%5C%22M%5C%22+%3A+%5C%22L%5C%22%7D+%24%7Bp.x%7D+%24%7Bp.y%7D%60%29+.join%28%5C%22+%5C%22%29%3B+%2F%2F+Line+animation+progress+%28starts+after+bars+begin%2C+trails+behind%29+const+lineProgress+%3D+spring%28%7B+fps%2C+frame%3A+frame+-+20%2C+config%3A+%7B+...springConfig%2C+damping%3A+50+%7D%2C+%7D%29%3B+%2F%2F+Get+stroke-dasharray+and+offset+for+line+drawing+effect+const+lineEvolution+%3D+linePath+%3F+evolvePath%28Math.min%28lineProgress%2C+1%29%2C+linePath%29+%3A+%7B+strokeDasharray%3A+%5C%220%5C%22%2C+strokeDashoffset%3A+0+%7D%3B+%2F%2F+Pulse+animation+for+the+dot+marker+const+pulse+%3D+spring%28%7B+fps%2C+frame%3A+frame+-+100%2C+config%3A+%7B+damping%3A+5%2C+stiffness%3A+150%2C+mass%3A+0.5+%7D%2C+%7D%29%3B+const+dotScale+%3D+1+%2B+pulse+*+0.3%3B+%2F%2F+Get+current+tip+position+based+on+progress+const+getTipPosition+%3D+%28%29+%3D%3E+%7B+const+totalPoints+%3D+linePoints.length+-+1%3B+const+exactIndex+%3D+lineProgress+*+totalPoints%3B+const+index+%3D+Math.floor%28exactIndex%29%3B+const+nextIndex+%3D+Math.min%28index+%2B+1%2C+totalPoints%29%3B+const+localProgress+%3D+exactIndex+-+index%3B+if+%28index+%3E%3D+linePoints.length%29+return+linePoints%5BlinePoints.length+-+1%5D%3B+const+current+%3D+linePoints%5Bindex%5D%3B+const+next+%3D+linePoints%5BnextIndex%5D%3B+return+%7B+x%3A+interpolate%28localProgress%2C+%5B0%2C+1%5D%2C+%5Bcurrent.x%2C+next.x%5D%29%2C+y%3A+interpolate%28localProgress%2C+%5B0%2C+1%5D%2C+%5Bcurrent.y%2C+next.y%5D%29%2C+%7D%3B+%7D%3B+const+tipPosition+%3D+getTipPosition%28%29%3B+return+%28+%7B%2F*+Grid+lines+*%2F%7D+%7B%5B0%2C+0.25%2C+0.5%2C+0.75%2C+1%5D.map%28%28ratio%2C+i%29+%3D%3E+%28+%29%29%7D+%7B%2F*+Y-axis+labels+*%2F%7D+%7B%5B0%2C+6250%2C+12500%2C+18750%2C+25000%5D.map%28%28val%2C+i%29+%3D%3E+%28+%24%7Bval+%2F+1000%7DK+%29%29%7D+%7B%2F*+Conversion+rate+axis+labels+*%2F%7D+%7B%5B0%2C+1.25%2C+2.5%2C+3.75%2C+5%5D.map%28%28val%2C+i%29+%3D%3E+%28+%7Bval%7D%25+%29%29%7D+%7B%2F*+Bars+with+sequential+spring+animation+*%2F%7D+%7Brevenue.map%28%28rev%2C+i%29+%3D%3E+%7B+const+barStartFrame+%3D+i+*+12%3B+%2F%2F+Stagger+by+12+frames+with+overlap+const+barProgress+%3D+spring%28%7B+fps%2C+frame%3A+frame+-+barStartFrame%2C+config%3A+springConfig%2C+%7D%29%3B+const+barHeight+%3D+%28rev+%2F+MAX_REVENUE%29+*+CHART_HEIGHT+*+barProgress%3B+const+x+%3D+CHART_LEFT+%2B+i+*+barSpacing+%2B+%28barSpacing+-+BAR_WIDTH%29+%2F+2%3B+const+y+%3D+CHART_BOTTOM+-+barHeight%3B+return+%28+%7B%2F*+Revenue+label+*%2F%7D+%7BbarProgress+%3E+0.8+%26%26+%28+%24%7Brev+%2F+1000%7DK+%29%7D+%29%3B+%7D%29%7D+%7B%2F*+X-axis+labels+*%2F%7D+%7Bmonths.map%28%28month%2C+i%29+%3D%3E+%7B+const+x+%3D+CHART_LEFT+%2B+i+*+barSpacing+%2B+barSpacing+%2F+2%3B+return+%28+%7Bmonth%7D+%29%3B+%7D%29%7D+%7B%2F*+Conversion+rate+line+with+glow+effect+*%2F%7D+%7B%2F*+Pulsing+dot+marker+at+line+tip+*%2F%7D+%7BlineProgress+%3E+0+%26%26+%28+%29%7D+%29%3B+%7D%3B+%60%60%60+Register+in+your+%60Root.tsx%60%3A+%60%60%60tsx+%60%60%60+Opus+4.5%22%7D%7D%5D"
  style="border:none;border-radius:12px;width:100%;aspect-ratio:1920/1080"
  loading="lazy"
  title="prompt-history animation"
></iframe>

Theme

Configuration

Title

Subtitle

Summary

Cta Text

Author

Tool Used

Model Used

Primary Color

Background Color

Accent Color

Scenes

Scene 1

Scene 2

Scene 3

Scene 4

{
  "text": "{{title}}",
  "subtitle": "Prompted by {{author}} with ```tsx import React from \"react\"; import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate, Sequence } from \"remotion\"; import { evolvePath } from \"@remotion/paths\"; const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"]; const revenue = [8000, 12000, 15000, 11000, 18000, 22000]; const conversionRate = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2]; const CHART_WIDTH = 1400; const CHART_HEIGHT = 600; const BAR_WIDTH = 80; const MAX_REVENUE = 25000; const CHART_LEFT = 200; const CHART_BOTTOM = 900; export const BarLineChart: React.FC = () => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Spring configuration for smooth animation const springConfig = { damping: 100, stiffness: 100, mass: 0.8, }; // Calculate line path const barSpacing = CHART_WIDTH / revenue.length; const linePoints = revenue.map((_, i) => { const x = CHART_LEFT + i * barSpacing + barSpacing / 2; const y = CHART_BOTTOM - (conversionRate[i] / 5) * CHART_HEIGHT; return { x, y }; }); // Create SVG path const linePath = linePoints .map((p, i) => `${i === 0 ? \"M\" : \"L\"} ${p.x} ${p.y}`) .join(\" \"); // Line animation progress (starts after bars begin, trails behind) const lineProgress = spring({ fps, frame: frame - 20, config: { ...springConfig, damping: 50 }, }); // Get stroke-dasharray and offset for line drawing effect const lineEvolution = linePath ? evolvePath(Math.min(lineProgress, 1), linePath) : { strokeDasharray: \"0\", strokeDashoffset: 0 }; // Pulse animation for the dot marker const pulse = spring({ fps, frame: frame - 100, config: { damping: 5, stiffness: 150, mass: 0.5 }, }); const dotScale = 1 + pulse * 0.3; // Get current tip position based on progress const getTipPosition = () => { const totalPoints = linePoints.length - 1; const exactIndex = lineProgress * totalPoints; const index = Math.floor(exactIndex); const nextIndex = Math.min(index + 1, totalPoints); const localProgress = exactIndex - index; if (index >= linePoints.length) return linePoints[linePoints.length - 1]; const current = linePoints[index]; const next = linePoints[nextIndex]; return { x: interpolate(localProgress, [0, 1], [current.x, next.x]), y: interpolate(localProgress, [0, 1], [current.y, next.y]), }; }; const tipPosition = getTipPosition(); return ( {/* Grid lines */} {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => ( ))} {/* Y-axis labels */} {[0, 6250, 12500, 18750, 25000].map((val, i) => ( ${val / 1000}K ))} {/* Conversion rate axis labels */} {[0, 1.25, 2.5, 3.75, 5].map((val, i) => ( {val}% ))} {/* Bars with sequential spring animation */} {revenue.map((rev, i) => { const barStartFrame = i * 12; // Stagger by 12 frames with overlap const barProgress = spring({ fps, frame: frame - barStartFrame, config: springConfig, }); const barHeight = (rev / MAX_REVENUE) * CHART_HEIGHT * barProgress; const x = CHART_LEFT + i * barSpacing + (barSpacing - BAR_WIDTH) / 2; const y = CHART_BOTTOM - barHeight; return ( {/* Revenue label */} {barProgress > 0.8 && ( ${rev / 1000}K )} ); })} {/* X-axis labels */} {months.map((month, i) => { const x = CHART_LEFT + i * barSpacing + barSpacing / 2; return ( {month} ); })} {/* Conversion rate line with glow effect */} {/* Pulsing dot marker at line tip */} {lineProgress > 0 && ( )} ); }; ``` Register in your `Root.tsx`: ```tsx ``` Opus 4.5"
}

AI Adjust

Composition

Width

Height

FPS

Duration