Pricing Work Services Process Common Questions Why Bunker41 About Blog Get a Quote
← Back to Work
Product · Creative Tools

Spec Social

Drop in an image or a video and see how it actually crops on fifteen platforms — with the interface furniture that covers part of it drawn on top. Nothing leaves the browser.

IndustryCreative Tools
RoleDesign and build
PlatformClient-side web app
StatusLive
The Brief

Problem & Scope

The Challenge

Every platform crops differently, and then puts its own buttons, captions and avatars over the result. So a thumbnail that looked right in the export gets its subject cropped out on one platform and covered by a play button on another. The usual answer is a blog post full of dimension tables that went stale two redesigns ago — numbers to check your work against, rather than a look at the actual file.

What We Built

  • Drag-and-drop preview for images and video
  • Fifteen platforms rendered at once, with per-platform filtering
  • Real UI safe zones drawn over each crop, not just aspect ratios
  • Composition margin guides
  • A full reference of current sizes and best practice per platform
  • Entirely client-side — no upload, no account, no storage
The Design

The Live Site

Visit spec.social/ →

spec.social/
Spec Social full page website design by Bunker41
Key Features

What Makes It Work

Safe Zones, Not Just Ratios

Knowing a Story is 1080×1920 doesn't tell you that the top 250 pixels sit under the profile row and the bottom 350 under the caption and buttons. The overlays show what actually gets covered, which is the part that ruins a post.

Nothing Is Uploaded

The file is read and rendered in the browser and never sent anywhere. That's a privacy position, but it's also why the tool is instant and why it costs nothing to run — there is no server holding anyone's unreleased campaign art.

One Asset, Every Platform, One Screen

The comparison is the product. Seeing the same image cropped fifteen ways at once is what surfaces the problem, and it's what a table of dimensions can never do.

Approach

How We Built It

01

Solve It in the Browser

Everything runs client-side, which removed the upload, the storage, the privacy policy and the hosting bill in one decision. It also set the constraint that shaped the rest of the build: whatever it does, it has to do it on the user's own machine.

02

Draw the Furniture

The hard research wasn't the dimensions — those are published. It was where each platform's interface sits on top of the image, which had to be measured against the real apps and kept current as they redesign.

03

Make It Answer in One Screen

No sign-up, no project, no save step. Drop a file and the answer is already on screen. A utility that asks for an account before it helps you is one people use once.

04

Keep the Reference Current

The specs carry visible last-updated dates, because a size reference with no date is worse than none — it looks authoritative right up until it's wrong.

Like What You See?

We Can Build Something Like This For You.

Designed, built and shipped end to end — the storefront, the integration and the documentation. If your business needs the same, that is the work we do.

Book a call