Hero Oscilloscope

A full-width animated oscilloscope hero built with Canvas 2D that draws a summed three-harmonic waveform as a continuous box-drawing trace inside an instrument-style frame, where moving the pointer over it injects energy into a real damped wave simulation that ripples outward and settles back down.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Oscilloscope to your project and fits it to your theme.

import OscilloCrest from "@/components/ui/hero-oscilloscope";

export default function HeroOscilloscopeDemo() {
  return (
    <div className="h-screen w-full">
      <OscilloCrest>
        <h1 className="text-4xl font-bold tracking-tight text-foreground">
          SIGNAL, HELD STEADY
        </h1>
      </OscilloCrest>
    </div>
  );
}