> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a faceless explainer

> Turn notes, an article, or a difficult idea into a visual explanation without product footage.

export const ExplainerShapeChooser = () => {
  const shapes = [{
    id: "concept",
    label: "Understand one idea",
    prompt: landing => `/hyperframes Create a 60-second concept explainer from my attached notes.

Open with a question or counterintuitive claim. Reveal the mechanism one layer at a time. The viewer should leave able to say: “${landing}”`
  }, {
    id: "process",
    label: "Follow a process",
    prompt: landing => `/hyperframes Turn my attached notes into a 60-second how-to explainer.

Use one visual stage and show each step in order. The viewer should leave able to say: “${landing}”`
  }, {
    id: "list",
    label: "Remember three points",
    prompt: landing => `/hyperframes Turn my attached notes into a three-part explainer.

Make the three ideas parallel, concrete, and visually distinct. The viewer should leave able to say: “${landing}”`
  }, {
    id: "story",
    label: "Learn through a story",
    prompt: landing => `/hyperframes Turn my attached notes into a story-led explainer.

Teach through one concrete case: setup, tension, turn, resolution, then the general lesson. The viewer should leave able to say: “${landing}”`
  }];
  const [selectedId, setSelectedId] = useState("concept");
  const [landing, setLanding] = useState("Adding road capacity can create more traffic, not less.");
  const selected = shapes.find(shape => shape.id === selectedId) || shapes[0];
  const landingValue = landing.trim() || "State the one idea they should remember.";
  return <div style={{
    margin: "1rem 0 1.5rem"
  }}>
      <div role="group" aria-label="Choose the shape of the explanation" style={{
    display: "flex",
    flexWrap: "wrap",
    gap: "0.5rem",
    marginBottom: "0.9rem"
  }}>
        {shapes.map(shape => {
    const active = shape.id === selected.id;
    return <button key={shape.id} type="button" aria-pressed={active} onClick={() => setSelectedId(shape.id)} style={{
      border: "1px solid currentColor",
      borderRadius: "999px",
      padding: "0.4rem 0.75rem",
      background: active ? "#d8ff5f" : "transparent",
      color: "inherit",
      cursor: "pointer",
      opacity: active ? 1 : 0.7
    }}>
              <span style={{
      color: active ? "#111111" : "inherit",
      fontSize: "0.8125rem",
      fontWeight: 600
    }}>
                {shape.label}
              </span>
            </button>;
  })}
      </div>

      <label htmlFor="explainer-landing" style={{
    display: "block",
    marginBottom: "0.35rem",
    fontSize: "0.8125rem",
    fontWeight: 600
  }}>
        One sentence they should remember
      </label>
      <input id="explainer-landing" type="text" value={landing} onChange={event => setLanding(event.target.value)} style={{
    boxSizing: "border-box",
    width: "100%",
    marginBottom: "0.75rem",
    border: "1px solid currentColor",
    borderRadius: "0.5rem",
    padding: "0.6rem 0.75rem",
    background: "transparent",
    color: "inherit",
    opacity: 0.85
  }} />

      <pre aria-live="polite" style={{
    margin: 0,
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere"
  }}>
        <code style={{
    display: "block",
    maxWidth: "100%",
    whiteSpace: "inherit",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
          {selected.prompt(landingValue)}
        </code>
      </pre>
    </div>;
};

Start from a topic, article, or notes. HyperFrames invents the typography, diagrams, abstract graphics, and data visualization that teach it.

<Frame caption="A short preview from a SpaceX valuation explainer. Every visual was invented from the question and numbers.">
  <video className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-explainer.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-explainer.jpg" autoPlay muted loop playsInline preload="metadata" />
</Frame>

## How should the idea land?

<ExplainerShapeChooser />

Attach or paste the source material with the request. If you supply an approved script, say whether HyperFrames may restructure it or must keep every word.

Use a [product and website video](/guides/product-launch-video) when the real interface should provide the proof. Use [captions or designed overlays](/guides/captions-and-recuts) when existing footage should remain underneath.

## From information to understanding

HyperFrames does not turn each paragraph into a scene. It finds the teaching spine, removes asides, and builds a sequence around the one idea the viewer should retain.

The visuals share one coherent language and develop with the explanation. A diagram should reveal a mechanism; a chart should prove a claim; motion should show what changes.

## Review whether it teaches

* The opening creates a question, tension, or surprise.
* The main idea is clear by the second scene.
* Each body scene advances one mechanism, step, example, or implication.
* Numbers and factual claims match the source.
* The ending lands the sentence you wanted the viewer to remember.

Use [Storyboard](/studio/storyboard) to review the teaching sequence. Use [Studio](/studio) to refine diagrams, type, pacing, animation, and export.

<Card title="Review the storyboard" icon="list-tree" href="/studio/storyboard">
  Check the question, sequence, evidence, and final takeaway.
</Card>