mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-04-12 20:53:34 +08:00
df76bdfb51
New skill: - remotion-video-creation: 29 domain-specific Remotion rules covering 3D/Three.js, animations, audio, captions, charts, compositions, fonts, GIFs, Lottie, measuring, sequencing, tailwind, text animations, timing, transitions, trimming, and video embedding. Ported from personal skills. Restored: - autonomous-agent-harness/SKILL.md (was in commit but missing from worktree) - lead-intelligence/ (full directory restored from branch commit) Updated: - manifests/install-modules.json: added remotion-video-creation to media-generation - README.md + AGENTS.md: synced counts to 139 skills Catalog validates: 30 agents, 60 commands, 139 skills.
59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
---
|
|
name: charts
|
|
description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
|
|
metadata:
|
|
tags: charts, data, visualization, bar-chart, pie-chart, graphs
|
|
---
|
|
|
|
# Charts in Remotion
|
|
|
|
You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
|
|
|
|
## No animations not powered by `useCurrentFrame()`
|
|
|
|
Disable all animations by third party libraries.
|
|
They will cause flickering during rendering.
|
|
Instead, drive all animations from `useCurrentFrame()`.
|
|
|
|
## Bar Chart Animations
|
|
|
|
See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
|
|
|
|
### Staggered Bars
|
|
|
|
You can animate the height of the bars and stagger them like this:
|
|
|
|
```tsx
|
|
const STAGGER_DELAY = 5;
|
|
const frame = useCurrentFrame();
|
|
const {fps} = useVideoConfig();
|
|
|
|
const bars = data.map((item, i) => {
|
|
const delay = i * STAGGER_DELAY;
|
|
const height = spring({
|
|
frame,
|
|
fps,
|
|
delay,
|
|
config: {damping: 200},
|
|
});
|
|
return <div style={{height: height * item.value}} />;
|
|
});
|
|
```
|
|
|
|
## Pie Chart Animation
|
|
|
|
Animate segments using stroke-dashoffset, starting from 12 o'clock.
|
|
|
|
```tsx
|
|
const frame = useCurrentFrame();
|
|
const {fps} = useVideoConfig();
|
|
|
|
const progress = interpolate(frame, [0, 100], [0, 1]);
|
|
|
|
const circumference = 2 * Math.PI * radius;
|
|
const segmentLength = (value / total) * circumference;
|
|
const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
|
|
|
|
<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
|
|
```
|