Dynamic Grid

Elevate your Framer projects with the Dynamic Grid, a powerful and versatile component designed to present your content in an engaging, interactive grid.

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.

A dynamic grid with interactive card UI