스킬 찾기

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

Build continuous scrolling rows for logos, testimonials, screenshots, or short tags. The skill explains how to duplicate content, stabilize item widths, soften edges, and accommodate people who prefer reduced motion.

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

• Build a continuously scrolling logo row
• Loop screenshots or testimonials
• Add a moving row of tags or feature chips

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

Build product pages that reveal interfaces and explanations as visitors scroll. Uses GSAP ScrollTrigger to coordinate pinned scenes, gradual reveals, and section transitions while keeping the product story and interface readable.

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

• Explain a product workflow through scrolling
• Reveal interface features in stages
• Connect product sections with coordinated transitions

Create a near-black animated canvas background with large square pixels and ordered dithering, a repeating pattern that represents shades. Broad waves and cloud-like forms provide atmosphere behind framed interfaces, hero text, or data displays.

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

• Adding monochrome atmosphere behind a dark interface
• Placing pixelated waves behind hero text
• Creating cloud-like backgrounds for data displays

Design portfolio websites that lead with project work, then introduce the studio and its services. Use distinct editorial chapters, project-specific colors, restrained animation, and a clear contact section to organize the visitor’s journey.

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

• Redesigning a creative studio’s portfolio
• Presenting photography or artwork through project chapters
• Connecting case studies to services and contact

Plan or rewrite a SaaS pricing page so visitors can compare options and choose a plan. Produce a page outline, pricing table specifications, FAQs, search metadata, and a layout recommendation based on the offer and audience.

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

• Planning a pricing page for a new SaaS product
• Clarifying differences between pricing plans
• Writing FAQs that address purchase concerns

Create a dark interface built around fine gradient borders, asymmetrical panels, and precise labels. Apply a consistent visual system to page frames, typography, controls, and backgrounds, using restrained monochrome colors and subtle motion.

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

• Defining a consistent dark interface style
• Structuring panels with fine gradient borders
• Designing navigation and active list states

Design interfaces that combine magazine-style composition with precise technology product details. Use asymmetrical columns, expressive headlines, wide image bands, fine dividers, and restrained accent colors to shape a consistent layout, navigation, and motion style.

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

• Combining editorial composition with a technology product interface
• Arranging large headlines and wide image bands
• Unifying navigation, labels, and information modules

Design a cohesive dark interface with near-black surfaces, subtle pixel or grain textures, and thin accent-colored laser light. Extend the visual direction across panels, navigation, controls, borders, spacing, and motion while keeping content readable.

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

• Unify a dashboard around a dark visual system
• Add texture and depth to a flat black interface
• Build a hero area around a thin laser motif

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

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

Create a warm beige light-mode interface with layered neutral surfaces, thin borders, and orderly information grids. Apply a consistent style across page backgrounds, hero sections, cards, buttons, status indicators, and subtle motion.

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

• Creating a warm beige product presentation page
• Organizing process explanations into consistent grid sections
• Unifying the appearance of cards, buttons, and page backgrounds

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

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

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

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 dark interfaces with frosted glass panels, gradient borders, and subtle glow. The skill provides CSS and Tailwind patterns for cards, hero sections, and dashboards, with checks for readable contrast, visible focus, and mobile behavior.

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

• Create a dark frosted glass hero section
• Convert a bright interface to dark glass styling
• Add gradient borders to cards and modals

Design a cohesive dark navy interface with layered blue light, a framed hero area, compact navigation, floating network labels, and clear action buttons. Includes styling examples and guidance for slow animation that keeps text readable.

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

• Designing a futuristic page with layered blue light
• Unifying navigation, buttons, and section frames
• Adding subtle network labels and slow background motion

Add subtle vertical guides and small corner squares to web pages using CSS and HTML patterns. Align them with the content width across sections, preserve mobile spacing, and keep the guides from blocking clicks or text selection.

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

• Adding vertical guides along a page's content width
• Framing a hero section or product page
• Marking section corners with small squares