Kapwing

(things i made)

Kapwing is a browser-based non-linear video editor. I worked as a full-stack engineer for Kapwing's studio team, building features, fixing bugs and writing tests for their video editor. Here are some features I shipped:

    Box Select

    Product

  • Created a new Box Select component reusable across Trackpad and Canvas.
  • Improves the editing experience by allowing the user to select multiple tracks/layers in one mouse-action.

    • Implementation

  • Parameterize Canvas / Trackpad elements as rectangles, then apply a box collision algorithm to select overlapping rectangles.
  • Render the box select element using CSS based on mouse position.

    • Outro Animation

    Product

  • Support outro animations for videos, images, texts and shapes.
  • Used in about 1% of all published videos and about 10% of all rough cut videos.

    • Implementation

  • Use HTML5 canvas and reverse bezier curves to draw animations
  • Refactored animation playback logic by using time breakpoints to differentiate between outros / intros.

    • Drag and Drop

    Product

  • Enable dragging media from sidebar into canvas and timeline.
  • Gives users more fine tuned control of where and when to add desired media.

    • Implementation

  • Used react-dnd to manage state and implement drag & drop UI.

    • Volume >100% + Slider

    Product

  • Allow users to adjust videos past 100% volume. Used in 3% of created videos
  • Created new UI to adjust video volume from track waveforms.

    • Implementation

  • Route audio through Web Audio API and use gain nodes to boost volume past 100%.
  • Draw volume slider atop track waveforms using HTML5 canvas.

    • Smaller Static Tracks

    Product

  • Make image/text/shape tracks smaller than video/audio tracks.
  • Increases trackpad real estate, especially for projects with multiple layers and layer types.

    • Implementation

  • CSS + Major refactor on the way we calculate track position by taking track height into account.