[V0_FILE]typescript:file="lib/animation-utils.ts" isMerged="true" /** * Animation Utilities * Helper functions for animation calculations */ import type { AnimationPoint } from "@/types/animation.types" /** * Calculates eased progress using ease-in-out cubic * @param progress - Linear progress value (0-1) * @returns Eased progress value (0-1) */ export function easeInOutCubic(progress: number): number { return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2 } /** * Calculates the wave delay based on distance from center * @param x - X coordinate * @param y - Y coordinate * @param centerX - Center X coordinate * @param centerY - Center Y coordinate * @param maxDimension - Maximum of width or height * @param baseDelay - Base delay in milliseconds * @returns Calculated delay in milliseconds */ export function calculateWaveDelay( x: number, y: number, centerX: number, centerY: number, maxDimension: number, baseDelay: number, ): number { const distanceFromCenter = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)) return (distanceFromCenter / maxDimension) * baseDelay } /** * Projects 3D coordinates to 2D screen space * @param x - X coordinate * @param y - Y coordinate * @param z - Z coordinate (depth) * @param screenCenterX - Screen center X * @param screenCenterY - Screen center Y * @param perspective - Perspective distance * @returns Projected 2D coordinates with scale */ export function project3DTo2D( x: number, y: number, z: number, screenCenterX: number, screenCenterY: number, perspective: number, ): { x: number; y: number; scale: number } { const scale = perspective / (perspective - z) const projectedX = (x - screenCenterX) * scale + screenCenterX const projectedY = (y - screenCenterY) * scale + screenCenterY return { x: projectedX, y: projectedY, scale } } /** * Updates an animation point's position based on current time * @param point - Animation point to update * @param currentTime - Current timestamp * @param isForward - Whether animating forward (to shape) or backward (to grid) */ export function updatePointPosition(point: AnimationPoint, currentTime: number, isForward: boolean): void { if (point.shouldStart && !point.isMoving && currentTime >= point.startTime) { point.isMoving = true } if (!point.isMoving) return const elapsed = currentTime - point.startTime const progress = Math.min(elapsed / point.duration, 1) const easedProgress = easeInOutCubic(progress) if (isForward) { point.currentX = point.x + (point.targetX - point.x) * easedProgress point.currentY = point.y + (point.targetY - point.y) * easedProgress point.currentZ = point.targetZ * easedProgress } else { point.currentX = point.targetX + (point.x - point.targetX) * easedProgress point.currentY = point.targetY + (point.y - point.targetY) * easedProgress point.currentZ = point.targetZ * (1 - easedProgress) } if (progress >= 1) { point.isMoving = false point.shouldStart = false if (isForward) { point.currentX = point.targetX point.currentY = point.targetY point.currentZ = point.targetZ } else { point.currentX = point.x point.currentY = point.y point.currentZ = 0 } } } [V0_FILE]typescript:file="lib/shape-generators/triangle-generator.ts" isQuickEdit="true" isMerged="true" /** * Triangle Shape Generator * Generates point positions for an equilateral triangle formation with intelligent row detection */ import type { Position2D, TriangleRowData } from "@/types/animation.types" import type { ShapeGenerator } from "./base-generator" import { TRIANGLE_CONFIG } from "../animation-config" export class TriangleGenerator implements ShapeGenerator { /** * Calculates all row data for the triangle */ private calculateRows(totalPoints: number, size: number, centerY: number): TriangleRowData[] { const numRows = Math.floor(Math.sqrt(totalPoints * 2)) const spacing = size / numRows const triangleHeight = size * TRIANGLE_CONFIG.heightRatio const rowsData: TriangleRowData[] = [] for (let row = 0; row < numRows; row++) { const rowProgress = row / Math.max(numRows - 1, 1) const rowY = centerY - triangleHeight / 2 + triangleHeight * rowProgress const rowWidth = size * rowProgress const pointsInRow = row === 0 ? 1 : Math.max(1, Math.round(rowWidth / spacing) + 1) rowsData.push({ pointsInRow, rowWidth, rowProgress, rowY }) } return rowsData } /** * Removes incomplete rows from the triangle base */ private removeIncompleteRows(rowsData: TriangleRowData[]): TriangleRowData[] { if (rowsData.length <= 2) return rowsData const lastRow = rowsData[rowsData.length - 1] const secondLastRow = rowsData[rowsData.length - 2] const thirdLastRow = rowsData[rowsData.length - 3] // Calculate expected growth based on previous row increments const previousGrowth = secondLastRow.pointsInRow - thirdLastRow.pointsInRow const expectedPoints = secondLastRow.pointsInRow + previousGrowth const actualPoints = lastRow.pointsInRow // Also check if the last row violates the width progression const widthRatio = lastRow.rowWidth / secondLastRow.rowWidth const isWidthAnomalous = widthRatio < 1.05 // Last row should be noticeably wider console.log("[v0] Row validation:", { lastRowPoints: actualPoints, expectedPoints, threshold: expectedPoints * TRIANGLE_CONFIG.incompleteRowThreshold, widthRatio, isWidthAnomalous, }) // Remove last row if it's incomplete or anomalous if (actualPoints < expectedPoints * TRIANGLE_CONFIG.incompleteRowThreshold || isWidthAnomalous) { console.log("[v0] Detected incomplete/anomalous last row, removing it") return rowsData.slice(0, -1) } return rowsData } /** * Generates all positions from validated row data */ private generatePositions(rowsData: TriangleRowData[], centerX: number): Position2D[] { const positions: Position2D[] = [] for (const { pointsInRow, rowWidth, rowY } of rowsData) { for (let col = 0; col < pointsInRow; col++) { const colProgress = pointsInRow > 1 ? col / (pointsInRow - 1) : 0.5 const x = centerX - rowWidth / 2 + rowWidth * colProgress const y = rowY positions.push({ x, y }) } } return positions } calculatePosition(index: number, totalPoints: number, centerX: number, centerY: number, size: number): Position2D { // Calculate all rows let rowsData = this.calculateRows(totalPoints, size, centerY) // Remove incomplete rows rowsData = this.removeIncompleteRows(rowsData) // Generate positions const positions = this.generatePositions(rowsData, centerX) // Return position for this index (wrap if necessary) if (positions.length > 0) { return positions[index % positions.length] } // Fallback to center return { x: centerX, y: centerY } } } [V0_FILE]typescript:file="lib/shape-generators/square-generator.ts" isQuickEdit="true" isMerged="true" /** * Square Shape Generator * Generates point positions for a square formation */ import type { Position2D } from "@/types/animation.types" import type { ShapeGenerator } from "./base-generator" interface SquareRowData { row: number pointsInRow: number rowWidth: number } export class SquareGenerator implements ShapeGenerator { calculatePosition(index: number, totalPoints: number, centerX: number, centerY: number, size: number): Position2D { const spacing = 8 const pointsPerSide = Math.ceil(Math.sqrt(totalPoints)) const rows: SquareRowData[] = [] let remainingPoints = totalPoints for (let row = 0; row < pointsPerSide; row++) { const pointsInThisRow = Math.min(pointsPerSide, remainingPoints) rows.push({ row, pointsInRow: pointsInThisRow, rowWidth: size, }) remainingPoints -= pointsInThisRow if (remainingPoints <= 0) break } // Remove incomplete rows (rows with fewer points than expected) const completeRows = this.filterIncompleteRows(rows, pointsPerSide) const totalCompletePoints = completeRows.reduce((sum, row) => sum + row.pointsInRow, 0) // If the requested index is beyond complete points, return the last valid position if (index >= totalCompletePoints) { const lastRow = completeRows[completeRows.length - 1] const lastCol = lastRow.pointsInRow - 1 return { x: centerX - size / 2 + (size * lastCol) / Math.max(lastRow.pointsInRow - 1, 1), y: centerY - size / 2 + (size * lastRow.row) / Math.max(pointsPerSide - 1, 1), } } // Second pass: Generate positions using only complete rows let currentIndex = 0 for (const rowData of completeRows) { if (currentIndex + rowData.pointsInRow > index) { const col = index - currentIndex return { x: centerX - size / 2 + (size * col) / Math.max(rowData.pointsInRow - 1, 1), y: centerY - size / 2 + (size * rowData.row) / Math.max(pointsPerSide - 1, 1), } } currentIndex += rowData.pointsInRow } // Fallback const row = Math.floor(index / pointsPerSide) const col = index % pointsPerSide return { x: centerX - size / 2 + (size * col) / Math.max(pointsPerSide - 1, 1), y: centerY - size / 2 + (size * row) / Math.max(pointsPerSide - 1, 1), } } /** * Filters out incomplete rows from the square * @param rows - All calculated rows * @param expectedPointsPerRow - Expected number of points per row * @returns Filtered array of complete rows */ private filterIncompleteRows(rows: SquareRowData[], expectedPointsPerRow: number): SquareRowData[] { if (rows.length === 0) return rows const filteredRows = [...rows] const lastRow = filteredRows[filteredRows.length - 1] const completionThreshold = 0.9 if (lastRow.pointsInRow < expectedPointsPerRow * completionThreshold) { // Last row is incomplete, remove it filteredRows.pop() } return filteredRows } } [V0_FILE]typescript:file="lib/shape-generators/index.ts" isMerged="true" /** * Shape Generators Index * Factory for creating shape generators */ import type { ShapeType } from "@/types/animation.types" import type { ShapeGenerator } from "./base-generator" import { SquareGenerator } from "./square-generator" import { TriangleGenerator } from "./triangle-generator" /** * Factory function to create the appropriate shape generator */ export function createShapeGenerator(shape: ShapeType): ShapeGenerator { switch (shape) { case "square": return new SquareGenerator() case "triangle": return new TriangleGenerator() default: throw new Error(`Unknown shape type: ${shape}`) } } export type { ShapeGenerator } from "./base-generator" [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.454.0", "next": "16.0.10", "react": "19.2.0", "react-dom": "19.2.0", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "@vercel/analytics": "1.6.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescript:file="types/animation.types.ts" isEdit="true" isQuickEdit="true" isMerged="true" /** * Animation Types * Defines all TypeScript interfaces and types for the 3D grid animation system */ /** * Supported geometric shapes for animation */ export type ShapeType = "square" | "triangle" /** * Represents a single point in the 3D animation space */ export interface AnimationPoint { /** Original X position in the grid */ x: number /** Original Y position in the grid */ y: number /** Current X position during animation */ currentX: number /** Current Y position during animation */ currentY: number /** Current Z position (depth) during animation */ currentZ: number /** Target X position in the geometric shape */ targetX: number /** Target Y position in the geometric shape */ targetY: number /** Target Z position (depth) in the geometric shape */ targetZ: number /** Delay before animation starts (ms) */ startDelay: number /** Duration of the animation (ms) */ duration: number /** Timestamp when animation started */ startTime: number /** Whether the point is currently animating */ isMoving: boolean /** Whether the point should start animating */ shouldStart: boolean } /** * Configuration parameters for the animation system */ export interface AnimationConfig { /** Size of the geometric shape in pixels */ shapeSize: number /** Spacing between grid points in pixels */ gridSpacing: number /** Grid density multiplier (0.5 = denser, 2 = sparser) */ gridDensity: number /** Perspective distance for 3D projection */ perspective: number /** Target Z depth for animated points */ targetDepth: number /** Base wave delay for staggered animation (ms) */ baseWaveDelay: number /** Random offset range for animation delays (ms) */ randomDelayOffset: number /** Minimum animation duration (ms) */ minDuration: number /** Maximum animation duration (ms) */ maxDuration: number } /** * 2D coordinate position */ export interface Position2D { x: number y: number } /** * Row data for triangle shape generation */ export interface TriangleRowData { pointsInRow: number rowWidth: number rowProgress: number rowY: number } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import type { ShapeType, AnimationPoint, AnimationConfig } from "@/types/animation.types" import { DEFAULT_ANIMATION_CONFIG } from "@/lib/animation-config" import { createShapeGenerator } from "@/lib/shape-generators" import { calculateWaveDelay, project3DTo2D, updatePointPosition } from "@/lib/animation-utils" import { AnimationControls } from "@/components/animation-controls" export default function D3AnimationPage() { const canvasRef = useRef(null) const animationRef = useRef() const pointsRef = useRef([]) const isAnimatingRef = useRef(false) const [isAnimating, setIsAnimating] = useState(false) const [selectedShape, setSelectedShape] = useState("triangle") const [copied, setCopied] = useState(false) const [config, setConfig] = useState(DEFAULT_ANIMATION_CONFIG) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return const handleResize = () => { const width = window.innerWidth const height = window.innerHeight canvas.width = width canvas.height = height const isMobile = width < 768 const baseSpacing = isMobile ? config.gridSpacing * 1.2 : config.gridSpacing const spacing = baseSpacing * config.gridDensity const cols = Math.floor(width / spacing) const rows = Math.floor(height / spacing) const centerX = width / 2 const centerY = height / 2 const generator = createShapeGenerator(selectedShape) const points: AnimationPoint[] = [] for (let i = 0; i < rows; i++) { for (let j = 0; j < cols; j++) { const index = i * cols + j const gridX = j * spacing + spacing / 2 const gridY = i * spacing + spacing / 2 const waveDelay = calculateWaveDelay( gridX, gridY, width / 2, height / 2, Math.max(width, height), config.baseWaveDelay, ) const randomOffset = Math.random() * config.randomDelayOffset const targetPos = generator.calculatePosition(index, rows * cols, centerX, centerY, config.shapeSize) points.push({ x: gridX, y: gridY, currentX: gridX, currentY: gridY, currentZ: 0, targetX: targetPos.x, targetY: targetPos.y, targetZ: config.targetDepth, startDelay: waveDelay + randomOffset, duration: config.minDuration + Math.random() * (config.maxDuration - config.minDuration), startTime: 0, isMoving: false, shouldStart: false, }) } } pointsRef.current = points } handleResize() window.addEventListener("resize", handleResize) const renderFrame = () => { const width = canvasRef.current?.width || 0 const height = canvasRef.current?.height || 0 const ctx = canvasRef.current?.getContext("2d") if (!ctx) return ctx.fillStyle = "black" ctx.fillRect(0, 0, width, height) const now = Date.now() const points = pointsRef.current points.forEach((point) => { updatePointPosition(point, now, isAnimatingRef.current) const projected = project3DTo2D( point.currentX, point.currentY, point.currentZ, width / 2, height / 2, config.perspective, ) const speed = point.isMoving ? Math.abs(point.currentZ) / 500 : 0 const radius = 2 * projected.scale if (speed > 0.3 && point.isMoving) { ctx.fillStyle = `rgba(255, 255, 255, ${0.3 * speed})` ctx.beginPath() ctx.arc(projected.x, projected.y, radius * (1 + speed * 0.5), 0, Math.PI * 2) ctx.fill() } ctx.fillStyle = "white" ctx.beginPath() ctx.arc(projected.x, projected.y, radius, 0, Math.PI * 2) ctx.fill() }) animationRef.current = requestAnimationFrame(renderFrame) } renderFrame() return () => { window.removeEventListener("resize", handleResize) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [selectedShape, config]) useEffect(() => { if (isAnimating) { setIsAnimating(false) isAnimatingRef.current = false } }, [config, selectedShape]) const handleAnimate = () => { const now = Date.now() const newState = !isAnimating pointsRef.current.forEach((point) => { point.startTime = now + point.startDelay point.shouldStart = true }) setIsAnimating(newState) isAnimatingRef.current = newState } const handleShapeChange = (shape: ShapeType) => { if (isAnimating) { handleAnimate() } setSelectedShape(shape) } const handleConfigChange = (key: keyof AnimationConfig, value: number) => { setConfig((prev) => ({ ...prev, [key]: value, ...(key === "minDuration" && { maxDuration: Math.max(value, prev.maxDuration) }), })) } const handleCopyParameters = () => { const params = { shape: selectedShape, ...config, } navigator.clipboard.writeText(JSON.stringify(params, null, 2)) setCopied(true) setTimeout(() => setCopied(false), 2000) } return (

) } [V0_FILE]typescriptreact:file="components/animation-controls.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Copy, Check, Square, Triangle, ChevronLeft, ChevronRight } from "lucide-react" import type { ShapeType, AnimationConfig } from "@/types/animation.types" interface AnimationControlsProps { selectedShape: ShapeType isAnimating: boolean config: AnimationConfig onShapeChange: (shape: ShapeType) => void onAnimate: () => void onCopyParameters: () => void onConfigChange: (key: keyof AnimationConfig, value: number) => void copied: boolean } const SHAPES: { value: ShapeType; icon: React.ComponentType<{ className?: string }> }[] = [ { value: "square", icon: Square }, { value: "triangle", icon: Triangle }, ] export function AnimationControls({ selectedShape, isAnimating, config, onShapeChange, onAnimate, onCopyParameters, onConfigChange, copied, }: AnimationControlsProps) { const [isExpanded, setIsExpanded] = useState(true) return (

