Skip to content

Add before/after GIF demos to README #22

@kiyeonjeon21

Description

@kiyeonjeon21

Goal

Add 3 short GIF demos to README showing CLI command + visual result side by side. This is the highest-impact change for star conversion — visitors need to see what VibeFrame produces.

Proposed GIFs

  1. Silence Cut — Before (raw interview with pauses) → After (clean cut)

    • Command: vibe edit silence-cut interview.mp4 -o clean.mp4
    • Show: timeline comparison or waveform diff
  2. Auto Caption — Plain video → Styled captions burned in

    • Command: vibe edit caption video.mp4 -o captioned.mp4
    • Show: video frame with/without captions
  3. Script-to-Video — Text prompt → Generated video with narration

    • Command: vibe pipeline script-to-video "..." -a 9:16 -o ./output/
    • Show: script text on left, final video frames on right

Implementation

  • Record with OBS or similar, convert to GIF (ffmpeg or gifski)
  • Keep each GIF under 5MB for GitHub rendering
  • Place in docs/assets/ directory
  • Embed in README between Quick Start and MCP sections

Why this matters

Current README has zero visual output. For a video editing tool, this is the #1 conversion blocker. Traffic is 1,253 unique visitors/14d but only ~8% star rate.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions