# visualization-collection

**Repository Path**: ms_utopia/visualization-collection

## Basic Information

- **Project Name**: visualization-collection
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-09-07
- **Last Updated**: 2025-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">visualization-collection</h1>
<div align="center">
一个专注于前端视觉效果的集合应用，包含CSS动效、Canvas动画、Three.js3D、人工智能应用等上百个案例（持续更新）
</div>

## 在线体验(PC端)
#### 体验地址：[http://hepengwei.cn](http://hepengwei.cn)

#### Vue版本：[https://github.com/hepengwei/visualization-collection-vue](https://github.com/hepengwei/visualization-collection-vue)
<br/>

## 应用展示(部分效果)
* 视觉设计
<img src="./src/images/readme/visualDesign.gif" alt="" width={1200}/>

* 交互设计
<img src="./src/images/readme/interactiveDesign1.gif" alt="" width={1200}/>

<img src="./src/images/readme/interactiveDesign2.gif" alt="" width={1200}/>

<img src="./src/images/readme/interactiveDesign3.gif" alt="" width={1200}/>

* Canvas动效
<img src="./src/images/readme/canvas1.gif" alt="" width={1200}/>

<img src="./src/images/readme/canvas2.gif" alt="" width={1200}/>

<img src="./src/images/readme/canvas3.gif" alt="" width={1200}/>

<img src="./src/images/readme/canvas4.gif" alt="" width={1200}/>

<img src="./src/images/readme/canvas5.gif" alt="" width={1200}/>

* 量子纠缠效果(隐藏款)
<img src="./src/images/readme/quantumEntanglement.gif" alt="" width={1200}/>
<br/>

## 本地启动
```
yarn
npm run dev
```

## 最新运行环境
node：v20.12.2
<br/>
npm：v10.5.0
<br/>
yarn：v1.22.22
<br/>
node-gyp：v10.1.0
<br/>

## 持续更新，敬请关注