---
url: https://sugarat.top/weekly/2026-10-03.md
description: >-
  ① page-mascot - 灵动的鼠标跟随宠物 ② yoinks - 视频下载工具 CLI 版 ③ Web 常用音效合集 ④ 毁灭你的网站 ⑤
  无限背景音乐 ⑥ Amicro - 一些Nice的交互动效组件 ⑦ transitions.dev - 常用CSS过渡动画 ⑧ Vite+ 1.0 发布 ⑨
  为什么习惯 3000 和 8080 作为开发端口
---

# 视野修炼第135期 | 鼠标跟随宠物

欢迎来到第 135 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. page-mascot](https://github.com/nilbuild/page-mascot) - 灵动的鼠标跟随宠物

头像会自动跟随鼠标转动，点击也有不同的反馈。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/daa0c7bca5eef73254b8c21490efad4f)

原理是一张精灵图 + 一个封装好的Web组件。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/58ead09a940546d6dace6c09432284d7)

如果你是自己开发Web应用想加个交互的宠物的话可以考虑使用这个组件。

也可以自己用SKILL 定制。

```sh
npx skills add nilbuild/page-mascot --skill page-mascot --global --yes
```

我基于已有的参考图做的。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2dbc58627f38fad30d86b1e621e842a5)

*转向那张做的不太好，模型拉了！*

### [2. yoinks](https://github.com/pablostanley/yoinks) - 视频下载工具 CLI 版

*Powered by [yt-dlp](https://github.com/yt-dlp/yt-dlp)*

![](https://cdn.upyun.sugarat.top/mdImg/sugar/33306da80c724bc9b443fe89e3d2ec2d)

贴链接就能自动扒拉下来，还能选清晰度！

![](https://cdn.upyun.sugarat.top/mdImg/sugar/10f4d3ec77689ca282d97bf5440b1ace)

### [3. Web 常用音效合集](https://www.soundcn.xyz/?category=UI)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2d8b1a2c1608e99760802df0839dbeb8)

如果你要给你的应用加一些音效反馈的话这个很值得用上。

分场景整理了不少的音效，可以直接在线试听，一键下载使用。

## 🔧开源工具&技术资讯

### [4. 毁灭你的网站](https://destroy.spritefusion.com/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/e5cf791c7b28130b8ac17307abf4a1b8)

挺有意思的效果！输入你要 Play 的网站就可以开始了。

不过抓取网站快照渲染有些bug。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/ea759b3d47e88f027dedd31d02a4f347)

### [5. 无限背景音乐](https://bgm.fly2ai.top/)

浏览器中生成无限的BGM，纯离线。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/50d9e9b809e5bf45e667de0b65730d6b)

### [6. Amicro](https://amicro.vercel.app/cards) - 一些Nice的交互动效组件

比如按钮的动效。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/90ea65b8e7d3fabb755637d233021c4e)

卡片堆叠展开效果。
![](https://cdn.upyun.sugarat.top/mdImg/sugar/fc341a758f92c9301eb5458be2e89bfc)

Star⭐️

### [7. transitions.dev](https://transitions.dev/detail.html?t=notification-badge) - 常用CSS过渡动画

开箱即用支持 SKILL 调用，每个示例都有 Prompts 可以直接 Copy 使用。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/8f4ff86b2de1837642130011cd8ced1a)

收藏⭐️，VibeCoding 包用上。

### [8. Vite+ 1.0 发布](https://voidzero.dev/posts/announcing-vite-plus-1-0)

新机配环境可以直接用这个，新项目可以试试了。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/c91bb3e71947f9468265ebaa4b6433ce)

一条 `vp` 命令即可覆盖常见开发流程：

* Node版本管理(`vp env`)
* 包管理器自动识别(`vp install`)
* 开发服务器(`vp dev`)
* 代码检查、格式化、测试、构建和任务执行等

存量的 Vite Vitest ESLint、tsup 可以直接 `vp migrate` 迁移。

## 📚教程&文章

### [9. 为什么习惯 3000 和 8080 作为开发端口](https://smarmelling.com/posts/the-accidental-history-of-3000-8080-and-other-port-numbers.html)

省流：第一个人随手一选 + 后来者理性跟随

比如搞JAVA开发时用 Tomcat 默认端口就是 8080，后面JAVA 系的其它服务也用这个端口作为默认端口。

Ruby 普及了 3000 端口。

## ⭐️强力推荐关注

> 周刊部分内容来源如下渠道，推荐大家关注。

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [frontendfoc](https://frontendfoc.us/issues) - 🚀 Frontend **Focus**
* [JavaScript Weekly](https://javascriptweekly.com/issues) - A newsletter of JavaScript articles, news and cool projects
* [nodejs Weekly](https://nodeweekly.com/issues) - A free, once–weekly e-mail round-up of Node.js news and articles.