开发技能

Create a fixed, full-screen WebGL laser background with a thin white core, brand-colored halo, and soft smoke. Adjust beam placement, glow, fog, and rendering cost while keeping foreground content readable and interactive.

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

• Adding a thin laser behind page content
• Matching laser glow and smoke to brand colors
• Adjusting beam position and smoke density

Build text that reveals word by word as readers scroll. Preserve inline links, emphasis, and responsive wrapping, while keeping complete text accessible to screen readers and immediately readable when reduced motion is preferred.

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

• Revealing a headline as readers scroll
• Pacing the reading of a quote or manifesto
• Adding scroll-based text to product introductions

Create or debug interactive web scenes with Three.js, including product viewers and animated page visuals. The skill covers cameras, lighting, model loading, controls, performance tuning, and cleanup of graphics resources when scenes close.

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

• Creating an interactive 3D product viewer
• Adding an interactive 3D hero scene
• Loading glTF models and setting up controls

Build interactive 3D globe visualizations with globe.gl, displaying locations, connections, regions, and labels. The skill guides setup in HTML or React, explains data fields for each layer, and addresses sizing and mobile performance.

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

• Plot locations on a 3D globe
• Show connections between locations
• Overlay regional data and labels

Build a soft spotlight that follows the cursor and reveals a second image over a visible base. Use aligned images to show color, textures, product details, or before-and-after treatments, with smooth motion and accessible alternatives.

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

• Reveal color over a monochrome image
• Compare before-and-after image treatments
• Show product textures and details

Implement a WebGL transition where a ragged ember edge burns away the old page and reveals the next scene in motion. The skill covers glowing embers, porous char, rendering optimizations, transition timing, and reduced-motion behavior.

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

• Switch chapters with a burning-paper reveal
• Reveal an animated scene behind a moving ember edge
• Adjust burn direction and duration for page content

Build falling leaves or petals with visible front-and-back tumbling and sideways motion tied to rotation. Covers 2D canvas and 3D implementations, depth layers, particle density, rendering costs, and reduced-motion support.

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

• Add autumn leaves to a web page
• Animate drifting cherry blossom petals
• Create layered foliage in a 3D scene

Add animated liquid-metal borders to React buttons, cards, tabs, and other surfaces using metal-fx. The skill covers visual tuning, linking effects to interaction states, preserving keyboard access, and providing static borders when animation or WebGL is unavailable.

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

• Highlighting selected tabs and filters
• Adding metallic borders to primary buttons
• Tuning card borders, glow, and corner radius

Add a background blur that grows stronger toward the top or bottom of a webpage. Layered CSS masks control the transition, with snippets and guidance for adjusting height, blur strength, stacking order, and rendering cost.

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

• Add a gradual blur along the top edge
• Create a soft blur along the bottom edge
• Adjust blur height and intensity

Add scroll-triggered text animations in which words rise into view one after another. Uses GSAP ScrollTrigger with hidden overflow masks, while preserving spaces, screen reader text, and static display for people who prefer reduced motion.

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

• Animating a hero headline as it enters view
• Revealing section titles word by word
• Respecting reduced-motion preferences in text animations

Build a burning-paper loading ring that keeps moving during heavy page setup. The skill covers background rendering, progress display, a smooth transition into the page, and support for reduced motion preferences.

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

• Adding a burning-paper loading screen
• Keeping a loader moving during heavy JavaScript work
• Connecting loading progress to the page introduction

Build particle trails that keep consistent spacing as the pointer speeds up or slows down. Covers distance-based emission, drifting motion, placement in 3D scenes, performance checks, and alternatives for touch, keyboard use, and reduced motion.

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

• Creating sparks or wisps that follow the cursor
• Fixing gaps in trails during fast pointer movement
• Keeping trails aligned with the pointer in 3D scenes

Add a lightweight interactive globe to a web page with cobe. Covers location markers, rotation, canvas sizing, responsive updates, performance settings, and integration with React or Next.js for hero sections, about pages, and cards.

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

• Adding a spinning globe to a hero section
• Showing office locations with globe markers
• Adapting globe rendering to mobile screens

Add or debug web animations with GSAP, from entrance effects to scroll-driven sequences. Coordinate timing across multiple elements, adjust motion, and address rendering performance and cleanup when using animations in React.

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

• Animate a hero section with staggered entrances
• Build scroll-driven animated sections
• Coordinate navigation, headings, and buttons

Build chapter-based pages that move sideways as visitors scroll vertically. Deriving each scene from scroll position keeps reverse scrolling, jumps, and reloads consistent, with guidance for transitions, chapter links, keyboard controls, and reduced motion.

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

• Building a horizontal product tour
• Creating a chapter-based scrolling story
• Fixing scene mismatches after jumps or reloads

Create CSS snippets that gradually fade the horizontal or vertical edges of images, text, or containers. Adjust fade width and opacity, with both standard and Safari mask properties included.

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

• Fade the left and right edges of an image
• Fade text at the top and bottom
• Adjust fade width and opacity

Build 2D physics scenes for web pages with Matter.js. This skill guides engine setup, canvas rendering, adding objects, optional mouse dragging and connections between objects, plus cleanup when a scene is removed.

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

• Add falling and colliding objects to a web page
• Let users drag objects with a mouse
• Set up a physics canvas in React

Use border-beam to add moving edge highlights or breathing glows to React controls and panels. Connect effects to loading, selection, and focus states while retaining clear text, static indicators, keyboard focus, and support for reduced motion.

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

• Adding a breathing glow to a processing panel
• Highlighting a selected card or current step
• Adding a moving bottom edge to an input

Design and test combat encounters in Three.js action games. Plan arenas, enemy roles, spawn timing, objectives, boss phases, and rewards, then check fairness and difficulty using repeatable starting conditions on desktop and mobile.

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

• Planning combat arenas and enemy combinations
• Tuning enemy waves and boss phases
• Checking attack warnings and recovery opportunities

Build particle trails that respond to cursor or touch movement with consistent spacing at different speeds. Reuse a fixed pool of GPU-rendered particles, add keyboard-triggered bursts, and handle reduced motion, resizing, and cleanup.

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

• Creating particle trails for cursor and touch movement
• Making pollen or dust rise from a surface
• Adding particle bursts triggered by a keyboard-accessible button

Add reveal animations that start when page elements enter the visible area. The skill provides JavaScript using IntersectionObserver, a browser visibility detector, plus CSS keyframes and Tailwind-compatible classes, with adjustments for trigger position, motion, duration, and delay.

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

• Revealing sections as visitors scroll
• Staggering the appearance of multiple elements
• Adjusting when a reveal animation starts

Build or extend an isometric action RPG, viewed from an angled overhead perspective, using web technology. Develop a playable loop covering movement, combat, rewards, progression, and saves, with staged implementation and release checks.

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

• Building a first playable action RPG loop
• Adding combat, enemies, and rewards in stages
• Organizing equipment, quests, and zone data

Create Three.js game effects that clearly communicate attacks, hits, damage, and status changes. Define each effect’s purpose and lifetime, limit resource use, and test overlapping effects, repeated triggers, low-quality settings, and reduced-motion alternatives.

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

• Distinguish attack warnings from hit effects
• Create damage and status feedback
• Limit particle counts during repeated attacks

Build and test Three.js games for mobile browsers, covering touch controls, screen orientation, readable game information, and device-appropriate graphics. Refine movement, actions, inventory interactions, and performance through checks of real mobile browser behavior.

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

• Designing touch movement and action controls
• Adapting game screens to portrait and landscape
• Tuning graphics quality for mobile devices