Components
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.
Loading preview...
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;