[V0_FILE]typescript:file="shapes.ts" isEdit="true" isMerged="true" // Define the color scheme export const colors = [ "#4569B4", "#4F8382", "#C590BE", "#F58024", "#EE4C30", "#FDB627", "#F0D29E", "#000000", ] // Define a background color export const backgroundColor = "#FFFFFF" // White background // The shapes array remains unchanged export const shapes = [ "https://i.ibb.co/37MY3YC/shape-18.png", "https://i.ibb.co/Fq0sSXc/shape-17.png", "https://i.ibb.co/fY6JJvk/shape-10.png", "https://i.ibb.co/XFjzg9b/shape-13.png", "https://i.ibb.co/JQkNfqb/shape-19.png", "https://i.ibb.co/rtjJzmV/shape-01.png", "https://i.ibb.co/fxDY1n4/shape-24.png", "https://i.ibb.co/MP3YnB2/shape-12.png", "https://i.ibb.co/mSyp5Jd/shape-14.png", "https://i.ibb.co/0r9B1FM/shape-26.png", "https://i.ibb.co/kGPZTvL/shape-06.png", "https://i.ibb.co/s9q2Fbn/shape-08.png", "https://i.ibb.co/x38PcKN/shape-25.png", "https://i.ibb.co/fQpvCcG/shape-04.png", "https://i.ibb.co/mJFxTjw/shape-03.png", "https://i.ibb.co/Jz315qd/shape-21.png", "https://i.ibb.co/B2PLPrD/shape-20.png", "https://i.ibb.co/Dr7KCrT/shape-16.png", "https://i.ibb.co/WfbFkqS/shape-02.png", "https://i.ibb.co/N7zyG3x/shape-23.png", "https://i.ibb.co/rbhZGtt/shape-22.png", "https://i.ibb.co/fXR5d4J/shape-09.png", "https://i.ibb.co/3cBXdkp/shape-15.png", "https://i.ibb.co/9gGKNnv/shape-05.png", "https://i.ibb.co/Gcf3LPG/shape-27.png", "https://i.ibb.co/T0frDth/shape-11.png", "https://i.ibb.co/JCKwCcB/shape-07.png", ] [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import RandomShapesGrid from "../random-shapes-grid" import "./globals.css" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @keyframes ripple { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: 200px; height: 200px; opacity: 0; } } .animate-ripple { animation: ripple 1s ease-out; } [V0_FILE]typescriptreact:file="random-shapes-grid.tsx" isEdit="true" isQuickEdit="true" 'use client' import React, { useState, useCallback, useEffect, useMemo } from 'react' import { shapes } from './shapes' const colors = ['#0D3959', '#FF871F', '#E94D35', '#4E6A51']; const RandomShapesGrid: React.FC = () => { const [hoveredIndices, setHoveredIndices] = useState>(new Set()) const [rippleIndices, setRippleIndices] = useState>(new Map()) const [gridSize, setGridSize] = useState({ rows: 0, cols: 0 }) const getRandomShape = useCallback(() => shapes[Math.floor(Math.random() * shapes.length)], []) const getRandomColor = useCallback(() => { const shapeColors = ['#0D3959', '#FF871F', '#E94D35', '#4E6A51']; return shapeColors[Math.floor(Math.random() * shapeColors.length)]; }, []) useEffect(() => { const updateGridSize = () => { const tileSize = 125 // 125x125px tiles const cols = Math.ceil(window.innerWidth / tileSize) const rows = Math.ceil(window.innerHeight / tileSize) setGridSize({ rows, cols }) } updateGridSize() window.addEventListener('resize', updateGridSize) return () => window.removeEventListener('resize', updateGridSize) }, []) const tiles = useMemo(() => Array.from({ length: gridSize.rows * gridSize.cols }).map(() => ({ shape: getRandomShape(), color: getRandomColor() })), [gridSize, getRandomShape, getRandomColor] ) const getAdjacentIndices = useCallback((index: number) => { const { rows, cols } = gridSize const row = Math.floor(index / cols) const col = index % cols return [ index, index - cols, // top index + cols, // bottom row > 0 ? index - 1 : -1, // left col < cols - 1 ? index + 1 : -1, // right index - cols - 1, // top-left index - cols + 1, // top-right index + cols - 1, // bottom-left index + cols + 1, // bottom-right ].filter(i => i >= 0 && i < rows * cols) }, [gridSize]) const handleMouseEnter = useCallback((index: number) => { setHoveredIndices(new Set(getAdjacentIndices(index))) }, [getAdjacentIndices]) const handleMouseLeave = useCallback(() => { setHoveredIndices(new Set()) }, []) const propagateRipple = useCallback((index: number, depth: number = 0) => { if (depth > 5) return // Limit the ripple depth setRippleIndices(prev => { const newMap = new Map(prev) newMap.set(index, depth) return newMap }) getAdjacentIndices(index).forEach(adjIndex => { if (adjIndex !== index) { setTimeout(() => propagateRipple(adjIndex, depth + 1), 50) } }) setTimeout(() => { setRippleIndices(prev => { const newMap = new Map(prev) newMap.delete(index) return newMap }) }, 1000) // Remove the ripple effect after it's done }, [getAdjacentIndices]) const handleClick = useCallback((index: number) => { propagateRipple(index) }, [propagateRipple]) return (

{tiles.map((tile, index) => { const isHovered = hoveredIndices.has(index) const rippleDepth = rippleIndices.get(index) const isRippling = rippleDepth !== undefined const rotationAngle = isRippling ? 360 : (isHovered ? 180 : 0) return (

handleMouseEnter(index)} onMouseLeave={handleMouseLeave} onClick={() => handleClick(index)} >

) })}

) } export default RandomShapesGrid

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This