{"_id":"@crazygl/hero-video-feed-spiral","name":"@crazygl/hero-video-feed-spiral","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@crazygl/hero-video-feed-spiral","version":"0.1.1","description":"Vertical Video Feed Spiral — Vertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with… A customizable CrazyGL animated he","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.184.0"},"peerDependencies":{"react":">=18","react-dom":">=18"},"license":"Apache-2.0","author":{"name":"ybouane"},"homepage":"https://crazygl.com/hero/video-feed-spiral","repository":{"type":"git","url":"git+https://github.com/crazygl-com/hero-video-feed-spiral.git"},"publishConfig":{"access":"public"},"keywords":["three","3d","video","spiral","helix","feed","social","ugc","mobile","vertical","creator","short-form","video-feed-spiral","crazygl","hero","hero-section","webgl","react","animation","ui","landing-page","interactive","frontend","component","canvas"],"bugs":{"url":"https://github.com/crazygl-com/hero-video-feed-spiral/issues"},"gitHead":"95435ddb02438e12073baa6076e08f8c6b8fc47f","_id":"@crazygl/hero-video-feed-spiral@0.1.1","_nodeVersion":"24.14.0","_npmVersion":"11.12.0","dist":{"integrity":"sha512-LHf/m3dxmJWFgZVJCduCoL+K3WucAwXWbTaT7It3KrbIuIWAsMi9ZkCnvzXsGgH1I/y/Us7T6ONU0YM2e36sHA==","shasum":"989d9259db07401d5b3d43b89bddc372d423e724","tarball":"https://registry.npmjs.org/@crazygl/hero-video-feed-spiral/-/hero-video-feed-spiral-0.1.1.tgz","fileCount":11,"unpackedSize":91492,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHJFLAH0Ju+ZN7Ca89s8z3l/QW5Jtq33sNxZdhbL96p6AiAm6JLokfn3QE5rRba8WuUIps+fVW7q+mQ4lJ4zXbXUGA=="}]},"_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-video-feed-spiral_0.1.1_1782968928180_0.5494925007516231"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-02T05:08:48.052Z","0.1.1":"2026-07-02T05:08:48.364Z","modified":"2026-07-02T05:08:48.629Z"},"maintainers":[{"name":"ybouane","email":"ybouane@ybouane.com"}],"description":"Vertical Video Feed Spiral — Vertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with… A customizable CrazyGL animated he","homepage":"https://crazygl.com/hero/video-feed-spiral","keywords":["three","3d","video","spiral","helix","feed","social","ugc","mobile","vertical","creator","short-form","video-feed-spiral","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-video-feed-spiral.git"},"author":{"name":"ybouane"},"bugs":{"url":"https://github.com/crazygl-com/hero-video-feed-spiral/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-video-feed-spiral/banner-full.png\" alt=\"Vertical Video Feed Spiral\" width=\"640\">\n</p>\n\n# @crazygl/hero-video-feed-spiral\n\nVertical videos or mobile screenshots wrap around a slowly rotating 3D cylinder, climbing in their own upward-scrolling lanes. Front tiles read sharp and bright; back tiles dim and blur with depth. Tiles spawn offscreen below and despawn offscreen above with a soft edge fade. Hover a tile to pause and focus it.\n\n## Demo\n[Vertical Video Feed Spiral](https://crazygl.com/hero/video-feed-spiral)\n\n## Install\n\n```bash\nnpm install @crazygl/hero-video-feed-spiral\n```\n\n## Usage\n\n```tsx\nimport VideoFeedSpiral from '@crazygl/hero-video-feed-spiral';\n\nexport default function Page() {\n  return (\n    <VideoFeedSpiral\n      heading=\"Your feed, in 3D.\"\n      tileCount={9}\n      columnCount={6}\n      tile1=\"/reels/one.mp4\"\n      tile2=\"/reels/two.avif\"\n    />\n  );\n}\n```\n\nEach tile takes one **media** slot — vertical (9:16) portrait works best. Images (PNG/JPG/AVIF/WebP) or video (MP4/WebM/MOV, looped muted, cover-fit so portrait media never stretches).\n\n## Customise\n\n- **Content** — `contentType`, `heading`, `subheading`, columns / custom node.\n- **Feed Tiles** — `tileCount`, `columnCount`, `tile1`…`tile14` media slots.\n- **Spiral** — `spiralRadius`, `verticalPitch`, `rotationSpeed`, `tileSize`, `tileCornerRadius`.\n- **Depth & Focus** — `depthDim`, `depthBlur`, `hoverFocus`, `parallaxStrength`.\n- **Color** — `tileBrightness`, `accentColor`, `glowStrength`, `bgTop`, `bgBottom`, `transparent`.\n\n## Best for\n\n- Short-form video platforms and creator tools.\n- UGC, reels/stories, and influencer-marketing apps.\n- Mobile-first social products.\n- Launch pages that want a busy, alive feed wall.\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-dc66751dc855fb7f90fcc88a718b88bb"}