개발 스킬

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 a Three.js landscape backdrop for buildings, products, or figures. Combine uneven terrain, wind-blown grass, scattered stones, sky, and stars, with smooth transitions between times of day and guidance on rendering performance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a landscape backdrop for a hero section
• Place a product or building in a natural setting
• Build scenery for a scrolling world

Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding a faceted 3D object to a hero section
• Creating metal or ceramic-looking product visuals
• Adding subtle rotation and floating motion to web layouts

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

Build consistent web interfaces with Tailwind CSS using small styling classes. Apply layout, typography, responsive behavior, interaction states, and dark mode patterns, with examples for buttons, page sections, and reusable components.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building responsive page layouts
• Standardizing buttons and shared components
• Adding dark mode styles

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

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

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

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

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

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

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

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 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

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

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 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

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 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 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

Prepare Vesperfall game assets as paired transparent PNG cards and live 3D previews. Track each model’s actual source, expose available animations, and validate catalog displays, ground contact, and review pages through tests and browser checks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding characters or equipment to the Vesperfall catalog
• Pairing transparent PNG cards with live 3D previews
• Reviewing animations and ground contact on an isolated page

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

Design, implement, tune, and test action combat for web games with clear attack and defense timing. Define reliable hit outcomes, give defensive moves distinct purposes, and verify that visual feedback matches combat results in repeatable scenarios.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Tuning attack, guard, and dodge timing
• Checking hit detection and combat feedback
• Designing boss phases and defensive choices

Measure and improve Three.js or WebGL game performance through repeatable gameplay checks. Identify CPU or GPU bottlenecks, reduce unnecessary rendering and processing, and verify that controls, collisions, visuals, and memory remain stable.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigating frame-time spikes
• Reducing rendering and particle workloads
• Improving performance on mobile devices