스킬 찾기

Use when building or debugging interactive 3D scenes on the web with Three.js (scene/camera/renderer, lights/materials, GLTF loading, controls, performance). Helpful for designers shipping 3D UI moments.

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

Follow a release workflow for game changes, from screenshots and changelog entries through testing, commits, and live deployment. Verify the published version, measure transfer sizes, and report evidence while applying approval rules for large uploads.

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

• Releasing game features or fixes with screenshots
• Adding a versioned changelog entry with images
• Testing changes after integrating the latest main

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling.

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

Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.

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

Add and tune animated liquid-metal WebGL borders with the React `metal-fx` package. Use when buttons, icon controls, chips, tabs, cards, or selected surfaces need a metallic active, selected, hover, focus, or premium border; when implementing the MetalFx component from metal.jakubantalik.com; or when troubleshooting its presets, themes, strength, glow, reflections, sizing, radius, animation, accessibility, SSR, or performance.

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

Create or redesign SaaS and AI landing pages around real interfaces and clearly labeled demos. Explains workflows, user control, pricing limits, and FAQ answers so visitors can understand the product and compare plans.

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

• Redesign a SaaS landing page around its actual interface
• Show an AI workflow from input to output
• Clarify pricing limits and related FAQ answers

Use when implementing 2D physics interactions with Matter.js, including Engine/World setup, Render/Runner configuration, adding bodies and constraints, and scroll/interaction-friendly canvas scenes.

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

Shape a high-contrast interface with dark molded panels, inset shadows, and tactile controls that resemble physical objects. Apply a consistent visual system across page framing, cards, buttons, and small status displays, using one restrained accent color.

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

• Designing a dark interface with tactile depth
• Giving cards and controls a consistent material feel
• Using a brand color for status and active indicators

Create a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.

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

Create a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.

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

Design image-led pages with large photographs, visible grid guides, and carefully positioned text and buttons. Coordinate typography, transparent cards, shading, and subtle motion so the image remains prominent while supporting information stays readable.

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

• Designing a large photographic hero section
• Positioning headlines and buttons over images
• Coordinating cards and navigation around photography

Create agency, studio, architecture, or portfolio websites using oversized typography, black-and-white sections, and documentary photography. Arrange project stories and irregular image collages alongside menus and FAQs designed for keyboard, touch, and reduced-motion use.

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

• Redesigning an agency or architecture studio website
• Presenting project processes through photo collages
• Organizing work and philosophy into contrasting sections

Build a globe-like 3D visual in Three.js, a library for browser graphics. Combine a dense sphere of glowing particles with a thin orbital ring, then adjust color, density, tilt, and gentle motion.

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

• Adding a planetary particle visual to a website
• Creating a data-globe effect for an infrastructure service
• Matching orbital ring colors to a brand

Design a light interface using warm paper tones within dark outer framing. Coordinate typography, panels, navigation, and motion with fine borders, corner brackets, subtle diagonal textures, and a restrained accent color for active states.

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

• Designing a warm, light interface for a technical product
• Framing a paper-toned screen against a dark background
• Coordinating app mockups and transcript panels

Create a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering. Use when a page needs an atmospheric near-black dither field, broad organic waves or cloud masses, and restrained gray-white highlights behind framed UI, hero content, or data overlays.

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

Create a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure, and infrastructural or planetary depth.

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

Plan or rewrite a landing page for a SaaS product, app, or service around one audience and one action. Produce page structure, headlines, benefit copy, FAQs, layout recommendations, and guidance on search visibility.

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

• Plan a landing page for trial signups
• Align landing page copy with an ad
• Address purchase concerns with evidence and FAQs

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

Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.

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

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.

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

Apply CSS alpha masking with linear-gradient for horizontal or vertical edge fades (mask-image and -webkit-mask-image). Use when asked for alpha masks, fade edges, or CSS mask gradients.

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

Create thin laser beams that meet at a bright corner or edge junction, surrounded by soft haze. Adjust beam angles, accent colors, glow, and subtle motion to build a spatial composition for an interface.

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

• Adding laser beams along a screen corner
• Creating a glowing portal seam
• Matching laser effects to an interface accent color

Create a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.

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

Apply seamless infinite marquee loops using duplicated items.

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