开发技能

将现有Remotion视频源码迁移为使用HTML和GSAP的HyperFrames项目，检查不支持的代码，比较转换前后的画面，并记录遗漏或近似处理。

• 将Remotion视频迁移至HyperFrames
• 提前检查阻碍迁移的代码
• 比较转换前后的视频画面

检查GSAP动画使用的属性、页面更新顺序、大量元素和鼠标跟随的实现方式，帮助减少卡顿，并核查ScrollTrigger更新与清理。

• 排查GSAP动画卡顿
• 减轻长列表的动画负担
• 优化鼠标跟随效果

帮助编写和审查使用GSAP为网页元素及SVG添加动画的代码，涵盖速度变化、依次显示、播放控制，以及适应屏幕宽度和减少动态效果偏好的调整。

• 为网页元素添加入场动画
• 让多个元素错时运动
• 按屏幕宽度调整动画

在Vue或Svelte中集成GSAP动画，安排启动时机，将操作范围限定在组件内部，并在组件移除时停止和恢复动画，还涵盖ScrollTrigger的位置更新。

• 为Vue或Svelte添加动画
• 将操作对象限定在组件内部
• 在组件移除时清理动画

使用GSAP时间轴编排多个动画的先后顺序与重叠关系，指定开始时间、为片段添加标签、嵌套组合较小的时间轴，并控制播放、暂停、倒放及跳转。

• 让多个元素依次运动
• 精细调整动画重叠时间
• 用标签整理动画片段

使用GSAP的ScrollTrigger实现网页滚动动画，让元素随滚动移动、显示或在指定区间固定，并支持视差效果和由纵向滚动驱动的横向移动。

• 卡片进入视口时依次显示
• 滚动时固定某个区块
• 让动画进度与滚动量同步

帮助实现网页中的GSAP插件动画，为文字、图形和拖拽操作添加动态效果，涵盖插件注册、布局变化，以及SVG线条绘制和形状变换。

• 为网格和列表的布局变化添加动画
• 让卡片拖拽后保持惯性滑动
• 让标题逐字显示

帮助在React和Next.js组件中加入GSAP动画，指定目标元素、限定作用范围，并处理依赖值变化后的更新和组件卸载时的清理。

• 为React组件添加动画
• 限定动画作用的元素范围
• 整理页面切换时的清理逻辑

Integrate FLUX image generation and editing into applications through the BFL API. The guide covers authentication, checking asynchronous results, completion notifications through webhooks, request limits, error handling, regional endpoints, and downloading generated images before their URLs expire.

中文简介正在准备中。当前显示英语简介。

• Add FLUX image generation and editing to an application
• Implement result checks and completion notifications
• Handle request limits and API errors

帮助在Three.js中实现控制形状和表面外观的自定义着色器，制作波浪变形、边缘发光、渐变和溶解消失效果，也支持扩展现有材质。

• 让表面呈现波浪运动
• 添加边缘发光或颜色渐变
• 实现溶解消失效果

帮助在Three.js中为三维模型添加动画，播放GLTF内置动作，控制骨骼和表情，并实现多个动作之间的平滑切换。

• 播放GLTF模型内置动作
• 平滑切换待机、行走与奔跑
• 控制表情与骨骼动画

为Three.js的3D物体设置金属、玻璃、织物或卡通等质感。涵盖材质选择、纹理与反射调整、自定义着色器效果，以及降低渲染负担的设置。

• 为3D物体设置金属或玻璃质感
• 添加卡通风格的明暗效果
• 调整纹理和环境反射

帮助实现Three.js中的3D模型、纹理及背景和反射用HDR图片加载，涵盖多素材进度管理、压缩格式支持、缓存复用，以及失败后的重试和备用文件切换。

• 显示GLTF/GLB模型
• 显示多个素材的加载进度
• 将HDR图片用于背景和反射

为Three.js的3D场景实现鼠标、触摸和键盘交互，包括物体选择、相机操作，以及物体的移动、旋转和缩放，并将输入与视觉反馈连接起来。

• 通过点击或触摸选择3D物体
• 添加相机旋转和缩放操作
• 拖动物体并旋转或缩放

为Three.js三维场景设置光照和阴影，构建室外或摄影棚照明。帮助选择光源、使用环境图像照明，并调整阴影问题及渲染负担。

• 构建室外阳光和天空照明
• 设置摄影棚照明或三点布光
• 使用HDR图像进行环境照明

通过与 Disney 动画十二原则对应的 Framer Motion 代码示例，为 React 界面实现挤压与拉伸、预备动作、加减速等动画。

• 为按钮悬停和按下添加反馈
• 制作带预备动作和弧线路径的跳跃
• 依次显示列表项

在Three.js中设置用于3D表面的图片和视频，以及用于背景和反射的图像。可调整贴图位置、颜色和重复方式，并通过压缩、复用与释放管理内存。

• 调整3D表面贴图的位置与重复方式
• 用HDR图像设置背景和反射
• 在3D表面显示视频或Canvas内容

为Three.js三维场景添加泛光、背景虚化和色彩校正等后期效果，涵盖多种效果的组合、自定义画面变形、选中物体轮廓，以及渲染负载调整。

• 为三维场景中的物体添加泛光
• 调整背景虚化和画面色彩
• 用轮廓突出选中的物体

依据Vercel维护的指南审查和改进React与Next.js性能，按优先级减少数据获取等待、浏览器接收的代码量及不必要的重新渲染。

• 审查React代码的性能
• 改进Next.js数据获取
• 减少发送给浏览器的JavaScript

使用Three.js制作基本立体、自定义网格、立体文字和点云，通过编辑顶点、合并几何体及高效绘制大量相同形状，构建模型并调整渲染负担。

• 制作基本立体和沿曲线延伸的形状
• 创建或变形自定义网格
• 显示立体文字、点云和线框

依据最新的Web Interface Guidelines审查网页界面代码，检查设计、易用性和无障碍问题。可指定文件或匹配模式，审查结果附有文件名和行号。

• 审查网页界面代码
• 按照准则检查无障碍问题
• 审查设计和易用性

使用Tailwind CSS v4定义颜色、圆角等共用设计规则，将按钮、卡片和表单整理为可复用组件，并实现适应屏幕宽度的布局与深色模式。

• 创建可复用的界面组件库
• 统一颜色和组件外观
• 实现响应式布局与深色模式

为 React 组件整理过多的布尔配置项，通过调整部件组合与状态管理来设计可复用组件，并提供问题代码、改进示例及其原因。

• 整理过多的布尔配置项
• 设计可复用的组件库
• 审查状态管理与组件结构

帮助你用Three.js搭建浏览器中的3D场景，设置相机与渲染器，安排物体位置和父子关系，并参考示例实现分组操作、动画、尺寸适配及渲染资源释放。

• 在浏览器中显示3D场景
• 根据透视需求选择相机
• 将多个物体作为一组移动