93:I[903690,["/chat-static/_next/static/immutable/chunks/1fja-9o4htiyd.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/2-7e4htujee9a.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/1818z5b543ba3.js","/chat-static/_next/static/immutable/chunks/38-vahyesd4u5.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/03q5q9l0b0td3.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1l7u83pa-dy8n.js","/chat-static/_next/static/immutable/chunks/360dmexqj5t6n.js","/chat-static/_next/static/immutable/chunks/2d2qlyqy6bl_k.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/3fmtzjgs-xfg2.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/0nz4sbn57uq_0.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1fja-9o4htiyd.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/2-7e4htujee9a.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/1818z5b543ba3.js","/chat-static/_next/static/immutable/chunks/38-vahyesd4u5.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/03q5q9l0b0td3.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/3gdi4pfmm4dpp.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1l7u83pa-dy8n.js","/chat-static/_next/static/immutable/chunks/360dmexqj5t6n.js","/chat-static/_next/static/immutable/chunks/2d2qlyqy6bl_k.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/3fmtzjgs-xfg2.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/0nz4sbn57uq_0.js"],"SWRDataProvider"] 95:T1a58,[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 89:["$","$L93",null,{"chatId":"9nhcLm8ryFq","children":["$","$L94",null,{"data":{"@\"active-block\",\"9nhcLm8ryFq\",":{"id":"b_bV3WHLyn9Zy","messageId":"Q8AGzOfhgVeTum0wyhvR8iEc27kWJL5U","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"random-shapes-grid","type":"code-project","project":"random-shapes-grid"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"9nhcLm8ryFq\",":false},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from iverfinne

More Templates Like This