Elastic Pull
Elastic pull FAQ with spring physics.
Main Features of Elastic Pull
How to Use Elastic Pull in Next.js
Installation Guide for Elastic Pull
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
faqs | Array<{id: number, q: string, a: string}> | [] | Array of FAQ items with id, question (q) and answer (a). |
backgroundColor | string | #171717 | Background color (hex, rgb, or hsl). |
cardBgColor | string | #262626 | Card background color. |
cardTextColor | string | #ffffff | Card text color. |
dragHintColor | string | #737373 | Drag hint text color. |
answerBgColor | string | #171717 | Answer background color. |
answerTextColor | string | #d4d4d4 | Answer text color. |
answerBorderColor | string | #404040 | Answer border color. |
dragLeftColor | string | #ff0055 | Background color when dragging left. |
dragRightColor | string | #0055ff | Background color when dragging right. |
dragCenterColor | string | #262626 | Background color when centered. |
Related Components
When to Use
Excellent for mobile-first applications, playful landing pages, and Next.js sites that want a tactile, 'stretchy' aesthetic. Use this React component for an FAQ section where answers are revealed through elastic 'pull-to-open' interactions and spring-based physics.
Best Practices
Maintain consistent spacing within your design system by using it as a secondary information layer. Follow React best practices by pairing it with clear drag indicators. Optimize for performance by using Framer Motion's hardware-accelerated spring animations.
Why This Component Matters in Modern UI Development
Elastic interactions feel more natural and responsive to swipe gestures. This production-ready component helpsคุณ build an interface that feels modern and lightweight, improving the joy of small interactions (micro-interactions) in your project.
Frequently Asked Questions
QHow does the pull reveal work?
Users can drag the FAQ card horizontally; as it stretches, it changes color and reveals high-priority actions or the answer layer.
QIs the spring physics customizable?
Yes, you can control the stiffness and damping of the pull effect to make it feel more or less 'snappy'.
QCan I use it for left/right actions?
The component supports independent background colors for both left and right drag directions, allowing for versatile 'swipe-to-action' patterns.