AI 摘要：本文涵盖了前端开发的多个热门话题和技术更新，包括 CSS 滚动驱动动画、Web 机器人检测技术、Web 可访问性、Astro 5.10 发布、Firefox 140.0 新功能，以及多种 CSS 技术和工具资源。文章通过教程、工具介绍和行业动态，为前端开发者提供了丰富的学习和实践资源。

1. CSS 滚动驱动动画指南 - Saron Yitbarek
• 介绍了如何使用 CSS 的 scroll() 和 view() 函数实现滚动驱动动画，无需 JavaScript。
• 提供了代码示例，展示如何创建进度条或将元素动画效果引入视口。
• 强调了可访问性和运动敏感性考虑。
2. Web 机器人与检测技术简史 - OlegWock
• 概述了 Web 机器人与检测技术之间的“猫鼠游戏”。
• 探讨了机器人演变、IP 声誉、指纹识别、无头浏览器漏洞、代理检测、CAPTCHA 和行为分析等技术。
3. Astro 5.10 发布
• 重点介绍了 Astro 的响应式图片功能已正式上线。
• 新增实验性实时动态内容获取功能，并改进了 CSP 支持。
4. Firefox 140.0 新功能与更新
• 介绍了 Firefox 最新版本新增的垂直标签功能。
• 支持自定义高亮 API 和 SVG fetchpriority 属性等。
5. 简讯（IN BRIEF）
• JSON 模块脚本现已作为 Baseline 新功能可用。
• Mozilla 更新了 Firefox 插件政策，将于 8 月生效。
• 2025 年 CSS 状态调查仅剩一周时间完成。
6. 文章、观点与教程
• CSS 中的 Liquid Glass 设计 - Pup Atlas：实现了 Apple 的 Liquid Glass 设计语言，但兼容性较差，属于有趣的实验。
• Chrome 137 中 CSS if 函数初探 - Sunkanmi Fafowora：探讨了该函数的语法、工作原理及与其他属性的结合应用。
• CSS 层级、BEM 与工具类：特异性控制 - Victor Ayomipo：分析 CSS 特异性问题，避免使用 !important 标记。
• JPEG 如何成为互联网图像标准 - Ernie Smith：回顾 JPEG 格式 30 年来的历史及影响。
• 实现内联文档查看器的经验教训 - Anjali Munasinghe：分享项目实施中的经验。
• 使用 Three.js、GSAP 和 Web Audio API 编码 3D 音频可视化器 - Filip Zrnzevic：技术实现教程。
7. 工具、代码与资源
• Mossaik - Gabriel Perales：基于 Web 的工具，用于创建 SVG 背景，支持多种形状和自定义设置。 #svg #tools
• <syntax-highlight>：自定义元素，利用 CSS 自定义高亮 API 实现语法高亮。
• Browser MCP：连接 AI 应用到浏览器，自动化测试和任务，支持 VS Code、Claude 等工具。
• Contrast Report：WCAG 颜色对比检查工具，支持分享链接和颜色选择功能。
• Text to SVG：将文本转换为 SVG 路径的工具。
• SlimImg：浏览器内图像压缩工具。

WebKit

A guide to Scroll-driven Animations with just CSS

CSS animations have come a long way since Apple first introduced them to the web in 2007.

AI 摘要：本文是 React Status 第 433 期newsletter，发布于 2025 年 6 月 25 日，涵盖了 React 及相关生态系统的最新动态和技术资源。内容包括 Recharts 3.0 的重大更新、Vercel Ship 2025 直播活动、Vite 7.0 发布、React Native 在 macOS 桌面应用开发中的应用、AWS 无服务器框架 SST v3 的介绍，以及众多 React 相关工具、库和文章。此外，还包括 JavaScript 领域的其他重要资讯，如 Bun v1.2.17、Node.js 新版本发布等，旨在为前端开发者提供全面的技术更新和学习资源。

