Gravity Physics
Gravity physics FAQ with draggable bubbles.
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. |
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
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.
FAQ
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.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.