Fixing TikTok's 7.3% Profile Sticker Grid Gap with Client-Side Canvas & WebCodecs

When building profile aesthetics on social platforms, creators often run into a frustrating quirk with TikTok's sticker grid feature.

If you take an image, crop it into a standard 3x3 grid (like PineTools or traditional photo splitters do), and upload them as stickers, the resulting profile wall looks broken. The alignment drifts noticeably across tiles.

Here's why that happens, the mathematical fix, and how to implement it entirely inside the browser using standard Canvas and WebCodecs APIs.

The Root Cause: TikTok's 7.3% Spacing Gap

Unlike Instagram's uniform profile grid, TikTok injects subtle spacing between adjacent sticker items. Specifically, horizontal and vertical gaps account for approximately 7.3% of each tile dimension.

When you slice an image with 0% gap assumptions:

1. The tiles do not touch edge-to-edge.
2. Visual lines, text, and circular subjects shift out of sync across columns and rows.

To achieve a seamless visual aesthetic, the generator must anticipate this built-in separation and apply inverse offset compensation during slicing.

Calculating Gap-Aware Dimensions

Instead of dividing total width simply as W / cols, each tile's sampled bounding box in the source image must account for the display ratio with inter-tile margins:

function calculateSlices(sourceWidth, sourceHeight, cols = 3, rows = 3, gapPercent = 0.073) {
  const totalGapWidth = (cols - 1) * gapPercent;
  const unitWidth = sourceWidth / (cols + totalGapWidth);
  const gapSizeX = unitWidth * gapPercent;

  const slices = [];
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      const sx = c * (unitWidth + gapSizeX);
      const sy = r * (unitWidth + gapSizeX);
      slices.push({ x: sx, y: sy, width: unitWidth, height: unitWidth });
    }
  }
  return slices;
}

Client-Side Processing Without Cloud Latency

TikTok requires stickers to be created from short video clips or animated formats (720x720, up to 3 seconds). Sending heavy video uploads to a backend server introduces bandwidth costs, latency, and unnecessary privacy concerns.

By running the entire pipeline inside the browser:

1. An OffscreenCanvas extracts frame regions at the target 720x720 square format.
2. The WebCodecs API encodes raw frames directly into an H.264 MP4 stream.
3. Users download clean, sequential files (1 to 9) numbered in reverse upload order (because TikTok renders the newest upload at top-left).

You can test this algorithm live on the open tool TikTok StickerBanner Maker, completely free and client-side.

Key Takeaways for Frontend Engineers

• Understand host-app quirks: Native mobile apps often render web-view or native grids with non-zero internal margins. Reverse-engineering those constraints yields a much better user experience.
• Leverage modern browser APIs: Tasks that previously required heavy FFmpeg backend clusters can now be delegated entirely to the user's local hardware via WebCodecs and Canvas.