{"id":49595745,"url":"https://github.com/archisvaze/react-tilt-button","last_synced_at":"2026-05-04T04:05:41.156Z","repository":{"id":335414490,"uuid":"1139502705","full_name":"archisvaze/react-tilt-button","owner":"archisvaze","description":"A tactile 3D button for React that tilts on hover and squishes on press.  Modern and dependency-free.","archived":false,"fork":false,"pushed_at":"2026-04-04T20:06:22.000Z","size":222,"stargazers_count":73,"open_issues_count":0,"forks_count":4,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-04T22:35:46.378Z","etag":null,"topics":["button","button-animation","css","javascript","js","open-source","open-source-project","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/archisvaze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-22T03:28:25.000Z","updated_at":"2026-04-04T20:06:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/archisvaze/react-tilt-button","commit_stats":null,"previous_names":["archisvaze/react-tilt-button"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/archisvaze/react-tilt-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archisvaze%2Freact-tilt-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archisvaze%2Freact-tilt-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archisvaze%2Freact-tilt-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archisvaze%2Freact-tilt-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/archisvaze","download_url":"https://codeload.github.com/archisvaze/react-tilt-button/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/archisvaze%2Freact-tilt-button/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32593963,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T22:12:39.696Z","status":"online","status_checked_at":"2026-05-04T02:00:06.625Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["button","button-animation","css","javascript","js","open-source","open-source-project","react","reactjs"],"created_at":"2026-05-04T04:05:40.533Z","updated_at":"2026-05-04T04:05:41.146Z","avatar_url":"https://github.com/archisvaze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tilt Button\n\n\u003e A physical, 3D tactile React button component with tilt, squish, and real depth.\n\n🔗 **Live Demo:** https://react-tilt-button.vercel.app/\n\n![React Tilt Button Preview](https://react-tilt-button.vercel.app/og-image.png)\n\nFeatures:\n\n- Tilts on hover (left / middle / right)\n- Squishes on press\n- Has a visible “side wall” (depth)\n- Enforces physical constraints so it never breaks\n- Supports **predefined style variants**\n- Is fully configurable via props\n\nInspired by `react-awesome-button`, but implemented as a small, dependency-free component.\n\n---\n\n## Installation\n\n```bash\nnpm install react-tilt-button\n```\n\n```jsx\nimport { TiltButton } from 'react-tilt-button';\n```\n\n---\n\n## Basic Usage\n\n```jsx\n\u003cTiltButton onClick={() =\u003e alert('Clicked!')}\u003eClick me\u003c/TiltButton\u003e\n```\n\n---\n\n## Using Variants\n\nVariants are **predefined visual styles** (material / theme presets).\n\n```jsx\n\u003cTiltButton variant=\"solid\"\u003eSolid\u003c/TiltButton\u003e\n\u003cTiltButton variant=\"outline\"\u003eOutline\u003c/TiltButton\u003e\n\u003cTiltButton variant=\"arcade\"\u003eArcade\u003c/TiltButton\u003e\n\u003cTiltButton variant=\"carbon\"\u003eCarbon\u003c/TiltButton\u003e\n\u003cTiltButton variant=\"warning\"\u003eWarning\u003c/TiltButton\u003e\n```\n\nYou can still override any value manually:\n\n```jsx\n\u003cTiltButton\n    variant='solid'\n    surfaceColor='#10b981'\n\u003e\n    Custom Green\n\u003c/TiltButton\u003e\n```\n\n---\n\n## Demo\n\nTry it live here:\n\n👉 **https://react-tilt-button.vercel.app/**\n\nThe demo lets you:\n\n- Test all variants\n- Change geometry (depth, radius, tilt, etc.)\n- See physical constraints in action\n- Copy settings for your own usage\n\n## Full Example\n\n```jsx\n\u003cTiltButton\n    variant='arcade'\n    width={400}\n    height={120}\n    elevation={20}\n    pressInset={10}\n    tilt={4}\n    radius={14}\n    motion={160}\n\u003e\n    My Button\n\u003c/TiltButton\u003e\n```\n\n---\n\n## Physical Constraints (Important)\n\nThe component automatically clamps values:\n\n- `elevation` ≤ `height * 0.3`\n- `pressInset` ≤ `elevation`\n- `tilt` ≤ `elevation / 9`\n- `radius` ≤ `(height - elevation) / 4`\n\nSo the button:\n\n- Never crashes\n- Never inverts\n- Never visually breaks\n\n---\n\n## Props\n\n### Core\n\n| Prop       | Type      | Default   |\n| ---------- | --------- | --------- |\n| `children` | ReactNode | span      |\n| `onClick`  | function  | undefined |\n| `disabled` | boolean   | `false`   |\n\n---\n\n### Variant\n\n| Prop      | Type   | Default | Description                    |\n| --------- | ------ | ------- | ------------------------------ |\n| `variant` | string | `solid` | Predefined visual style preset |\n\n---\n\n### Geometry\n\n| Prop         | Type             | Default | Notes                                                 |\n| ------------ | ---------------- | ------- | ----------------------------------------------------- |\n| `width`      | number \\| string | `260`   | No max                                                |\n| `height`     | number \\| string | `64`    | No max                                                |\n| `elevation`  | number           | `14`    | Clamped to `height * 0.3`                             |\n| `pressInset` | number           | `5`     | Clamped to `\u003c= elevation`                             |\n| `tilt`       | number           | `2`     | Clamped to `\u003c= elevation / 9`                         |\n| `pressTilt`  | boolean          | `true`  | When `true`, the button keeps its skew while pressing |\n| `radius`     | number           | `14`    | Clamped to `\u003c= faceHeight / 4`                        |\n| `motion`     | number (ms)      | `160`   | Animation speed                                       |\n\n---\n\n### Colors (Optional Overrides)\n\nThese override the selected variant.\n\n| Prop           |\n| -------------- |\n| `surfaceColor` |\n| `sideColor`    |\n| `textColor`    |\n\n---\n\n### Border (Optional Overrides)\n\n| Prop          |\n| ------------- |\n| `borderColor` |\n| `borderWidth` |\n\n---\n\n## Glare / Specular Highlight (Optional)\n\nThe button supports a **dynamic specular glare highlight** that simulates light reflecting off the surface.\n\nIt automatically shifts based on hover position (left / middle / right) and fades out on press.\n\n### Props\n\n| Prop           | Type   | Default   | Description                         |\n| -------------- | ------ | --------- | ----------------------------------- |\n| `glareColor`   | string | `#ffffff` | Color of the glare highlight        |\n| `glareOpacity` | number | `0`       | Intensity of the glare (0 → 1)      |\n| `glareWidth`   | number | `0`       | Width of glare band (0 → 100, in %) |\n\n### Example\n\n```jsx\n\u003cTiltButton\n    glareColor='#ffffff'\n    glareOpacity={0.12}\n    glareWidth={60}\n\u003e\n    Shiny Button\n\u003c/TiltButton\u003e\n```\n\n---\n\n### Misc\n\n| Prop        | Description               |\n| ----------- | ------------------------- |\n| `className` | Extra classes             |\n| `style`     | Merged into inline styles |\n| `...props`  | Passed to `\u003cbutton\u003e`      |\n\n---\n\n## Behavior\n\n- Action fires on **mouse release**\n- Hover is split into left / middle / right zones\n- This is a **physical UI primitive**, not a flat semantic button\n\n---\n\n## Styling\n\nAll visuals are driven by CSS variables:\n\n- `--button-raise-level`\n- `--press-inset`\n- `--button-hover-pressure`\n- `--radius`\n- `--surface-color`\n- `--side-color`\n- `--text-color`\n- `--border-color`\n- `--border-width`\n- `--glare-rgb`\n- `--glare-alpha`\n- `--glare-width`\n\nSo you can theme it externally if needed.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchisvaze%2Freact-tilt-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farchisvaze%2Freact-tilt-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farchisvaze%2Freact-tilt-button/lists"}