1. Recharts 3.0 发布：介绍了 Recharts 3.0 作为一个基于 D3 的 React 图表库的重大重构版本，支持多种图表类型（如折线图、面积图、柱状图等），并提供示例代码和 GitHub 仓库链接。
2. Vercel Ship 2025 直播活动：报道 Vercel Ship 2025 活动，包含 Guillermo Rauch 的 keynote 演讲，分享 Next.js 及 Vercel 平台最新动态，并提供直播链接和日程安排。
3. 简讯 (IN BRIEF)：汇总了 Vite 7.0 发布及其迁移指南、React Native Skia 在高级图形领域的未来展望（涉及 WebGPU、Three.js 等）、Certificates.dev 提供的 React 认证等资讯。
4. React Native 构建 macOS 桌面应用：通过 Jack Herrington 的 14 分钟视频教程，展示如何使用 React Native 开发 macOS 桌面 AI 聊天机器人应用，强调 React Native 的跨平台能力。
5. SST v3：现代 AWS 无服务器基础设施，用于 TypeScript 定义全栈应用基础设施，展示如何在 AWS 上部署 React 和 Hono 应用，并与 Terraform、CloudFormation 进行对比。
6. 技术文章与视频：列举多篇技术文章和视频，如将 React 的 <ViewTransition> 引入 Vanilla JS、React 重新渲染的触发机制、Next.js 和 Vercel 博客迁移、AI 重建 Rails 页面为 Next.js、TanStack Query 在 Expo 应用中的使用等。
7. 代码、工具与库：推荐多个 React 相关工具和库，包括 Cloudflare 的 use-mcp 钩子、Warka（React 驱动的电子墨水显示框架）、Soundz（组件音效库）、react-force-graph（力导向图可视化工具）等，以及多个库的版本更新信息。
8. JavaScript 领域其他资讯：涵盖 CKEditor 优化包大小的经验、Bun v1.2.17 支持提前捆绑、AdonisJS 7 路线图、JavaScript 正则表达式使用技巧、SVGO 4.0 发布、<syntax-highlight> 自定义元素、Node.js 最新版本发布等。

GitHub

Release v3.0.0 · recharts/recharts

🚀 Recharts 3 is here!
Huge shoutout to @PavelVanecek who wrote 95% of the code for this major version release. We re-wrote recharts state management, wrote some 3500 unit tests, fixed a bunch of bu...

AI 摘要： 本文是 Node Weekly 第 583 期的内容，发布于 2025 年 6 月 24 日，聚焦 JavaScript 和 Node.js 生态系统的最新动态与技术进展。文章涵盖了 AdonisJS 7 的路线图、Node.js 及其替代运行时 Bun 的最新版本更新、Vite 7.0 的发布预告，以及多线程、序列化、正则表达式等技术主题的深入探讨。此外，还介绍了多个工具和框架的更新，如 SVGO 4.0、Hono 4.8 等，并分享了 JavaScript 领域的其他重要新闻和资源。

1. AdonisJS 7 路线图：
• 介绍了 AdonisJS 作为一个 TypeScript 优先的“全能型”Web 框架，其开发者计划加快重大版本的发布频率。
• v7 版本亮点包括 Node.js 诊断通道支持、类型安全的 URL 构建器、新加密层、对通知和 TanStack Query 的原生支持等。
• 作者 Romain Lanz 还提供了 Adonis 与 Nest 的对比分析，并鼓励读者提供反馈。

2. 简讯 (In Brief)：
• Node v20.19.3 (LTS) 发布，WebCryptoAPI 中的 Ed25519 和 X25519 提升为稳定状态，更新根证书和依赖项，并包含 V8 修复补丁。
• Bun v1.2.17 支持服务器端代码的提前打包，进一步提升 Node.js 兼容性。
• Vite 7.0 刚刚发布，更多细节将在 JavaScript Weekly 的周五报道中披露。

