Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Main Features of Liquid Stretch
How to Use Liquid Stretch in Next.js
Installation Guide for Liquid Stretch
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | [{id: '1', label: 'Module 1', content: '...'}, ...] | Array of accordion items with id, label, and optional content. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #ffffff | Background color of the container (hex, rgb, or hsl). |
containerShadowColor | string | rgba(0,0,0,0.1) | Shadow color of the container (hex, rgb, or hsl). |
itemBgColor | string | #f4f4f5 | Background color of accordion items (hex, rgb, or hsl). |
itemTextColor | string | #18181b | Text color of item labels (hex, rgb, or hsl). |
contentTextColor | string | #71717a | Text color of item content (hex, rgb, or hsl). |
iconColor | string | #18181b | Color of the chevron icon (hex, rgb, or hsl). |
defaultActive | number | null | 0 | Index of the initially active item (null for none). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
Related Components
When to Use
Excellent for high-end digital agencies, creative portfolios, and Next.js applications that want a soft, organic 'Liquid' aesthetic. Use this accordion to present FAQ sections or feature lists with a sense of fluid weight and tactile depth.
Best Practices
Maintain consistent spacing within your design system by keeping the accordion items organized and legible. Follow React best practices by pairing this with soft, neutral colors. Optimize for performance by using efficient Framer Motion layout transitions.
Why This Component Matters in Modern UI Development
Liquid animations create a sense of digital excellence, fluidity, and modern craft. This production-ready UI template helpsคุณ build an interface that feels alive and premium, adding a unique architectural signature to your brand interaction.
Frequently Asked Questions
QHow does the 'Liquid' feel work?
The component uses localized spring physics and staggered layout transitions to simulate the soft, fluid movement of liquid surfaces during expansion and contraction.
QCan I adjust the expansion speed?
Absolutely, you can customize the Framer Motion transition properties to adjust both the damping and stiffness of the 'liquid' stretch effect.
QIs it mobile responsive?
The accordion items adapt their widths and padding for mobile, ensuring the fluid narrative remains impactful and structural on small screens.