Open
Conversation
added 3 commits
March 5, 2026 07:50
Prevent duplicate layout renders in preview by gating desktop/mobile branches with matchMedia. This avoids Framer Motion layout projection conflicts that left blocks invisible when FLUID_TEXT was present.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces a new interactive component inspired by the layout used on Blento (Fluid Text Component).
The component allows grouping multiple links inside a single block and reveals them through an animated interaction using Framer Motion. This enables users to organize related links while keeping the bento layout clean and compact.
While implementing the component, an issue with the preview animation was discovered. The builder was rendering both the desktop and mobile grids simultaneously and hiding one using CSS. Because both layouts contained elements sharing the same
layoutId, Framer Motion's layout projection system conflicted between the two instances, causing animations to break (elements stuck withopacity: 0andscale(0)).To resolve this, the preview now renders only one layout at a time using
matchMedia, ensuring that only the active grid (desktop or mobile) exists in the DOM. This prevents duplicatelayoutIdconflicts and restores proper Framer Motion animations.Summary of changes:
matchMediato avoidlayoutIdconflictsRelated Issue
N/A
Type of Change
Checklist
npm run lintand fixed any issuesnpm run formatto format my codenpm run type-checkwith no errorsnpm run devScreenshots (if applicable)
Additional Notes
The component was inspired and reproduce by a similar interaction pattern seen in Blento. The implementation was built from scratch to integrate with OpenBento’s existing block system and animation architecture.
During development, the preview animation bug was discovered and fixed as part of this PR. The fix may also benefit future components relying on Framer Motion layout animations.