3. 技术文章与教程：
• Worker Threads: Node 中的多线程指南：探讨 Node 的非阻塞事件驱动模型，以及如何通过成熟的 worker threads 功能实现多线程应用 (作者：Lizz Parody)。
• Node 中序列化方法的基准测试：对比 JSON 及二进制选项如 protobuf 和 msgpack 的性能 (作者：Adam Faulkner)。
• JavaScript 中正则表达式使用技巧：Dr. Axel Rauschmayer 提供了一些方法，使正则表达式编写更加简洁和易读。
• 其他内容包括使用 AI 生成 Playwright 测试、MongoDB 测试、CommonJS 与 ESM 桥接、以及基于 Node 和 OpenAI 构建 RAG 系统等教程和视频。

4. 代码与工具 (Code & Tools)：
• SVGO 4.0：Node 驱动的 SVG 优化工具，v4.0 带来默认插件、公共 API 的重大变更，并支持 ESM/CJS 双包模式 (作者：Kir Belevich)。
• Hono 4.8：跨运行时的 Web 标准框架，新增路由辅助函数、JSX 流式传输和 CORS 改进，以及静态站点生成插件系统 (作者：Yusuke Wada 等)。
• LogTape 1.0.0：适用于 Node、浏览器和边缘函数的通用日志工具，特别适合希望以低门槛方式为最终用户添加日志的库开发者 (作者：Hong Minhee)。
• 其他工具更新包括 zx 8.6、Typegoose 12.17、OpenAI Node 5.7、Electron 37.0、BullMQ 5.56 和 Mocha 11.7。

5. JavaScript 领域其他动态 (Elsewhere in JavaScript)：
• Dr. Axel Rauschmayer 发布新书《Exploring JavaScript (ES2025 Edition)》，免费在线阅读并附带学习卡片。
• Porffor 提前编译 JavaScript 编译器的创建者分享了工作原理的演讲。
• 介绍新的自定义元素 <syntax-highlight>，利用 CSS Custom Highlight API 简化语法高亮。
• Git 2.50.0 发布，包含重要更新；浏览器中 JSON 模块脚本现已“Baseline Newly Available”。

若要免费使用 Gemini CLI，只需使用个人 Google 账户登录，即可获得免费的 Gemini Code Assist 许可证。该免费许可证可让您使用 Gemini 2.5 Pro 及其庞大的 100 万词元 (token) 上下文窗口。为确保您在此预览版期间极少（甚至不会）达到用量上限，我们提供了业界最充裕的免费额度：每分钟 60 次模型请求和每日 1,000 次请求。

如果您是需要同时运行多个代理的专业开发者，或者偏好使用特定模型，您可以使用 Google AI Studio 或 Vertex AI 的密钥来按使用量计费，或获取 Gemini Code Assist 标准版或企业版许可证。

现已推出预览版的 Gemini CLI 提供强大的 AI 功能，从代码理解、文件操作到命令执行和动态故障排除。它为您的命令行体验带来根本性的升级，让您能用自然语言编写代码、调试问题并简化您的工作流。

通过 Google 搜索为提示提供事实依据，以便抓取网页内容，并为模型提供实时的外部上下文。
通过对模型上下文协议 (MCP) 的内置支持或捆绑的扩展来扩展 Gemini CLI 的能力。
自定义提示和指令，以针对您的特定需求和工作流调整 Gemini。
在您的脚本中以非交互方式调用 Gemini CLI，以自动化任务并与现有工作流集成。
Gemini CLI 可用于多种任务，包括使用 Veo 和 Imagen 制作一部短片，讲述一只橘猫在澳大利亚冒险的故事。

Google

Gemini CLI: your open-source AI agent

Free and open source, Gemini CLI brings Gemini directly into developers’ terminals — with unmatched access for individuals.

截至本文写作时（2025 年 6 月）， corner-shape 是一个非常新的特性，浏览器支持有限，目前仅在 Chrome（版本 M139 及以上）中可用。规范可能仍会发生变化。现在就尝试 Chrome Canary 来查看这些演示。

