> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryflowy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Storyboard Node

> Plan multi-scene narratives with a story bible and fan out to generations.

export const VideoPlayer = ({src, poster, aspectRatio = "16 / 9", title, className = ""}) => {
  const [playing, setPlaying] = useState(false);
  if (playing) {
    return <div className={`not-prose relative mx-auto my-6 w-full max-w-screen-md overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 ${className}`} style={{
      aspectRatio
    }}>
        <video src={src} controls autoPlay playsInline className="h-full w-full object-contain" />
      </div>;
  }
  return <button type="button" aria-label={title ? `Play video: ${title}` : "Play video"} style={{
    aspectRatio
  }} className={`not-prose group relative mx-auto my-6 block w-full max-w-screen-md cursor-pointer overflow-hidden rounded-2xl border border-gray-950/10 bg-gray-100 dark:border-white/10 dark:bg-white/5 ${className}`} onClick={() => setPlaying(true)}>
      <img src={poster} alt={title || "Video thumbnail"} className="h-full w-full cursor-pointer object-cover" />
      <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/80 to-transparent sm:h-28" />
      <div className="absolute bottom-6 flex w-full items-center justify-between px-6">
        <p className="max-w-sm text-left text-lg font-semibold leading-tight text-white">
          {title}
        </p>
        <div className="rounded-full p-3 shadow-lg transition-all duration-300 group-hover:scale-110 group-active:scale-95" style={{
    backgroundColor: "#5C9987"
  }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">
            <path d="M8 5v14l11-7L8 5z" />
          </svg>
        </div>
      </div>
    </button>;
};

The Storyboard node turns a one-line idea into a structured, scene-by-scene plan — complete with a story bible — and lays out ready-to-run Image nodes for every scene.

<VideoPlayer src="/videos/canvas/node-storyboard.mp4" poster="/images/posters/canvas/node-storyboard.jpg" title="Watch: from a one-line idea to a full storyboard" />

## Generate a storyboard

<Steps>
  <Step title="Describe the story">
    Write a prompt covering the world, the characters, and the beats you want. Connect references — text briefs, images, video, audio — and the storyboard folds them into the plan.
  </Step>

  <Step title="Set the shape">
    Choose the **number of scenes** (up to 24), a **target duration** for the whole sequence, and a **style** — cinematic, anime, documentary, noir, or anything you can name.
  </Step>

  <Step title="Run">
    The node generates the full plan: every scene, plus the story bible that keeps them consistent.
  </Step>
</Steps>

## What you get

Each scene card carries a description and the craft details that make it directable: camera angle, transition, cast, location, motion type, and visual and audio cues. Read the sequence top to bottom and you have the whole film at a glance.

Behind the scenes sits the **story bible** — the characters, locations, story arc, and style the storyboard committed to. Expand **Story bible & references** on the node to review it; it's what keeps scene 12 consistent with scene 2.

## Fan out to generations

Running the storyboard also creates a **Storyboard Scenes** frame beside the node: one Image node per scene, pre-filled with that scene's image prompt and chained in order, with the storyboard wired into the first. From there:

1. **Run** the scene Image nodes to generate the frames — each already knows what its moment looks like.
2. Connect the frames you like into [Video nodes](/canvas/nodes/video) to bring them to motion.
3. Assemble the clips in a [Composition](/canvas/nodes/composition) or take them into [Studio](/studio/overview) for the final cut.

<Tip>
  Iterate cheaply at the plan level before spending credits on video. Rerunning the storyboard with an updated prompt lays out a fresh scene frame next to the previous one, so you can compare versions side by side.
</Tip>