// FloatingIsland — the villa on a rock, painterly, drawn in CSS/SVG. // Includes slow vertical bob. Sheep are separate components. function FloatingIsland({ x = 960, y = 540, scale = 1, bob = true }) { const time = useTime(); const by = bob ? Math.sin(time * 0.6) * 8 : 0; return (
{/* Rock base */} {/* Rock underside — jagged, tapering to a point */} {/* Secondary rock chunk for depth */} {/* Grass top surface */} {/* Grass tufts */} {[150, 220, 290, 380, 460, 540, 620].map((gx, i) => ( ))} {/* Villa — main body */} {/* Back tower */} {/* Main body */} {/* Roof - gabled */} {/* Ornate gable */} {/* Windows — arched, glowing */} {/* Back tower windows */} {/* Iron balcony */} {Array.from({ length: 18 }).map((_, i) => ( ))} {/* Chimneys */} {/* Spire */}
); } // A single purple sheep — painterly. Props: x, y, size, facing (1 or -1), bob. function Sheep({ x = 100, y = 300, size = 1, facing = 1, bobPhase = 0, tone = '#b9a4d4' }) { const time = useTime(); const bob = Math.sin(time * 1.2 + bobPhase) * 1.5; return (
{/* Body */} {/* Puffy wool bumps */} {/* Head */} {/* Ear */} {/* Eye */} {/* Legs */}
); } Object.assign(window, { FloatingIsland, Sheep });