Hero made by @ybouane.

@crazygl/hero-hologram-projection

Your screenshot projected from a small device as a translucent holographic panel floating in the air. Wide cyan projection cone, moving scanlines, subtle flicker, drifting dust. Built for AI, dev tools, cybersecurity, and futuristic SaaS.

Demo

Screenshot as Hologram Projection

Install

npm install @crazygl/hero-hologram-projection

Usage

import HologramProjection from '@crazygl/hero-hologram-projection';

export default function Hero() {
  return (
    <HologramProjection
      screenshot="/product/dashboard.png"
      hologramTint="#56e3ff"
      clarity={0.5}
      panelTilt={8}
    />
  );
}

Customise

• Screenshot — the screenshot image projected as the floating panel (dark UIs read best).
• Hologram — hologramTint, hologramOpacity, clarity (master hologram-vs-clear dial), scanlineStrength, flickerStrength, panelHeight, panelTilt, panelScale, panelOffsetX/Y.
• Camera — cameraDistance, cameraHeight, cameraPitch.
• Projector — coneIntensity, coneRadius, baseRingColor.
• Particles — particleCount, particleSpeed.
• Background — bgTop, bgBottom, showGrid.

Best for

• AI and agent products, developer tooling, and cybersecurity platforms.
• Futuristic SaaS launch pages where a product screenshot should feel near-future.
• Premium feature reveals that want a tactile, projected-light hero.

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.