{SHAPES.map(({ value, icon: Icon }) => ( ))}

{isExpanded && (

Speed onConfigChange("minDuration", value)} min={200} max={2000} step={50} className="w-full touch-manipulation" /> {config.minDuration}ms

Randomness onConfigChange("randomDelayOffset", value)} min={0} max={1000} step={50} className="w-full touch-manipulation" /> {config.randomDelayOffset}ms

Depth onConfigChange("targetDepth", -value)} min={200} max={1000} step={50} className="w-full touch-manipulation" /> {Math.abs(config.targetDepth)}px

Wave Delay onConfigChange("baseWaveDelay", value)} min={0} max={2000} step={100} className="w-full touch-manipulation" /> {config.baseWaveDelay}ms

Grid Density onConfigChange("gridDensity", value)} min={0.5} max={2} step={0.1} className="w-full touch-manipulation" /> {config.gridDensity.toFixed(1)}x

)} {isExpanded && ( )} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata, Viewport } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Grid Animation", description: "Interactive canvas grid animation with geometric shapes", generator: "v0.app", openGraph: { title: "Grid Animation", description: "Interactive canvas grid animation with geometric shapes", images: [ { url: "/images/image-1.png", width: 1200, height: 630, alt: "Grid Animation Preview", }, ], }, twitter: { card: "summary_large_image", title: "Grid Animation", description: "Interactive canvas grid animation with geometric shapes", images: ["/images/image-2.png"], }, icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export const viewport: Viewport = { width: "device-width", initialScale: 1, maximumScale: 1, userScalable: false, themeColor: "#000000", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]png:file="public/images/image-1.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/---UxzlPj4h7F7R6PZJlhDfW1mURIiQDs.png" isMerged="true" [V0_FILE]png:file="public/images/image-2.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/---UxzlPj4h7F7R6PZJlhDfW1mURIiQDs.png" isMerged="true" [V0_FILE]typescript:file="lib/animation-config.ts" isEdit="true" isQuickEdit="true" /** * Animation Configuration * Central configuration file for all animation parameters */ import type { AnimationConfig } from "@/types/animation.types" /** * Default configuration for the 3D grid animation */ export const DEFAULT_ANIMATION_CONFIG: AnimationConfig = { shapeSize: 400, gridSpacing: 50, gridDensity: 0.5, perspective: 1000, targetDepth: -550, baseWaveDelay: 2000, randomDelayOffset: 1000, minDuration: 300, maxDuration: 2000, } /** * Configuration specific to triangle shape generation */ export const TRIANGLE_CONFIG = { /** Multiplier for triangle height (√3/2 for equilateral triangle) */ heightRatio: 0.866, /** Threshold for detecting incomplete rows (0-1) */ incompleteRowThreshold: 0.8, } as const /** * Configuration for ASCII visualization */ export const ASCII_CONFIG = { width: 60, height: 40, dotCharacter: "●", emptyCharacter: " ", } as const

About

Tags

Share

About

Tags

Share

More from camilocbarrera

About

Tags

Share

About

Tags

Share

More from camilocbarrera