Hero made by @ybouane.

@crazygl/hero-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 depth. Tiles spawn offscreen below and despawn offscreen above with a soft edge fade. Hover a tile to pause and focus it.

Demo

Vertical Video Feed Spiral

Install

npm install @crazygl/hero-video-feed-spiral

Usage

import VideoFeedSpiral from '@crazygl/hero-video-feed-spiral';

export default function Page() {
  return (
    <VideoFeedSpiral
      heading="Your feed, in 3D."
      tileCount={9}
      columnCount={6}
      tile1="/reels/one.mp4"
      tile2="/reels/two.avif"
    />
  );
}

Each 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).

Customise

• Content — contentType, heading, subheading, columns / custom node.
• Feed Tiles — tileCount, columnCount, tile1…tile14 media slots.
• Spiral — spiralRadius, verticalPitch, rotationSpeed, tileSize, tileCornerRadius.
• Depth & Focus — depthDim, depthBlur, hoverFocus, parallaxStrength.
• Color — tileBrightness, accentColor, glowStrength, bgTop, bgBottom, transparent.

Best for

• Short-form video platforms and creator tools.
• UGC, reels/stories, and influencer-marketing apps.
• Mobile-first social products.
• Launch pages that want a busy, alive feed wall.

This hero is part of CrazyGL, 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.