proNew246 lines · framer-motion

Hero Video Frame

A 'screen recording' with no video file. A centred hero with a browser- or phone-chrome device frame containing a generated 2D-canvas waveform animation standing in for a product recording, with a real play/pause button.

Use it for: Product pages that want a 'watch it work' moment on the first screen without hosting or loading an actual video asset.
Themes: Light + dark
License: Commercial use

Live

Watch · 1 min

See it move before you try it

A framed preview that behaves like a screen recording, built live with canvas instead of a video file.

Try it free →See pricing

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Centred hero with a device-frame mock (browser or phone) containing a
 * generated 2D-canvas "screen recording" loop — flowing waveform bars — and a
 * real play/pause button that actually starts and stops the animation.
 */

export interface HeroVideoFrameProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Inside the device frame, a 2D canvas draws 28 animated bars whose heights follow offset sine waves, coloured mostly in a muted tone with every 7th bar in the signal colour, redrawn every frame while playing is true.
→The play/pause button is a real <button aria-pressed>; clicking it toggles playing, which starts or stops the animation loop (the canvas still shows its last frame when paused, like a paused video).
→frameType swaps between a browser-chrome frame (traffic-light dots, 16:9) and a phone frame (notch bar, 9:16 aspect).
→Colours are read from --muted-foreground and --signal and refreshed on every .dark class toggle via MutationObserver.
→The loop pauses when the frame scrolls offscreen (IntersectionObserver) or the tab is hidden; prefers-reduced-motion forces playing to false regardless of autoplay and draws one static frame.

Accessibility

✓The canvas is aria-hidden; the play/pause control is a real button with `aria-pressed` and an `aria-label` that reflects its current action.
✓Headline is a single <h1>; the device frame scales down cleanly on narrow viewports.
✓CTAs keep the design system's visible focus ring.
✓Honours prefers-reduced-motion.