Chladni Acoustic Grid

Component 18

About

Interactive 2D Chladni acoustic standing wave canvas simulating nodal sand patterns and frequency harmonic resonances.

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

Code

How Chladni Acoustic Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// This is a file with a demo for your component
// That's what users will see in the preview
// Create new files in this directory to add more demos

import ChladniAcousticGrid from "@/components/ui/chladni-acoustic-grid";

// ONLY DEFAULT EXPORT WILL BE TREATED AS A DEMO
export default function DemoOne() {
  return (
    <main className="min-h-screen w-full bg-slate-950 flex items-center justify-center p-4 md:p-8">
      {/* Centered Glass Canvas Container */}
      <div className="relative w-full max-w-4xl h-[480px] rounded-3xl overflow-hidden border border-slate-800 bg-slate-900/50 backdrop-blur-xl shadow-2xl flex items-center justify-center group">

        {/* Interactive Acoustic Wave Canvas */}
        <ChladniAcousticGrid
          gridResolution={50}
          frequencyX={3}
          frequencyY={3}
          nodeColor="#f43f5e"
          waveColor="#38bdf8"
        />

        {/* Minimal Overlay Copy */}
        <div className="absolute z-10 text-center px-6 pointer-events-none mix-blend-difference">
          <span className="font-mono text-xs tracking-widest text-rose-400 uppercase">
            Acoustic Nodal Field
          </span>
          <h1 className="font-mono text-3xl md:text-5xl font-black text-white tracking-tighter uppercase mt-1">
            Chladni Matrix
          </h1>
          <p className="font-mono text-xs text-slate-400 max-w-xs mx-auto mt-2 opacity-80">
            Hover across the grid to alter resonance frequency modal nodes.
          </p>
        </div>

      </div>
    </main>
  );
}