Gravity Physics
Gravity physics FAQ with draggable bubbles.
Main Features of Gravity Physics
How to Use Gravity Physics in Next.js
Installation Guide for Gravity Physics
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 | #111111 | Background color (hex, rgb, or hsl). |
backgroundText | string | CHAOS | Background text displayed behind bubbles. |
backgroundTextColor | string | #222222 | Background text color. |
bubbleBgColor | string | rgba(255,255,255,0.05) | Bubble background color. |
bubbleBorderColor | string | rgba(255,255,255,0.2) | Bubble border color. |
bubbleTextColor | string | #ffffff | Bubble text color. |
activeBubbleBgColor | string | #a3e635 | Active bubble background color. |
activeBubbleTextColor | string | #000000 | Active bubble text color. |
activeBubbleShadowColor | string | rgba(163, 230, 53, 0.4) | Active bubble shadow color. |
hintText | string | DRAG_TO_INSPECT // PHYSICS_ENGINE_ACTIVE | Hint text displayed at bottom. |
hintTextColor | string | rgba(255,255,255,0.5) | Hint text color. |
Related Components
When to Use
Ideal for experimental labs, creative agency landing pages, and Next.js applications that want a playful, interactive 'chaos' aesthetic. Use this React component for an FAQ section where questions are individual physics-based bubbles that users can drag and toss.
Best Practices
Maintain consistent spacing within your design system by using it for high-impact narrative sections. Follow React best practices by pairing it with clear 'Hint' text. Optimize for performance by managing the number of concurrent physics bodies to ensure smooth 60fps interaction.
Why This Component Matters in Modern UI Development
Physics-based UIs create a sense of tangibility and fun. This production-ready component helpsคุณ build an interface that feels toy-like and engaging, making the process of information discovery memorable for your users.
Frequently Asked Questions
QHow realistic is the physics?
It uses a simplified 2D physics engine with gravity, collision detection, and friction to ensure bubbles feel 'heavy' and reactive.
QWhat happens when I click a bubble?
The bubble expands and locks into a focused state, displaying the answer while the other bubbles react to the collision.
QIs it too chaotic for serious sites?
The 'chaos' can be controlled by adjusting the initial velocity and gravity props, allowing for a more stable or hyper-active experience.