Gravity Chaos
Gravity chaos stats section with dynamic animations.
Main Features of Gravity Chaos
How to Use Gravity Chaos in Next.js
Installation Guide for Gravity Chaos
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.