Gravity Chaos
Gravity chaos stats section with dynamic animations.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stats | Array<{value: number, label: string, color?: string, size?: string, x?: number, y?: number}> | [] | Array of stat items with value, label, optional color, size, x, and y positions. |
| backgroundColor | string | #111111 | Background color (hex, rgb, or hsl). |
| patternColor | string | #222222 | Grid pattern color. |
| containerBorderColor | string | rgba(255,255,255,0.2) | Container border color. |
| hintText | string | DRAG_THE_DATA // PHYSICS_ENABLED | Hint text displayed in container. |
| hintTextColor | string | rgba(255,255,255,0.5) | Hint text color. |
| statValueColor | string | #000000 | Stat value text color. |
| statLabelColor | string | #000000 | Stat label text color. |
| statShadowColor | string | rgba(0,0,0,0.5) | Stat shadow color. |
| statBorderColor | string | #000000 | Stat border color. |
When to Use
Excellent for gaming products, deep-tech apps, and Next.js portfolios that want an interactive, volumetric feel. Use this React component for a gravity-based stats section where data points are dynamic, draggable physics objects.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the physics engine for mobile views.
Why This Component Matters
Dynamic physics increases the perceived value and interactivity of a digital interface. This production-ready component helpsคุณ build an interface that feels deep and tangible, turning standard data into an interactive playground.
FAQ
QHow does the gravity work?
The data points are treated as physical objects in a boundary box, responding to gravity, collisions, and user drag interactions.
QIs it draggable on mobile?
Yes, the physics engine is optimized for touch interactions, allowing users to toss and move the data 'bubbles' across the screen.
QCan I change the object sizes?
Each stat can be assigned a specific 'scale' to visually represent its relative importance or size in the dataset.
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.