Magic Spells

import { MagicSpells } from "@/components/ui/magic-spells"

export default function Demo() {
  return (
    <MagicSpells type="arcane" variant="warp" distortionStrength={50}>
      <div className="p-12 bg-zinc-950 rounded-3xl border border-white/10 overflow-hidden">
        <h2 className="text-4xl font-black italic text-white mb-4 uppercase">
          Flux Distortion
        </h2>
        <p className="text-zinc-400 max-w-md">
          Experience pixel-level space-time manipulation. This component wraps any content and distorts it dynamically based on cursor position.
        </p>
      </div>
    </MagicSpells>
  )
}