Magma Flow
Liquid magma masonry grid with flowing animations and heat effects.
Main Features of Magma Flow
How to Use Magma Flow in Next.js
Installation Guide for Magma Flow
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{title?: string, subtitle?: string, buttonText?: string}> | Array of magma items with optional title, subtitle, and button text. If not provided, items are auto-generated. | |
itemCount | number | 6 | Number of items to generate if items array is not provided. |
backgroundColor | string | #110000 | Background color (hex, rgb, or hsl). |
titlePrefix | string | Flow State | Prefix text for auto-generated item titles. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the flow real?
The component uses localized SVG filters and spring physics to simulate organic 'Metaballs' that merge and split smoothly as they 'flow' through the grid.
QCan I adjust the heat?
Absolutely, you can customize the primary background color and the specific 'magma' gradients to match your brand's specific heat intensity.
QIs it mobile responsive?
The liquid flows and blob spans adapt for mobile, ensuring the 'Magma' feel remains consistent on high-density mobile screens.