Elevate your Framer projects with the Dynamic Grid, a powerful and versatile component designed to present your content in an engaging, interactive grid. Perfect for showcasing features, portfolios, product highlights, or blog posts, this component intelligently arranges 1 to 8 cards, offering a seamless user experience with beautiful animations and extensive customization.
What it does:
The Dynamic Grid transforms static content into a dynamic visual experience. It automatically adjusts its grid layout based on the number of cards you provide, ensuring an aesthetically pleasing arrangement from a single card to a full set of eight.
Key Features:
Responsive Grid Layout: Adapts intelligently for 1 to 8 cards, with pre-defined, visually optimized layouts for each count.
Interactive Expandable Cards: Users can click on any card to expand it into a focused, full-screen detail view, revealing more information.
Intuitive Navigation: Seamlessly browse between expanded cards using on-screen arrow buttons, keyboard arrow keys (left/right), or a subtle horizontal drag gesture.
Smooth Animations: Powered by Framer Motion, enjoy fluid transitions, hover effects, and a subtle rotation animation when navigating expanded cards.
Rich Content Display: Each card supports an image, a prominent title, and a detailed description (visible when expanded).
Visual Enhancements: Includes a subtle gradient and blur effect at the bottom of each card to enhance text readability over images.
Editable Variables (Property Controls):
Customize every aspect of your Dynamic Grid Showcase directly within Framer's properties panel:
Cards (Array, Max 8): Define the content for each card. Each card includes:
Title (String): The main heading for your card.
Description (String, TextArea): Detailed text that appears when the card is expanded.
Image (ResponsiveImage): The background image for your card.
Gap (Number, px): Controls the spacing between individual cards in the grid.
Border Radius (Number, px): Adjusts the roundness of the corners for each card.
Title Font (Font Control): Full control over the font family, size, weight, letter spacing, and line height for card titles.
Description Font (Font Control): Full control over the font family, size, weight, letter spacing, and line height for card descriptions.
Title Color (Color): Sets the color of the card titles.
Description Color (Color): Sets the color of the card descriptions.
Gradient Intensity (Number): Adjusts the strength of the gradient and blur effect at the bottom of each card, making text more readable.
Gradient Position (Number, %): Determines how high the gradient and blur effect extends up the card from the bottom.
Border (Boolean): Toggle to show or hide a subtle, translucent border around each card.
Border Width (Number, px): (Visible when Border is "Show") Sets the thickness of the card border.
Shadow (Boolean): Toggle to show or hide a subtle drop shadow beneath each card.
Expanded Card Margin (Object, px): Defines the spacing (top, right, bottom, left) between the expanded card and the edges of the viewport, controlling its "modal" appearance.
Hide Title: The title can be hided from the cards until the mouse is hovering the card.
Iri Codes
