ReelForge
Home Tools Visual Composition

Visual Composition tools

Three tools for how things sit in the frame: a rule-of-thirds overlay generator for any aspect ratio, an on-screen text position advisor, and a thumbnail simulator that shows you exactly how your thumbnail looks in a mobile feed.

Tool 1~5 seconds to run

Rule of Thirds Overlay Generator

Pick an aspect ratio and a grid style (thirds, golden ratio, dynamic symmetry). We render an SVG overlay you can screenshot and paste into your editing software as a composition guide. Also marks the "power points" (where lines intersect).

What's different here: Most rule-of-thirds templates assume 16:9. We render for every ratio you'll actually use, plus a "golden ratio" variant for cinematic compositions.

What this solves

"Why does this shot feel off-balance?" usually comes down to where the subject lands in the frame. The power points (line intersections) are where eyes naturally settle.

How to interpret

Place the most important visual element on a power point. Center the action along a gridline. Keep the eye-line on the upper horizontal gridline for talking heads.

FAQ

Why would I use golden ratio over thirds?

Golden ratio is closer to how eyes naturally scan (asymmetric). Thirds is more conventional. Use golden for stylized compositions, thirds for standard creator work.

What is dynamic symmetry?

A 1:2 ratio pattern used in classical painting. Useful for vertical compositions where thirds feels too "boxy".

Tool 2~10 seconds to run

Text Overlay Position Advisor

Tell us the text's purpose (caption, headline, CTA, question prompt) and the platform. We return the optimal vertical position as a percentage, accounting for safe zones, eye-line, and platform UI overlays.

What's different here: Most "caption placement" advice is one rule for all cases. We map 4 text types × 3 platforms into 12 distinct recommendations.

What this solves

Captions in the bottom 20% get covered by TikTok UI. Captions too high compete with the subject. The advisor finds the band that's visible AND doesn't compete.

How to interpret

Apply the percentage as the vertical center of your text bounding box. For multi-block layouts, follow the "stacked" recommendation.

FAQ

What about font size?

On 9:16 video: caption text 4–5% of frame height (≈36–45 px at 1080×1920). Headlines: 6–8%.

Should I use auto-captions?

For drafts, yes. For published: re-render with manual word timing and proper positioning. Auto-caption positions vary unpredictably.

Tool 3~15 seconds to run

Thumbnail Small-Size Simulator

Upload a thumbnail image and we'll show you how it looks at the actual viewing sizes: YouTube sidebar (168×94), Shorts shelf (190×265), mobile feed (320×180). Lets you catch legibility problems before publishing.

What's different here: All thumbnail rendering is done locally with the Canvas API — your image never leaves your device.

Upload a thumbnail to see it at viewing sizes.

What this solves

A thumbnail can look great at full size but illegible at 168×94. The simulator catches this — text under 20px at full size becomes unreadable at sidebar size.

How to interpret

If you can't read the text in the smallest version, no one else can either. Cut text or increase font size until it's legible.

FAQ

Is my image uploaded?

No. All rendering uses the Canvas API in your browser. Your file stays on your device.

What if I don't have a thumbnail yet?

Use the Thumbnail Readability tool on the Thumbnail & Title page to score your concept first, then come back to verify.