Dynamic Grid - Framer Component

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.
  

Refund Policy: As this is a digital product, all sales are final and non-refundable. Please make sure to review the product details before purchasing.