Generate an animated infographic based on the attached reference image.
1. From the attached image, take ONLY the structure/layout: the type of structure (hub-and-spoke, list, decision tree, cards...), how the information is organized, typography, and disposition. Don't use its literal content (text, brands, numbers from the image) — I will provide the actual content separately in point 2.
2. Content for this piece: [CONTENT]
3. Color palette — fixed, do not extract it from the reference image: [DESIGN: Background, ink/text, accent, cards, typography...]
4. Format: 3:4 vertical (960×1280), 30fps. [ASPECT RATIO]
5. Motion methodology (fixed, do not change):
- Every element appears using a spring-type easing hook (damping ~200, mass ~0.6) + interpolate with extrapolateLeft/Right: 'clamp' for opacity/scale/translateY — never linear or instantaneous entrances.
Use this base hook:
```typescript
import {interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
export const useAppear = (appearFrame: number, springDurationInFrames = 18) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const localFrame = frame - appearFrame;
const progress = spring({
frame: localFrame, fps,
config: {damping: 200, mass: 0.6},
durationInFrames: springDurationInFrames,
});
const opacity = interpolate(localFrame, [0, springDurationInFrames], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
});
const scale = interpolate(progress, [0, 1], [0.86, 1]);
const translateY = interpolate(progress, [0, 1], [14, 0]);
return {opacity, scale, translateY};
};
```
- Staggered entrance: each element enters several frames after the previous one, never all at once.
- Connecting lines must animate their `stroke-dashoffset` upon entrance; they should not pop in instantly.
6. Continuous movement, not just entrance animations — this is essential, do not skip it: once all elements have appeared, the connector lines must maintain a continuously moving dashed pattern (infinite loop), as if information were constantly flowing through the nodes.
Technique: on each drawn line, animate `strokeDashoffset` with a value that continuously advances based on the current frame, e.g.:
```typescript
const flowOffset = -((frame * 1.4) % 24);
// applied as strokeDasharray="3 9" strokeDashoffset={flowOffset}
```
7. Mandatory signature/watermark: [SIGNATURE - logo]
8. Process:
- Set up the component structure (Root.tsx at 960×1280, palette.ts, useAppear.ts, and the specific components matching the pattern observed in the image).
- Render a still of a middle frame and show it to me before rendering the full video:
npx remotion still src/index.ts out/preview.png --frame=
- Ensure that no line passes behind text with a transparent background — text cards must always have a solid background.
- Once I approve it, render the final video and convert it to a GIF.
