{"_id":"@crazygl/hero-phone-mockup","name":"@crazygl/hero-phone-mockup","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-phone-mockup","version":"0.1.1","description":"Vertical Phone Screenshot With 3D Depth — A mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages. A customizable CrazyGL animated hero secti","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./metadata.json":"./metadata.json","./style.css":"./style.css"},"dependencies":{"@crazygl/core":"^0.1.1","three":"^0.160.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/phone-mockup","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-phone-mockup.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","phone","iphone","mockup","mobile","app","screenshot","saas","premium","phone-mockup","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-phone-mockup/issues"},"gitHead":"6231323fdaf4ce5f16f3d16f45af549f4902155e","_id":"@crazygl/hero-phone-mockup@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-mUxJ5okLVuzxc1S9NUStx/nOSuisvGzfXeHS+5i7AvMRs3bfZqJnZAW7blF6EIsUg8VXITgxf6wp2eC9umwVOQ==","shasum":"2a8c551cf9bdba07603d3e304d1e72e42d0fefed","tarball":"https://registry.npmjs.org/@crazygl/hero-phone-mockup/-/hero-phone-mockup-0.1.1.tgz","fileCount":11,"unpackedSize":62273,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDNTLWvL/1uSB1YvACsLA2gXS+EYOYNZ3A0TJz054rbFAIgepUtuBtoWb514P5CSxCL9THKoz9s4ZgQqo5Jt+jwtR4="}]},"_npmUser":{"name":"ybouane","email":"ybouane@ybouane.com"},"directories":{},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hero-phone-mockup_0.1.1_1782922471546_0.27293602663603833"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-01T16:14:31.406Z","0.1.1":"2026-07-01T16:14:31.695Z","modified":"2026-07-01T16:14:31.959Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Vertical Phone Screenshot With 3D Depth — A mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages. A customizable CrazyGL animated hero secti","homepage":"https://crazygl.com/hero/phone-mockup","keywords":["three","3d","phone","iphone","mockup","mobile","app","screenshot","saas","premium","phone-mockup","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-phone-mockup.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-phone-mockup/issues"},"license":"Apache-2.0","readme":"<sub>*Hero made by [@ybouane](https://x.com/ybouane).*</sub>\n<p align=\"center\">\n  <img src=\"https://crazygl.com/heroes/hero-phone-mockup/banner-full.png\" alt=\"Vertical Phone Screenshot With 3D Depth\" width=\"640\">\n</p>\n\n# @crazygl/hero-phone-mockup\n\nA mobile screenshot floats inside a realistic 3D phone mockup. The phone rotates with the cursor and the screen pulses with subtle app glow. Perfect for app launch pages.\n\n## Demo\n[Vertical Phone Screenshot With 3D Depth](https://crazygl.com/hero/phone-mockup)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-phone-mockup\n```\n\n## Usage\n\n```tsx\nimport HeroPhoneMockup from '@crazygl/hero-phone-mockup';\n\nexport default function App() {\n\treturn (\n\t\t<HeroPhoneMockup\n\t\t\theading=\"Built for thumbs.\"\n\t\t\tsubheading=\"Your app, beautifully framed.\"\n\t\t\tscreenshot=\"/screens/my-app.png\"\n\t\t\tbodyTint=\"#ffffff\"\n\t\t/>\n\t);\n}\n```\n\n## Customise\n\n- **Screenshot** — `screenshot` (the vertical app image; 9:19.5 crops cleanest) and `screenBrightness` (how strongly the screen self-illuminates).\n- **Phone** — `useGlbMaterials` keeps the GLB's authored PBR finish; `bodyTint` multiplies over it for color variants. Turn the toggle off to fully override `phoneColor` / `frameMetalness` / `frameRoughness`. `phoneScale` sizes the phone.\n- **Motion** — `pointerRotation` (how strongly the phone follows the cursor) and `appGlowPulse` (subtle screen brightness pulse).\n- **Background** — `transparentBackground`, or a radial gradient via `bgColor1` / `bgColor2`.\n- **Lighting** — `keyColor` / `fillColor` / `backColor` of the studio rig plus `envIntensity` for the procedural HDRI reflection.\n- **Layout** — `contentAlign`, `phoneOffsetX` / `phoneOffsetY`, padding.\n\n## Best for\n\n- Mobile-app landing pages and consumer-app launches.\n- SaaS / product sites that want the screenshot to read as the hero.\n- App Store / Play Store campaign pages and storefront apps.\n\n\n\nThis hero is part of [CrazyGL](https://crazygl.com), a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready `SKILL.md` file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.\n","readmeFilename":"README.md","_rev":"1-bc6662749aa75c00a112336ccc4ff12c"}