AI 摘要：本文深入探讨了 CSS 的新兴属性 corner-shape ，这一属性极大地扩展了网页设计中对元素边角样式的控制能力，超越了传统的 border-radius 圆角效果，引入了多样化的几何形状选项，并结合超级椭圆（Superellipse）概念，提供了更精细的设计可能性。文章从 border-radius 的基础讲起，逐步介绍了 corner-shape 的多种预定义形状关键字、多值组合应用、动画过渡效果，以及超级椭圆函数的强大功能，旨在启发开发者在设计中尝试创新的边角样式。

Frontend Masters

Understanding CSS corner-shape and the Power of the Superellipse

The CSS corner-shape property represents one of the most exciting additions to web design’s geometric toolkit in recent years. Extending our ability to control the appearance of corners beyond the simple rounded edges we’ve become accustomed to with border…

AI 摘要：本文详细介绍了如何通过重构 MutationObserver 和 IntersectionObserver 的 API，使其使用更加简洁和直观。作者通过提供简化的代码示例，展示了如何将复杂的观察者 API 转换为易用的回调模式和事件监听模式，并详细解释了相关的选项和方法。此外，作者还推荐了 Splendid Labz 的工具库，方便开发者直接使用这些重构后的 API，同时分享了学习重构和 JavaScript 的经验。

CSS-Tricks

A Better API for the Intersection and Mutation Observers | CSS-Tricks

Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

UI Cards Hover Collection ™

感想就是感觉这游戏完全不应该被名字或者某些片段片面判断，这游戏内核更多像是反邪教反不平等的恋爱关系等等等，我觉得改的名字情感反诈模拟器还挺符合了，30 非常非常值。
以下是一些杂乱的评论：

感觉这游戏第二章开头有一种以前看异物志的感觉，风格好喜欢（x）

这拍的是真好，运镜和各种镜头都好自然。

第一章第二章：诶好尬这男主不行啊，但是镜头质感挺好挺电影感的
第三章：卧槽神回
后面一口气看完看完再回味好像也还可以，该收的伏笔也都回收了，不愧是拍电影的

本来以为是图一乐系列，玩完第三章我是真服气，这就是第九艺术啊！
表现力真的很强，尤其是第三章那一段没忍住
通宵打完游戏了……含金量真高吧，第一次想看游戏的影评。

网上对后面的章节反响一般，我感觉虽然打不到第三章巅峰但也是很不错的，有很多电影拍摄的手法，上一个给我这种感觉的类似的游戏好像是……底特律变人？总之这些方面吊打完蛋美女之类的影游了，演员演技都贼好贼好

而且这游戏感觉也属于后劲贼大的那一挂，代入进去的话，

AI 摘要：本期 Awesome JavaScript Weekly 汇集了 JavaScript 领域的最新动态和技术文章，涵盖了工具更新、前端开发技巧、新的编程框架以及库和项目的趋势。文章讨论了 Biome v2 的新功能、React 风格的钩子实现、异步函数式编程数据类型、浏览器引擎开发、Meteor 3.3 的性能优化等多个主题，同时介绍了 Elixir 作为 JavaScript 的替代方案、Temporal API 的 Rust 实现等创新内容。此外，还推荐了一些热门的 JavaScript 库和工具。

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

AI 摘要： 本期 React Status 通讯聚焦于 React 生态系统的最新动态与未来趋势，探讨了 React 19 带来的特性与争议，Redux 维护者 Mark Erikson 对 React 社区现状的深度分析，以及 React Native 0.80 的更新亮点。此外，文章还涵盖了 AI 技术在前端栈中的应用、多个 React 相关工具与库的更新、以及 JavaScript 领域的其他重要进展，内容详实且覆盖面广，为开发者提供了宝贵的行业洞察与技术资源。

1. 行业动态
• 2025 Redux 维护者对 React 现状的分析：Mark Erikson 回顾了 React 的演变历程，讨论了 React 19 引发的未来方向争议，分析了 Meta 内部驱动开发与 Vercel 主导的 Next.js 服务器组件工作之间的分歧，并反驳了关于 Verce l“接管” React 或 “React 仅适用于 Next” 的谣言，同时反驳了对客户端开发被抛弃的说法。
• Figma 收购 Payload：Figma 收购了开源 Next.js 后端框架/CMS Payload 的创造者，扩展其设计工具生态。

