Sandpack avec Shader Background

Éditeur de code interactif avec des effets visuels élégants et performants. Parfait pour démontrer du code avec style.

import { Warp } from "@paper-design/shaders-react";

export default function App() {
  return (
    <main className="relative min-h-screen overflow-hidden">
      <div className="absolute inset-0">
        <Warp
          style={{ height: "100%", width: "100%" }}
          colors={["#ff6b35", "#f7931e", "#ffb627"]}
          speed={2}
          swirl={0.9}
        />
      </div>

      <div className="relative z-10 flex items-center justify-center min-h-screen p-8">
        <div className="text-center text-white">
          <h1 className="text-4xl font-bold mb-4">Hello Sandpack!</h1>
          <p className="text-xl">Déployé avec des effets visuels incroyables ✅</p>
        </div>
      </div>
    </main>
  );
}

Open Sandbox