Hero made by @ybouane.

@crazygl/hero-floating-screen-recording

A product demo screenshot or video floats on a screen panel with an animated cursor, a glowing motion trail, expanding click ripples, and a zoom-lens magnifier that highlights UI moments.

Demo

Floating Screen Recording

Install

npm install @crazygl/hero-floating-screen-recording

Usage

import FloatingScreenRecording from '@crazygl/hero-floating-screen-recording';

export default function Page() {
  return (
    <FloatingScreenRecording
      heading="Watch it work."
      screenMedia="/demo/dashboard.mp4"
      cursorPath={"0.18,0.78\n0.62,0.30 click\n0.82,0.62 click zoom"}
      cursorSpeed={1}
    />
  );
}

Customise

• Content — contentType, heading, subheading, or custom nodes.
• Screen — screenMedia (image or auto-looping video; panel adapts to its aspect), screenScale, screenTilt, screenX / screenY.
• Cursor & trail — cursorPath (one x,y [click] [zoom] waypoint per line), followPointer, cursorSpeed, trailLength, trailColor.
• Clicks & zoom — rippleStrength / rippleColor, zoomStrength / zoomRadius.
• Motion & light — floatStrength, parallaxStrength, screenGlow, accentColor.
• Backdrop — bgTone1 / bgTone2, transparentBackground.

Best for

• SaaS landing pages and product-led-growth sites.
• Onboarding flows and developer-tool / AI-app launches.
• Any hero where "show the product working" beats a static screenshot.

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.