2. 工具与库更新
• React Native 0.80 发布：包含 React 19.1，引入可选的更严格 TypeScript 类型，以及 iOS 上预构建依赖的实验性支持以加速构建过程。旧架构正式“冻结”，对未来将移除的 API 发出警告。
• Relay v20 发布：Facebook 推出最新版本的 GraphQL 导向 React 框架。
• React Aria Tree：新增拖放功能支持。
• Motion 动画库推出 VS Code 扩展，方便 Copilot 使用其文档。 #vscode
• react-searchable-dropdown：支持虚拟化大型数据集的可定制下拉组件。
• Apple 'Liquid Glass' Effect：为 React 应用提供 Apple 新设计语言效果的高控制实现。
• use-mcp 钩子：Cloudflare 推出用于连接 MCP 服务器的钩子，简化 AI 系统的认证和工具调用。
• 其他工具：包括 react-call 1.8、Slice Viewer、State in URL 5.0、Ant Design Charts 2.4 等多个库的更新与功能介绍。

3. 教程与案例分享
• Cursor 升级 Storybook：展示如何利用 AI 在两小时内完成 Storybook 升级。
• 无限跑马灯效果：介绍如何结合 React 和 Motion 沿 SVG 路径构建无限跑马灯。
• Suspense 流式传输：Ryan Toronto 分享了可组合流式传输的技术实现。

4. JavaScript 生态系统其他动态
• Dan Abramov 博客：讨论代码审查中抑制警告的问题及其应对规则。
• pnpm 10.12：引入实验性“全局虚拟存储”以提升空间效率。
• Oxlint 1.0 和 Biome v2：分别推出快速替代 ESLint 的 linter 和支持类型感知规则的新版本。
• 其他技术：包括顶层 await 在 ES 模块中的应用，以及 WelsonJS 用于构建 Windows 应用的创新方法。

AI 摘要：本文全面探讨了 CSS 中颜色设置的多种方法和相关属性，强调了颜色在网页设计中的核心作用。作者从颜色的基础概念和颜色空间入手，详细介绍了 sRGB、CIELAB 和 OkLab 等颜色空间下的各种颜色函数（如 rgb()、hsl()、hwb()、lab() 等），以及十六进制表示法和命名颜色等传统方法。同时，文章还涵盖了现代 CSS 颜色功能（如 color() 和 color-mix()），并讨论了支持颜色值的 CSS 属性和渐变效果。通过丰富的示例和说明，读者可以深入理解 CSS 颜色的技术细节和应用场景。

CSS-Tricks

CSS Color Functions | CSS-Tricks

CSS has a number of functions that can be used to set, translate, and manipulate colors. Learn what they are and how they are used with a bunch of examples to get you started.

"它并不完美，但平台也不是。我们依然爱它。" Jhey Tompkins 用他对于 WWDC25 中最受喜爱/最厌恶的事物——液态玻璃的演绎，满足了人们的需求。

AI 摘要：Frontend Focus 第 697 期（2025 年 6 月 18 日）涵盖了前端开发的最新动态和技术趋势，重点介绍了 CSS 间隙样式的新方法、HTML 规范更新、前端开发者的趣味清单以及多个工具和资源。文章还包括了关于 CSS 动画、ARIA accessibility、浏览器扩展风险等教程和观点，以及对 Apple WWDC 25 的浏览器和设计系统的批判性分析。通过详细的资源和案例，读者可以深入了解前端技术的最新发展和实用技巧。

