CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/floating-screen-recording

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.

ReactWebGL3DImageVideoInteractiveFont#three#3d#saas#demo#product#screen-recording#cursor#onboarding#screenshot#video#dashboard

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-floating-screen-recording
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <FloatingScreenRecording />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <FloatingScreenRecording
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Floating Ceramic UI

A matte ceramic-like tablet panel with rounded edges presents your dashboard screenshot under soft studio lighting. The slab breathes through a slow yaw oscillation with subtle pointer-driven tilt; ambient occlusion sells the screen-to-bezel seam.

Floating Movie Scene

Your product demo presented like a launch trailer: a floating screen drifts on a dark 3D stage while volumetric spotlights sweep across it, dust hangs in the beams, and a soft reflection pools on the floor. Slow cinematic camera drift; scroll pushes the camera in.

Stage Screen

A keynote-stage hero: your product screenshot lives on a massive floating screen, lit by sweeping volumetric spotlights through a low-lying carpet of theatre fog.

VHS Product Demo Screen

Your product image or video plays inside a floating retro CRT/VHS-style screen with subtle barrel curvature, scanlines, chromatic aberration, vignette and occasional tracking-noise glitch bursts. Nostalgic but polished.

Calm Cloud Interface

A SaaS dashboard floats among soft cloud sprites under a friendly cream-to-sky-blue sky. Pointer drift parallaxes both the camera and the layered clouds for a light, approachable, effortless mood.

Floating Product

A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it.Live customizer

Floating Screen Recording

Screen media (image or video)Screenshot or video shown on the floating panel. MP4/WebM auto-loop, muted, cover-fit. The panel adapts to the media's native aspect ratio.Screen scale1Overall size of the floating panel. 0.9-1.2 is the photogenic sweet spot.Screen tilt-8°Pitch of the panel. Negative tilts the top toward the camera (keynote feel); positive tilts it away.Screen offset X0.35worldShift the panel left/right so heading copy can sit opposite.Screen offset Y0worldShift the panel up/down.Cursor pathOne waypoint per line: x,y in 0..1 of the screen (top-left origin). Add 'click' to fire a ripple there, 'zoom' to trigger the magnifier. The cursor loops the path.Cursor follows your pointerWhen on, the on-screen cursor tracks your real mouse instead of running the scripted path.Cursor speed1How fast the cursor travels the path. 1 = relaxed walkthrough.Trail length0.55Length of the glowing motion trail behind the cursor. 0 = no trail.Trail / cursor accentGlow colour of the cursor, its trail, and the click ripples.Click ripple strength0.8Brightness / reach of the expanding ring fired on each tagged click. 0 = no ripple.Ripple colourColour of the expanding click ring.Zoom lens strength1.6Magnification factor of the lens at tagged 'zoom' moments. 1 = no magnification.Zoom lens radius0.22Radius of the magnifier circle as a fraction of screen height.Float strength0.5Amount of gentle bob + sway of the floating panel. 0 = locked still.Pointer parallax0.5How much the panel turns to follow your pointer.Screen glow0.7Soft backlight bloom behind the panel. 0.5-0.9 reads premium.Glow accentTint of the backlight bloom behind the panel.Background topCentre/top of the radial backdrop gradient.Background edgeOuter edge of the radial backdrop gradient.Transparent backgroundDrop the backdrop so the panel composites over your page section.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.