Introducing Bento: The Single-File HTML Presentation Powerhouse

Bento is a revolutionary approach to slide decks, condensing an entire PowerPoint-style experience—including editing, viewing, data management, and collaboration—into one solitary .html file.

🎨 Design & Motion Guidelines

To maximize the impact of your Bento presentation, follow these specific implementation strategies:

1. The Hero Slide

For high-impact introductions, utilize a full-bleed image.

• Dimensions: The image should cover the area from $\text{coordinate } (0,0)$ to $(1280,720)$.
• Composition: Layer a scrim rectangle and text on top of the image.
• Animation: Apply a subtle "Ken Burns" drift to prevent the image from feeling static.

// Implementation for the Ken Burns drift
fx: {
  ambient: "kenburns",
  ken: {
    dir: "drift",
    scale: 1.08,
    duration: 20
  }
}

2. Visualizing Flows and Sequences

When depicting a timeline or a connection, avoid static lines. Instead, use dynamic paths.

• Dynamic Paths: Use a line with a looping animation.
• Highlighting: Morph a highlight across the path to guide the viewer's eye.

fx: { loop: { type: "dash-march", ... } }

3. Maintaining Energy and Continuity

• Section Dividers: Every cover or divider slide must feature at least one ambient motion element. A slide should never be "dead static."
• Persistent Elements: For logos or "chrome" (UI elements that repeat), ensure the id remains constant across slides. This allows the element to morph smoothly into its new position rather than abruptly popping into existence.

---

🛠 Final Quality Assurance

Pro Tip: Before exporting your final HTML file, run through this rigorous self-audit to ensure a professional polish.

• Data Visualization: Have I left any numbers as plain text that would be more effective as a chart?
• Morphing Logic: Do consecutive slides discussing the same topic share ids and utilize transition: "morph"?
• Kinetic Energy: Is there at least one motion moment (e.g., a count-up, loop, or ken-burns effect) per section?
• Visual Constraints:
  • Only one accent color used?
  • Maximum of two distinct typefaces?
  • Side margins set to exactly 96px?

════════════════════════════════════════════════════════════════════════ $\rightarrow$ Bento /Slides