YouTube Video Page
What's Happening
User navigates to any YouTube video. The video page loads normally with standard YouTube interface. The YTgify extension is active but not yet visible.
User Action
User watches or browses a YouTube video and wants to create a GIF from a specific moment.
GIF Button in Player Controls
What's Happening
The YTgify extension automatically injects a "GIF" button into YouTube's native player controls. The button appears on the right side of the control bar, seamlessly integrated with YouTube's UI and styled to match YouTube's design language.
User Action
User hovers over the video player to reveal controls, then clicks the "GIF" button to start creating a GIF.
Quick Capture Screen (Initial State)
What's Happening
A wizard overlay appears on top of the YouTube video. The "Quick Capture" screen is displayed as the first step. User sees options for:
- Resolution: Select output GIF quality (144p, 240p, 360p, 480p)
- Frame Rate: Choose animation smoothness (5 fps, 10 fps, 15 fps)
- Timeline: Select which portion of the video to convert to GIF
Default settings are pre-selected (typically 144p and 5 fps for optimal file size).
User Action
User reviews the current settings and timeline selection.
Resolution Selection
What's Happening
User has clicked on the "360p" resolution option. The selected resolution button is highlighted/activated. Higher resolution means better quality but larger file size. Resolution options: 144p, 240p, 360p, 480p.
User Action
User selects their preferred resolution based on quality vs. file size needs.
Frame Rate Selection
What's Happening
User has clicked on the "10 fps" frame rate option. The selected frame rate button is highlighted/activated. Higher frame rate means smoother animation but larger file size. Frame rate options: 5 fps, 10 fps, 15 fps.
User Action
User selects their preferred frame rate to balance smoothness with file size.
Timeline Selection Interface
What's Happening
The timeline scrubber interface allows users to select which portion of the video to convert. User can drag handles to adjust the start and end times of the GIF. Timeline shows the current video duration and selected segment. Visual feedback indicates the selected time range.
User Action
User fine-tunes the exact start and end times for their GIF. User can drag timeline handles to select the perfect moment.
Text Overlay Screen
What's Happening
After clicking "Continue" on the Quick Capture screen, user advances to the Text Overlay screen. This screen allows users to add custom text to their GIF. User can choose to add text or skip this step entirely.
User Action
User decides whether to add text overlay to the GIF.
Text Overlay with Example Text
What's Happening
User has entered example text: "Hello World!" The text preview shows how it will appear on the final GIF. Text customization options are visible (if available). User can see a live preview of the text overlay on the video frame.
User Action
User types their desired text and positions it as needed. User can adjust text styling and placement. User clicks "Continue" to proceed or "Skip" to omit text overlay.
Processing Screen
What's Happening
The extension is now processing the video frames and encoding the GIF. A progress indicator shows the current processing status. Processing steps include:
- Extracting video frames from the selected timeline segment
- Resizing frames to the selected resolution
- Applying text overlay (if specified)
- Encoding frames into GIF format
Processing time varies based on selected resolution, frame rate, length of segment, and device performance.
User Action
User waits while the GIF is being created. No interaction required during processing.
Success Screen with GIF Preview
What's Happening
GIF has been successfully created! User sees a preview of the completed GIF playing in a loop. Options available:
- Download: Save the GIF to local device
- Save to Library: Store in the extension's GIF library
- Copy: Copy GIF to clipboard for quick sharing
- Create Another: Start over to make a new GIF
User Action
User reviews the final GIF to ensure it meets their expectations. User chooses how to save or share the GIF.
Extension Popup & Library View
What's Happening
User can access the extension popup by clicking the YTgify icon in the Chrome toolbar. The popup provides access to the GIF library, settings, and quick creation options. Library shows thumbnails of saved GIFs with metadata. User can search, filter, and manage their GIF collection.
User Action
User clicks the extension icon to open the popup. User can browse their saved GIFs, manage the library, or adjust settings.
User Flow Summary
Key Features Demonstrated
✓ Seamless Integration
GIF button appears naturally in YouTube controls
✓ Flexible Configuration
Multiple resolution and frame rate options
✓ Precise Selection
Timeline interface for selecting exact video segments
✓ Text Overlay
Optional text customization for GIFs
✓ Real-time Preview
See the final result before saving
✓ Persistent Library
Save and manage GIF collection