Hero made by @ybouane.

@crazygl/hero-ai-video-portal

A floating prompt card streams a current of energy particles across to a glowing portal ring, through which the generated video or image materializes with a shimmer-dissolve reveal.

Demo

AI Video Generation Portal

Install

npm install @crazygl/hero-ai-video-portal

Usage

import AIVideoGenerationPortal from '@crazygl/hero-ai-video-portal';

export default function Page() {
  return (
    <AIVideoGenerationPortal
      heading="Type it. Watch it generate."
      generatedMedia="https://crazygl.com/samples/drone-2.mp4"
      revealStyle="dissolve"
      portalColor="#5ad0ff"
      accentColor="#c08bff"
    />
  );
}

Customise

• Content — heading / subheading, or switch contentType to two-columns / custom node content; cardSide puts the prompt card left or right (the portal sits opposite).
• Prompt Card — cardTitle, promptText, promptModel badge, generateLabel.
• Generated Media — generatedMedia (image or video URL), revealStyle (dissolve / iris / scanline), revealCycle seconds per develop loop.
• Portal — portalRadius, portalColor, accentColor, glow, swirlSpeed.
• Particle Stream — particleDensity, particleSpeed.
• Atmosphere — bgTop, bgBottom, transparentBackground.

Best for

• AI productivity and generative-media tools (text-to-video, text-to-image)
• Creative SaaS launch pages and model showcases
• Developer-platform and API landing pages for generation endpoints
• Premium product pages that dramatize "input becomes output"

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.