{"_id":"@beauhawkinson/plinth","name":"@beauhawkinson/plinth","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@beauhawkinson/plinth","version":"1.0.0","description":"Stepped 3D cards that lift and breathe under the cursor — a React component built to feel physical, not snappy.","keywords":["react","3d","card-stack","animation","motion","component"],"license":"MIT","author":{"name":"Beau Hawkinson"},"homepage":"https://github.com/beauhawkinson/plinth#readme","repository":{"type":"git","url":"git+https://github.com/beauhawkinson/plinth.git"},"bugs":{"url":"https://github.com/beauhawkinson/plinth/issues"},"publishConfig":{"access":"public"},"type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"}},"sideEffects":["**/*.css","./dist/index.js"],"scripts":{"dev":"turbo run dev","build:lib":"tsup","build":"pnpm run build:lib && turbo run build","typecheck":"tsc --noEmit","lint":"biome check .","format":"biome format --write ."},"peerDependencies":{"motion":"^12.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@biomejs/biome":"2.4.14","@types/node":"^25.9.1","@types/react":"^18.0.27","@types/react-dom":"18.0.10","knip":"^6.12.0","lefthook":"^2.1.8","motion":"^12.40.0","react":"^19.2.6","react-dom":"^19.2.6","tsup":"^8.0.0","turbo":"^2.0.0","typescript":"^5.9.3"},"packageManager":"pnpm@9.12.0","engines":{"node":">=20"},"gitHead":"0c9cd5c884efd2209baa9eba3378cb0b9cd33cc4","_id":"@beauhawkinson/plinth@1.0.0","_nodeVersion":"24.10.0","_npmVersion":"11.14.1","dist":{"integrity":"sha512-ckTWmK/A70EEZtdSdr+KpXy/eFTBh0/+8bXWSkXPQZP30H187d8Tyu5Zxs5u066pAAAm2TRGKKB5pZpkpcqKpQ==","shasum":"e202f9d938ba63fd23f0a66679da34ac19b088df","tarball":"https://registry.npmjs.org/@beauhawkinson/plinth/-/plinth-1.0.0.tgz","fileCount":5,"unpackedSize":18256,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCqy6DIeqxVCJUKl5H1ZWQaWs44CYoJpjXRgOVlKRO+egIhAIzrdLzvIo5HVXlVzTuJ8jBfRCCRwsCzD7DdemiuRZC3"}]},"_npmUser":{"name":"bhawkinson","email":"beaujhawkinson@gmail.com"},"directories":{},"maintainers":[{"name":"bhawkinson","email":"beaujhawkinson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/plinth_1.0.0_1779971720066_0.5024277704899001"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-28T12:35:19.883Z","1.0.0":"2026-05-28T12:35:20.213Z","modified":"2026-05-28T12:35:20.463Z"},"maintainers":[{"name":"bhawkinson","email":"beaujhawkinson@gmail.com"}],"description":"Stepped 3D cards that lift and breathe under the cursor — a React component built to feel physical, not snappy.","homepage":"https://github.com/beauhawkinson/plinth#readme","keywords":["react","3d","card-stack","animation","motion","component"],"repository":{"type":"git","url":"git+https://github.com/beauhawkinson/plinth.git"},"author":{"name":"Beau Hawkinson"},"bugs":{"url":"https://github.com/beauhawkinson/plinth/issues"},"license":"MIT","readme":"# @beauhawkinson/plinth\n\nA React component for rendering interactive 3D card stacks. Handles the spatial math — perspective, step offsets, face transforms, hover physics — and exposes styling hooks so each face can look however you like.\n\n## Install\n\n```bash\nnpm install @beauhawkinson/plinth motion\n```\n\n## Usage\n\n```tsx\nimport { Plinth } from \"@beauhawkinson/plinth\";\n\nexport default function Example() {\n  return <Plinth count={6} />;\n}\n```\n\nDefault styles are bundled with the component and inject automatically when it mounts — no separate CSS import needed.\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `count` | `number` | `12` | Number of cards in the stack |\n| `cardWidth` | `number` | `384` | Card face width in px |\n| `cardHeight` | `number` | `160` | Card face height in px |\n| `rotateX` | `number` | `-12` | X-axis tilt in degrees |\n| `rotateY` | `number` | `-45` | Y-axis tilt in degrees |\n| `perspective` | `number` | `1200` | CSS perspective distance in px |\n| `depth` | `number` | auto | Pillar depth — derived from `cardHeight` when unset |\n| `peek` | `number` | auto | How much of each card shows behind the next |\n| `rise` | `number` | auto | Vertical offset between adjacent cards |\n| `liftAmount` | `number` | auto | Distance a card travels up on hover |\n| `hover` | `HoverConfig` | — | Spring + scale + falloff config |\n| `faceStyles` | `FaceStyles` | `{}` | Per-face className overrides |\n| `className` | `string` | — | Class applied to the outer container |\n\n### `HoverConfig`\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `spring` | `SpringOptions` | `{ stiffness: 200, damping: 30, mass: 0.2 }` | Motion spring for lift and scale |\n| `scaleDip` | `number` | `-0.2` | Scale change applied broadly across the stack |\n| `scaleBoost` | `number` | `1.618` | Extra scale on the hovered card |\n| `falloff` | `number` | `1.618` | Broad influence radius decay |\n| `narrowFalloff` | `number` | `1.618` | Tighter falloff used for the lift effect |\n\n## Styling\n\nTwo approaches, use either or both:\n\n**1. `faceStyles` prop** — pass Tailwind (or any) class names per face. Merges with the bundled defaults:\n```tsx\n<Plinth\n  faceStyles={{\n    front: \"bg-zinc-900 text-zinc-50\",\n    top: \"bg-zinc-800\",\n    left: \"bg-zinc-700\",\n    right: \"bg-zinc-700\",\n  }}\n/>\n```\n\n**2. `data-face` CSS selectors** — scope your overrides via a wrapper className:\n```css\n.my-stack [data-face=\"front\"] { background: oklch(0.88 0.14 94); }\n.my-stack [data-face=\"top\"]   { background: oklch(0.85 0.16 94); }\n```\n```tsx\n<Plinth className=\"my-stack\" />\n```\n\nThe bundled stylesheet uses two CSS variables — `--plum` (borders) and `--soot` (shadow tint) — which you can override on `:root` to retheme the defaults globally.\n\n## Monorepo\n\n```\nsrc/            — library source (published to npm)\napps/website/   — docs and demo site (beauhawkinson.us)\napps/playground/ — local sandbox for testing\n```\n\n```bash\npnpm install\npnpm dev          # run the docs site with live library\npnpm build:lib    # build the library to dist/\npnpm build        # build library + docs site\npnpm typecheck\npnpm lint\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-5cdf217d9dd849a725f237d4ac0ab977"}