1. CSS 新特性与文章
• CSS gap decorations 新方法：由 Microsoft Edge 团队分享的 gap decorations 实现进展，旨在替代伪元素 hack，并提供互动演示页面（需在 Chromium 浏览器中启用标志）。
• CSS 动画中的变换顺序：Jake Archibald 探讨了 CSS 变换动画的复杂算法，提醒开发者避免不自然的动画效果，并通过趣味演示（如猫咪动画）解释实现方法和潜在问题。【好文】
• 如何跟上新的 CSS 功能：Sacha Greif 推荐了跟踪 CSS 新特性的资源，帮助开发者超越无目的的搜索，保持技术前沿。
• 打破边界：用（S）CSS 构建七巧板：Sladjana Stojanovic 通过构建七巧板拼图，探索 CSS 在创建交互用户界面时的极限。
• CSS 网格属性对比：Chris Coyier 分析了 1fr 1fr、auto auto 和 50% 50% 在创建列时的细微差异，帮助开发者理解输出效果。

2. HTML 与安全性更新
• HTML 规范变更：Chrome 团队介绍了 HTML 规范中关于属性中 < 和 > 转义的最新变化，旨在防止 mutation XSS 漏洞，提升安全性。
• 前端开发者清单：Nic Chan 以幽默的方式列举了前端开发者常见的“怪癖”，提供了一个有趣的互动网站，让读者探索和娱乐。
• 成为更好的前端工程师：Den Odell 建议通过一周的值班经历来提升前端工程技能，分享实战经验。

3. 无障碍与用户体验
• ARIA 入门指南：Eric Bailey 分享了关于“无障碍富互联网应用”的实用知识，破除常见误解，帮助开发者加深对 ARIA 的理解。
• 构建无障碍 UI 的理由：Nolan Lawson 阐述了构建无障碍用户界面的“自私”理由，强调其对开发者自身和用户的双重益处。
• 汉堡菜单图标的辨识度：Kate Kaplan 讨论了汉堡菜单作为一种常见模式在用户中的辨识度，同时指出其固有的权衡问题。

4. 浏览器与行业动态
• Apple WWDC '25 浏览器分析：Alex Russell 对 Apple 在 WWDC '25 上的浏览器和网页相关公告提出批评，指责苹果 “gaslighting” and “suppressing the web”.
• Apple 新设计系统问题：Nat Tarnoff 针对 Apple 的“Liquid Glass”设计系统提出无障碍方面的潜在问题，呼吁关注用户体验。
• Payload CMS 加入 Figma：James Mikrut 宣布 headless CMS Payload 被 Figma 收购，将继续开源，并计划以独特方式与设计系统集成。

5. 工具与资源推荐
• Anchors Tailwind 插件：Toolwind 提供了一个简易 API，用于在 Tailwind 项目中尝试 CSS Anchor Positioning，尽管浏览器支持尚未完全。
• Critical CSS Generator：Kigo 推出一个基于 Web 的工具，可从任意 URL 提取关键 CSS，支持自定义视口和渲染等待时间，并提供集成指南。
• DarkModeJS 2.0：Assortment 发布了一个实用包，利用 matchMedia API 和 prefers-color-scheme 媒体查询管理暗模式切换。
• RampenSau：David Aerne 开发了一个使用色调循环和缓动函数生成调色板的库，支持主页上的互动调整设置。

6. 其他教程与观点
• 可视化网站构建工具未流行原因：Salma Alam-Naylor 探讨了可视化网站构建工具未能广泛流行的原因，分析其局限性。
• 恶意浏览器扩展风险：Kush Pandya 警告了恶意浏览器扩展日益增长的风险，提醒开发者注意安全隐患。

Chrome for Developers

A new way to style gaps in CSS  |  Blog  |  Chrome for Developers

Say goodbye to border and pseudo-element hacks.

AI 摘要：本文介绍了 CSS 新特性 corner-shape ，它允许开发者通过改变 border-radius 的角形状来创建多种 CSS 形状。作者详细展示了如何利用 corner-shape 的不同值（如 round、scoop、bevel、notch 和 squircle ）以及 border-radius 的调整，绘制出八边形、菱形、六边形、三角形、斜边、箭头形、梯形和平行四边形等多种形状。相比传统的 clip-path 方法，corner-shape 提供了更简洁的语法，并支持边框和阴影效果，极大地提升了形状设计的灵活性和便利性。

