[V0_FILE]typescriptreact:file="landing-page.tsx" isEdit="true" 'use client' import { Canvas, useFrame } from '@react-three/fiber' import { OrbitControls, Grid } from '@react-three/drei' import { useEffect, useRef, useState } from 'react' import * as THREE from 'three' import { Manrope } from 'next/font/google' const manrope = Manrope({ subsets: ['latin'] }) function SpinningLogo() { const groupRef = useRef(null) useFrame((state, delta) => { if (groupRef.current) { groupRef.current.rotation.y += delta * 0.5 } }) return ( ) } function AnimatedBox({ initialPosition }: { initialPosition: [number, number, number] }) { const meshRef = useRef(null) const [targetPosition, setTargetPosition] = useState(new THREE.Vector3(...initialPosition)) const currentPosition = useRef(new THREE.Vector3(...initialPosition)) const getAdjacentIntersection = (current: THREE.Vector3) => { const directions = [ [1, 0], [-1, 0], [0, 1], [0, -1], ] const randomDirection = directions[Math.floor(Math.random() * directions.length)] return new THREE.Vector3( current.x + randomDirection[0] * 3, 0.5, current.z + randomDirection[1] * 3 ) } useEffect(() => { const interval = setInterval(() => { const newPosition = getAdjacentIntersection(currentPosition.current) newPosition.x = Math.max(-15, Math.min(15, newPosition.x)) newPosition.z = Math.max(-15, Math.min(15, newPosition.z)) setTargetPosition(newPosition) }, 1000) return () => clearInterval(interval) }, []) useFrame((state, delta) => { if (meshRef.current) { currentPosition.current.lerp(targetPosition, 0.1) meshRef.current.position.copy(currentPosition.current) } }) return ( ) } function Scene() { const initialPositions: [number, number, number][] = [ [-9, 0.5, -9], [-3, 0.5, -3], [0, 0.5, 0], [3, 0.5, 3], [9, 0.5, 9], [-6, 0.5, 6], [6, 0.5, -6], [-12, 0.5, 0], [12, 0.5, 0], [0, 0.5, 12], ] return ( <> {initialPositions.map((position, index) => ( ))} ) } export default function Component() { return (

A unified API for on-chain transactions

Route transactions from your dapp between L2 chains in real time

) }

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This

About

Tags

Share

About

Tags

Share

More from aryamank

More Templates Like This