Docs: Adjust assets for Storybook 9

[jonniebigodes]

What I did

With this pull request, the documentation's assets were updated to reflect the upcoming release, including the new UI and changes.

What was done:

• Updated the assets (including videos)
• Cleaned up the documentation's assets directory for old, unused assets that were still in place

Checklist for Contributors

Testing

Manual testing

1. Review updated assets in the dedicated deploy preview: https://deploy-preview-286--storybook-frontpage.netlify.app/docs

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Updates documentation assets for Storybook 9 by replacing video demonstrations with static images across multiple documentation pages while maintaining the same informational content.

• Replaced video with static PNG in docs/essentials/measure-and-outline.mdx for measure and outline features
• Updated docs/essentials/backgrounds.mdx to use static image instead of video demonstration
• Changed video reference in docs/get-started/why-storybook.mdx from '7.0-storybook-hero-video.mp4' to 'histogram-stories-optimized.mp4'
• Converted video to static image in docs/essentials/viewport.mdx for viewport feature demonstration
• Updated docs/addons/writing-addons.mdx to use static image for addon's finished state

[greptile-apps]

_{6 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit dde21e1.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 26s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-30 19:40:52 UTC

[kylegach]

Could be deduped with get-started/example-button-args.png

[kylegach]

Excellent work!