Comparisons Block

Before After Story

A transformation block that contrasts current state with improved future state.

before-after-story1 slidebalanced density

Before / After

From manual handoffs to guided flow

Show contrast around a single axis of improvement.

Before

Before

After

After

Use Before After Story in your next deck — for free

STORYD writes a presentation around your topic and applies Before After Story across every slide. No template hunting, no copy-paste.

Build a deck with Before After Story →

Free, no card. Exports to PPTX.

OPF Config

blocks:before-after-story
Open Presentation Format
{
  "$schema": "https://pptx.dev/schema/opf/v1",
  "version": "1.0",
  "meta": {
    "title": "Before After Story",
    "subtitle": "A transformation block that contrasts current state with improved future state.",
    "purpose": "Make a transformation visible through current and future states.",
    "narrative": {
      "id": "change-story"
    },
    "keyMessages": [
      "The current state is costly.",
      "The future state is simpler.",
      "The delta is meaningful."
    ],
    "tone": "persuasive",
    "tags": [
      "content-block",
      "before-after-story"
    ]
  },
  "design": {
    "colors": {
      "scheme": "golden-yellow"
    },
    "fonts": {
      "scheme": "poppins"
    },
    "background": {
      "type": "gradient",
      "gradient": {
        "angle": 135,
        "stops": [
          {
            "color": "#fffaf0",
            "position": 0
          },
          {
            "color": "#f7fafc",
            "position": 1
          }
        ]
      }
    },
    "layoutPreferences": {
      "density": "balanced",
      "alignment": "left",
      "animations": false,
      "slideNumbers": false
    }
  },
  "slides": [
    {
      "id": "before-after-story",
      "layout": "before-after",
      "section": "Before After Story",
      "elements": [
        {
          "id": "before-after-story-title",
          "type": "text",
          "slot": "title",
          "content": {
            "text": "From manual handoffs to guided flow"
          },
          "style": {
            "fontSize": 34,
            "alignment": "left"
          }
        },
        {
          "id": "before-after-story-subtitle",
          "type": "text",
          "slot": "subtitle",
          "content": {
            "text": "A clear contrast between current and future state."
          },
          "style": {
            "fontSize": 16,
            "lineHeight": 1.3
          }
        },
        {
          "id": "before-after-story-points",
          "type": "text",
          "slot": "body",
          "content": {
            "bullets": [
              "Before: fragmented, slow, hard to measure",
              "After: guided, faster, measurable"
            ]
          },
          "style": {
            "fontSize": 15,
            "lineHeight": 1.25
          }
        }
      ],
      "notes": "A transformation block that contrasts current state with improved future state."
    }
  ]
}
Open in OPF Playground

Preview this config live at pptx.dev/playground.

Use Case

Use when the deck needs to make change tangible.

When to Use

For transformation, product, process, and case-study narratives.

When to Avoid

Avoid when the change is incremental and a timeline would be clearer.

Block Structure

before-after

From manual handoffs to guided flow

A clear contrast between current and future state.

  • -Before: fragmented, slow, hard to measure
  • -After: guided, faster, measurable

Best Practices

1

Use the same criteria on both sides.

2

Avoid turning each side into a dense list.

3

Make the improvement measurable where possible.

Playground deep link: config=blocks:before-after-story