AI 摘要：本文详细介绍了 Cursor 这一基于 AI 的代码编辑工具，如何帮助前端开发者提升编码效率。文章从 Cursor 的功能、界面操作、工作流程到具体应用案例（如重建 LogRocket 登陆页面）进行了深入剖析，同时分享了作者在实际项目中使用 Cursor 的实用技巧和经验。Cursor 集成了多种顶级 AI 模型（如 Claude 3.5 Sonnet 和 GPT-4.1），支持智能代码补全、上下文管理、自定义规则设置等功能，尽管价格偏高，但其强大功能对开发者极具吸引力。

1. Cursor 简介与市场地位
• 介绍了 Cursor 作为一款基于 Claude AI、GPT-4.1 等 AI 模型的代码编辑工具，其在 IDE 市场中的主导地位（82.2% 的开发者知晓或使用过）。
• 强调文章目标：揭示 Cursor 中被忽视的功能，并分享作者在日常编码中的实用技巧。

2. Cursor 安装与界面概览
• 提供 Cursor 的下载路径（cursor.com）以及首次打开后的界面介绍，包括“Ask”功能（类似 ChatGPT 的问答模式）。
• 对比传统开发与“vibe coding”工作流的差异，强调 Cursor 如何改变开发体验。

3. 项目创建与 AI 辅助开发
• 以 Next.js 项目为例，展示如何使用 Cursor AI 生成界面设计（如 LogRocket 登陆页面）。
• 详细操作步骤：通过 Command+K 快捷键、选择 AI 模型（如 Claude 3.5 Sonnet）、输入提示词、结合图像上下文迭代设计等。
• 提到“Restore checkpoint”功能，用于恢复之前的代码状态以解决设计错误（如颜色问题）。

4. 与其他工具的集成
• 介绍 MCP 标准及 Framelink.ai 的 Figma 服务器如何让 Cursor 直接访问设计文件，提升设计与开发的无缝协作。
• 提供设置指南，强调 AI Agent 模式在开发中的核心作用。

5. 上下文管理与高效编码技巧
• 解释上下文管理的重要性，使用“@”符号指定 Cursor 关注的内容或优先级。
• 建议为新功能或项目开启新聊天窗口，避免旧对话干扰 AI 响应质量，并介绍“新聊天总结旧聊天”功能。
• 推荐 AI 模型选择：作者偏好 Claude 3.5 Sonnet，认为其信息输出适中不过载。

6. 智能补全与自定义规则
• 介绍 Cursor Tab 的智能代码补全功能（Mac 用户可用 Command+K 快捷键），以及如何用它添加页面元素（如导航链接）。
• 讲解自定义规则（.cursorrules 文件）的设置方法，用于定义项目编码规范，并提供多种应用场景（如始终应用规则或手动选择）。

7. 隐私与安全注意事项
• 指出 Cursor 尊重 .gitignore 文件，避免将忽略内容纳入上下文，建议将 .env 文件加入 .gitignore 以保护敏感信息。

8. 定价与市场竞争
• 分析 Cursor 的定价结构（免费 Hobby 计划、$20 Pro 计划、$40 Teams 计划），认为价格偏高。
• 对比竞争对手如 Windsurf（团队计划降至 $30/用户/月）和 GitHub Copilot（更经济），建议开发者根据预算和需求选择工具。

9. 总结与建议
• 强调 AI 辅助开发是未来趋势，建议从 Agent Mode 入手，善用上下文管理（@ 符号），并为新功能开启新聊天。
• 鼓励开发者选择适合自己需求和预算的工具，并持续编码探索。

LogRocket Blog

Frontend devs: Here’s how to get the most out of Cursor - LogRocket Blog

Explore Cursor AI, one of the hottest tools in AI-assisted coding. Uncover the features you might be missing and practical workflows that actually work.

AI 摘要：本文详细介绍了如何使用 Three.js、GSAP 和 Web Audio API 构建一个科幻风格的 3D 音频可视化器，灵感来源于 Webflow & GSAP 社区挑战赛。作者通过创建一个响应音乐的“异常探测器”界面，将声音与视觉效果实时结合，打造了一个充满未来感的沉浸式体验。文章从 Three.js 场景搭建、音频分析、自定义着色器，到 GSAP 动画和交互设计，逐步讲解了实现过程，展示了创意编码如何将技术与艺术融合。

