CartoonStone

Heroes 4

About

A visually polished 3D CartoonStone that brings a webpage to life. The face is fully interactive, with eyes that follow the user's cursor and a smile that reacts to mouse movement. It supports light and dark themes and features dramatic, multi-point lighting.

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

Code

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

Usage.tsx

import { CartoonStone } from "@/components/ui/cartoon-stone";
import React, { useState, useEffect } from 'react';
import { Sun, Moon } from 'lucide-react';
const DemoOne = () => {
  const [theme, setTheme] = useState('dark');

  useEffect(() => {
    document.documentElement.classList.remove('light', 'dark');
    document.documentElement.classList.add(theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <div style={{ position: 'relative', width: '100vw', height: '100vh', background: 'var(--background)' }}>
      <CartoonStone />
      
      <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: '1rem', right: '1rem', pointerEvents: 'auto' }}>
          <button
            onClick={toggleTheme}
            aria-label="Toggle theme"
            style={{
              background: 'var(--secondary)', color: 'var(--secondary-foreground)',
              border: 'none', borderRadius: '9999px',
              width: '40px', height: '40px', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative'
            }}
          >
            <Sun style={{ height: '1.2rem', width: '1.2rem', transform: theme === 'dark' ? 'rotate(-90deg) scale(0)' : 'rotate(0deg) scale(1)', transition: 'transform 0.3s' }} />
            <Moon style={{ height: '1.2rem', width: '1.2rem', position: 'absolute', transform: theme === 'dark' ? 'rotate(0deg) scale(1)' : 'rotate(90deg) scale(0)', transition: 'transform 0.3s' }} />
          </button>
        </div>
        <h1 style={{ fontSize: 'clamp(2.5rem, 6vw, 5rem)', fontWeight: 'bold', margin: 0 }}>Embrace the Chaos</h1>
        <p style={{ marginTop: '1rem', fontSize: 'clamp(1rem, 2vw, 1.5rem)', opacity: 0.8 }}>Find your smile in every puzzle.</p>
      </div>
    </div>
  );
};

export default DemoOne;