Fix PresetGallery preview to match canvas rendering

[asgharali97]

Fixes #41

Problem
Preset previews in PresetGallery did not accurately match the final canvas output.
Frames (macOS / Windows / photograph / arc styles), aspect ratios, and 3D transforms were visually inconsistent between the gallery preview and the editor canvas.

Root Cause
The gallery was rendering previews using custom CSS approximations (blur, borders, manual layout) instead of the same frame rendering system used by the canvas.
This caused inevitable drift as new frame types and layout rules were added.

Solution

The preset gallery now reuses the existing canvas frame system (Frame3DOverlay) to render previews.
Instead of simulating frames with layered styles, previews are rendered using the same frame components, aspect-ratio handling, and 3D transforms as the editor.

What Changed

Preset previews now use Frame3DOverlay (same as canvas)

Aspect ratio rendering is derived from preset metadata, not hardcoded

Frame padding, headers, offsets, and ultra-wide handling match canvas behavior

Removed duplicated / approximate preview logic

Result

Preset previews are now visually identical to canvas output

No duplicated frame-rendering logic

Future frame or preset changes automatically stay in sync

Risk / Impact

No change to preset data format

No change to canvas rendering

Change is isolated to PresetGallery preview renderng only

Testing

Verified presets with macOS, Windows, photograph, arc, and no-frame styles

demo video

stage.final.mp4

[vercel]

@asgharali97 is attempting to deploy a commit to the Kartik Labhshetwar's projects Team on Vercel.

A member of the Team first needs to authorize it.

[KartikLabhshetwar]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

[asgharali97]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

@KartikLabhshetwar Thanks for the clarification, and apologies for the misunderstanding earlier.

I spent some more time observing the preset previews on the live site to better understand the issue. Here’s what I’ve noticed so far, and I want to confirm if this matches the intended behavior.

Currently, the preset previews already reflect some visual properties correctly for example, the image border radius shown in the preview matches what gets applied on the canvas, and this seems to be handled by a wrapper/parent element rather than the image itself.

However, for presets that apply more complex effects (such as 3D transforms, glass/frosted borders, or multiple borders), the preview gallery mainly shows a background change and a basic image layout. Visually, these presets look very similar to simple background presets, even though the actual canvas result is significantly different.

Based on this, my understanding is that the expected behavior is for the preset preview to better represent the effect of the preset itself not just the background, but also cues for things like depth, glass, or multi-border styles so users can understand what a preset does without relying on the title or description.

Could you please confirm if this interpretation is correct? Once aligned, I can start working on updating the preset preview accordingly (or adjust the existing PR if needed).

[KartikLabhshetwar]

Hi @asgharali97 I think you have misunderstood the issue, the issue is to solve the preview of the preset bg not cropping of the image I mean you can do that too but the view on the canvas and preview in the preset is different we need to fix the preview gallery.

@KartikLabhshetwar Thanks for the clarification, and apologies for the misunderstanding earlier.

I spent some more time observing the preset previews on the live site to better understand the issue. Here’s what I’ve noticed so far, and I want to confirm if this matches the intended behavior.

Currently, the preset previews already reflect some visual properties correctly for example, the image border radius shown in the preview matches what gets applied on the canvas, and this seems to be handled by a wrapper/parent element rather than the image itself.

However, for presets that apply more complex effects (such as 3D transforms, glass/frosted borders, or multiple borders), the preview gallery mainly shows a background change and a basic image layout. Visually, these presets look very similar to simple background presets, even though the actual canvas result is significantly different.

Based on this, my understanding is that the expected behavior is for the preset preview to better represent the effect of the preset itself not just the background, but also cues for things like depth, glass, or multi-border styles so users can understand what a preset does without relying on the title or description.

Could you please confirm if this interpretation is correct? Once aligned, I can start working on updating the preset preview accordingly (or adjust the existing PR if needed).

Hi @asgharali97, Yes you are right, but this behavior is shown in every case.

[asgharali97]

Hi @KartikLabhshetwar Thanks for the clarification earlier that helped a lot.

I revisited the issue and focused on fixing the preset preview mismatch in a scoped way. The core problem was that the PresetGallery preview was using hardcoded layout assumptions instead of deriving its structure from the preset config itself, which caused the preview to differ from the canvas in all cases.

I explored two approaches:

1. Rendering a mini canvas per preset using the same canvas components
2. Keeping the preview lightweight and making it data-driven based on PresetConfig

Given the issue labels and scope, I went with option 2.
I refactored the preset preview rendering so presets better reflect their actual output:
Preset-specific aspect ratios are now respected instead of forcing 16:9.
Image frames now account for border padding, radius, and border types (solid, glassy, infinite-mirror).
Added support for 3D perspective transforms directly in preset previews.
Background blur and noise overlays are rendered closer to final output.

happy to adjust if you prefer a different tradeoff

I’ve attached a short before/after video showing the improved consistency between the preset preview and the canvas.

before

before.stage.mp4

after

after.stage.mp4

[KartikLabhshetwar]

Hi @KartikLabhshetwar Thanks for the clarification earlier that helped a lot.

I revisited the issue and focused on fixing the preset preview mismatch in a scoped way. The core problem was that the PresetGallery preview was using hardcoded layout assumptions instead of deriving its structure from the preset config itself, which caused the preview to differ from the canvas in all cases.

I explored two approaches:

1. Rendering a mini canvas per preset using the same canvas components
2. Keeping the preview lightweight and making it data-driven based on PresetConfig

Given the issue labels and scope, I went with option 2. I refactored the preset preview rendering so presets better reflect their actual output: Preset-specific aspect ratios are now respected instead of forcing 16:9. Image frames now account for border padding, radius, and border types (solid, glassy, infinite-mirror). Added support for 3D perspective transforms directly in preset previews. Background blur and noise overlays are rendered closer to final output.

happy to adjust if you prefer a different tradeoff

I’ve attached a short before/after video showing the improved consistency between the preset preview and the canvas.

before

before.stage.mp4
after

after.stage.mp4

Hi @asgharali97 can you fix the border view in the preset gallery.

[asgharali97]

Hi @KartikLabhshetwar, thanks for the feedback.

Just to clarify what you mean by “fix the border view” in the preset gallery I want to make sure I’m addressing the right thing:

the border appears visually too large / dominant for certain presets (e.g. artistic texture, vintage film), likely because it’s currently scaling with the preset aspect ratio?

Or is this about the border shape / radius not matching the canvas output?

If you can point to one preset as an example of the expected behavior, I’ll align the gallery preview exactly to that.

[KartikLabhshetwar]

Hi @KartikLabhshetwar, thanks for the feedback.

Just to clarify what you mean by “fix the border view” in the preset gallery I want to make sure I’m addressing the right thing:

the border appears visually too large / dominant for certain presets (e.g. artistic texture, vintage film), likely because it’s currently scaling with the preset aspect ratio?

Or is this about the border shape / radius not matching the canvas output?

If you can point to one preset as an example of the expected behavior, I’ll align the gallery preview exactly to that.

yes i am talking about this thing only. the preview in the preset should be identical to how it looks in the canvas.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
stage	Ready	Preview, Comment	Dec 21, 2025 6:29am

[asgharali97]

Hi @KartikLabhshetwar, look at, the demo video

stage.final.mp4

[asgharali97]

Hey @KartikLabhshetwar, I just wanted to gently bump this PR.

The change aligns the PresetGallery preview with the existing canvas frame system, so previews now match the final output without duplicating frame logic.

Happy to adjust anything if you have feedback.