1. 项目背景与灵感
• 源于 Webflow & GSAP 社区挑战赛（主题为“Draggable & Inertia”），作者决定创建一个音乐响应的 3D 可视化器。
• 设计灵感是一个在黑暗虚空中发光的橙白渐变球体，通过 Midjourney 生成视觉原型，并结合 Photoshop 调整作为视觉基础。
• 目标是打造一个科幻“异常探测器”界面，通过音乐驱动视觉效果，融合声音与画面。

2. Three.js 场景搭建
• 使用 Three.js 创建 3D 场景，包括场景、透视相机和渲染器，设置相机位置以获得最佳视角。
• 添加 OrbitControls 实现点击拖拽旋转视角，并设置阻尼效果以提升流畅性。
• 核心对象“异常球体”由两部分组成：外部线框球体（基于 IcosahedronGeometry，使用自定义 ShaderMaterial 实现发光线框效果，随音乐变形）和内部发光球体（基于 SphereGeometry，半透明发光效果形成光晕）。
• 增加背景粒子效果和网格覆盖，结合 Midjourney 生成的背景图像，营造全息显示的科幻氛围。

3. Web Audio API 音频分析
• 使用 Web Audio API 分析音频，支持用户上传音频文件或选择预设曲目。
• 通过 AudioContext 和 AnalyserNode 实时获取音频频率数据（fftSize=2048，平滑常数为 0.8），计算音频强度（audioLevel）用于驱动视觉变化。
• 动画循环中持续更新频率数据，提取平均音量和峰值频率，显示在 UI 上作为“异常指标”。
• 将音频强度值传入着色器和动画，同步音效与视觉效果（如球体亮度、变形程度随音乐强度变化）。

4. 音频响应着色器开发
• 使用 Three.js 的 ShaderMaterial 编写自定义 GLSL 着色器，控制球体的动态外观。
• 顶点着色器：通过 Simplex 噪声函数实现顶点变形，随时间和音频强度变化，音乐强烈时球体更尖锐、混乱。
• 片段着色器：应用 Fresnel 效果增强边缘发光，随音频强度脉动，同时加入微弱的独立呼吸动画（sin 函数）。
• 内部发光球体使用 BackSide 渲染和加色混合，营造柔和光晕效果，增强能量场视觉感。

5. GSAP 动画与交互设计
• 使用 GSAP 实现流畅动画，如音频播放时的相机缩放（靠近球体）和暂停时的恢复，增强戏剧效果。
• 借助 GSAP 的 Draggable 和 InertiaPlugin 插件，制作可拖动的 UI 面板，支持动量效果，用户可“抛掷”面板，增加交互趣味性。
• 实验性地实现 3D 球体拖拽，通过自定义逻辑和惯性衰减模拟物理效果，用户可旋转和抛掷球体。
• GSAP 时间线用于编排多个动画序列（如文本淡出），确保交互和过渡自然流畅。

6. UI 设计与氛围营造
• 设计灵感来源于科幻控制面板，UI 使用简约风格（半透明深色面板、浅色文字），包括控制球体旋转速度、分辨率、变形程度和音频灵敏度的滑块。
• 增加音频频谱分析面板（基于 canvas 绘制频率条形图）和终端日志窗口，模拟高科技系统运行状态。
• 通过 CSS 实现屏幕网格覆盖，添加漂浮粒子效果，结合自制背景音乐，强化沉浸式科幻体验。

7. 总结与成果
• 最终作品是一个互动艺术品，用户加载音乐后，系统“启动”并同步音频与视觉，球体随音乐脉动变形，用户可通过控件调整效果或拖动面板/球体互动。
• 项目展示了 Three.js（渲染与着色器）、Web Audio API（音频分析）和 GSAP（交互动画）如何结合，创造多感官体验，体现了创意编码的潜力。