Grid Pattern

An interactive animated grid pattern visualization built with React and Vite. This demo creates block-wave patterns that travel horizontally across a grid with configurable parameters.

Features

• Animated Wave Patterns: Multiple seeds generate block-waves that travel horizontally with row-based phase offsets
• Interactive Controls: Adjust rows, columns, animation speed, block width, phase offset, and custom seed positions
• Real-time Configuration: Modify pattern parameters while the animation is running
• Pattern Operations: Start/stop animation, randomize grid, or clear to reset
• Visual Feedback: Color-coded intensity levels with smooth transitions

Project Structure

pattern-demo/
├── src/
│   ├── App.jsx          # Main application component with UI controls
│   ├── pattern.jsx      # Pattern generation logic and grid utilities
│   ├── main.jsx         # Application entry point
│   ├── index.css        # Global styles
│   ├── App.css          # Component-specific styles
│   └── assets/          # Static assets
├── public/              # Public assets
├── index.html           # HTML template
├── vite.config.js       # Vite configuration
├── eslint.config.js     # ESLint configuration
└── package.json         # Project dependencies

Getting Started

Prerequisites

• Node.js (v16 or higher recommended)
• npm or pnpm

Installation

npm install
# or
pnpm install

Development

npm run dev
# or
pnpm dev

Open your browser and navigate to the local development URL (typically http://localhost:5173).

Build

npm run build
# or
pnpm build

Preview Production Build

npm run preview
# or
pnpm preview

Configuration Options

• Rows/Cols: Grid dimensions (5-80 rows, 5-160 columns)
• MS / Tick: Animation speed in milliseconds per frame (minimum 20ms)
• Speed: Phase progression per tick (affects wave travel speed)
• Block Width: Width of each wave block
• Phase: Row offset amount (creates diagonal wave effect)
• Seeds: Custom starting positions for waves (comma-separated list)

Technologies

• React 19: UI framework
• Vite: Build tool and dev server
• Bootstrap 5: UI styling
• ESLint: Code linting

Tips

For patterns that closely match the reference video, try:

• Block Width: 4
• Phase: 2
• Adjust Speed and MS/Tick to your preference