Hero made by @ybouane.

@crazygl/hero-retro-tunnel

Your screenshot or video sits at the centre of an 80s sci-fi tunnel — stacked rings of glowing colour flow toward the camera against deep black. Energetic, fun, memorable.

Demo

Retro-Future Product Tunnel

Install

npm install @crazygl/hero-retro-tunnel

Usage

import RetroTunnel from '@crazygl/hero-retro-tunnel';

export default function Hero() {
	return (
		<RetroTunnel
			heading="Step into the demo."
			screenMedia="/your-product-demo.mp4"
			ringShape="Hexagon"
		/>
	);
}

Customise

• Content — heading + subheading, two columns, or a custom node.
• Media — screenMedia (image or auto-looping video; aspect read from the asset), screenMediaX/Y, screenMediaScale, screenClarity (crisp ↔ hazy film print).
• Tunnel — ringCount, ringSpacing, tunnelRadius, ringSpeed, ringThickness, ringGlow, ringShape (Circle / Hexagon / Octagon).
• Palette — ringColor1–ringColor5, cycled around the stack (synthwave defaults).
• Motion — parallaxStrength (pointer-driven camera drift + roll).
• Background — transparentBackground.

Best for

• Video demos and SaaS launch pages wanting a "press play on the future" hook.
• Creative agencies and music / motion-design portfolios.
• Product reveals that need an energetic, memorable above-the-fold.

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.