Elastic Pull
Elastic pull FAQ with spring physics.
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. |
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
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.
FAQ
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.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.