skills.rest
vibe-motion
vibe-motionOFFICIAL
Explore all skills by this author →
WebsiteGitHub

remotion-candlestick

Creates animated financial candlestick charts in Remotion using Yahoo Finance OHLC data.

1.2k|78|Updated Mar 17, 2026
Search Tags:#Remotion#K-line#candlestick chart#yahoo finance#canvas rendering#OHLC#stock animation
One-click install
npx skills add https://github.com/vibe-motion/skills --skill remotion-candlestick
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-candlestick
Source: https://github.com/vibe-motion/skills/tree/main/remotion-candlestick
Command: npx skills add https://github.com/vibe-motion/skills --skill remotion-candlestick

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, react, tailwindcss.

What problem does it solve?

Building animated financial K-line (candlestick) chart videos requires coordinating data fetching, per-frame Canvas rendering, and Remotion composition setup, which is tedious to assemble from scratch.

Core Features & Use Cases

  • Yahoo Finance Data Pipeline: Fetches free historical OHLC data (no API key) via the Yahoo Finance Chart API and saves it as local JSON loaded through Remotion's staticFile().
  • Canvas-Based Rendering: Draws candles, wicks, grid lines, axis labels, and progress bars on a high-DPI-aware canvas with a dark trading-terminal color theme.
  • Plugin Architecture: Provides a structured config/timeline/Scene/plugin file layout with render presets, frame-driven animation state, and Studio preview support.
  • Use Case: Produce a 28-second 1920x1080 video showing 40 years of S&P 500 weekly candles with staggered fade-in and grow-from-baseline entrance animations.

Quick Start

Use the remotion-candlestick skill to create an animated S&P 500 weekly candlestick chart video in my Remotion project.

Frequently Asked Questions about remotion-candlestick

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an animated candlestick chart video with Remotion?▼

Fetch OHLC data from the Yahoo Finance Chart API into a local JSON file, then build a Remotion plugin with config, timeline, Scene, and plugin files. The Scene component draws candles on a canvas per frame, and you render with npx remotion render.

How to get free historical stock data without an API key?▼

Yahoo Finance provides free historical OHLC data through its Chart API endpoint at query1.finance.yahoo.com. Request a symbol like %5EGSPC with period timestamps and an interval such as 1wk, 1d, or 1mo, then parse the timestamp and quote arrays.

Why is my Remotion canvas blurry on high-DPI screens?▼

Canvas appears blurry when devicePixelRatio is ignored. Multiply canvas width and height by window.devicePixelRatio and apply ctx.setTransform(dpr, 0, 0, dpr, 0, 0) so drawing coordinates stay in CSS pixels while the backing store matches the display density.

Does Yahoo Finance API have CORS issues in Remotion?▼

Remotion's Node.js headless rendering environment has no CORS restrictions. If browser preview hits CORS errors, pre-fetch the data into a local JSON file and load it with Remotion's staticFile() instead of fetching directly.

What happens when a candlestick chart has too many candles?▼

Candle width shrinks as visible count increases, so enforce a minimum width around 0.6px and a maximum around 8px. When slot width drops below 1px, reduce the gap ratio or aggregate the data into larger time intervals.

Related Skills

Explore More Software Engineering Skills→
DaddyElonMusk69DaddyElonMusk69

candlestick

Detect candlestick patterns in OHLC data and generate trading signals.

Community
Intermediate
cosmicstack-labscosmicstack-labs
364

hyperframes

Create HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.

Official
Advanced
simplefarmer69simplefarmer69
2

crypto-levels

Analyze cryptocurrency support and resistance levels using price data and technical indicators.

Community
Intermediate
sidart10sidart10
1

d3-viz

Generate interactive d3.js visualizations including bar charts, line charts, and network graphs.

Community
Intermediate