When to use
- Process, decision tree, and workflow explanation card
- Visualizing structures with multiple branches and connecting lines
- 톤: tech, brand (process explanation)
- Recommended duration: 6–8초
Install
npx hyperframes add flowchart
→ compositions/flowchart.html.
Wiring
<div data-composition-src="compositions/flowchart.html"
data-start="10" data-duration="6"
data-track-index="0"
data-width="1080" data-height="1350">
</div>
Parameters
- Nodes, edges, and layout are edited in the SVG inside the block
짝
- Good fit:
cinematic-zoomenter with (zoom in to focus on the flow) - Avoid:
glitch,destruction— the structure gets disrupted