CrazyGLVertical 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.
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…tile14media 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.
One command, zero config.
npm install @crazygl/hero-video-feed-spiralImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import VerticalVideoFeedSpiral from '@crazygl/hero-video-feed-spiral';
export default function Landing() {
return (
<VerticalVideoFeedSpiral />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import VerticalVideoFeedSpiral from '@crazygl/hero-video-feed-spiral';
export default function Page() {
return (
<section>
<VerticalVideoFeedSpiral
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
