Magic Bento

Features 34

About

Here is Magic Bento component

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

Code

How Magic Bento is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import MagicBento from '@/components/ui/magic-bento';

const App = () => {
  return (
    <div className="min-h-screen bg-black flex justify-center items-center p-4">
      <MagicBento 
        textAutoHide={true}
        enableStars={true}
        enableSpotlight={true}
        enableBorderGlow={true}
        enableTilt={true}
        enableMagnetism={true}
        clickEffect={true}
        spotlightRadius={300}
        particleCount={12}
        glowColor="132, 0, 255"
      />
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(<App />);

export default App;