Skill Pile
Physics skills pile. Text pills drop into a tray, stack, and can be grabbed and thrown. For portfolio, agency and service sections.
Dependencies
matter-jsclsxtailwind-merge
Interaction
Matter.js rigid body simulation with chamfered pill geometries, sleeping physics bodies, fixed timestep updates, and spring pointer constraints.
Props
| Prop | Type | Description |
|---|---|---|
| skills | { label: string; tone?: "accent" | "ink" | "outline" }[] | List of skills or service tags (4 to 24 items). |
| height | string | Tray height as a CSS length. |
| hint | string | Left side hint text beneath the tray. |
| resetLabel | string | Right side button text. |
| className | string | Optional CSS classes merged with the root container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.