Meng To

Create live HTML product demos that show an app’s workflow inside a Mac-style window. Reproduce real interface text and results, animate a scripted pointer, and support step navigation, scrubbing, and consistent frozen frames.

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

• Adding an animated app demo to a landing page
• Explaining a feature through step-by-step UI playback
• Replacing UI recordings or GIFs with live HTML

Create web controls that resemble physical materials using gradients, layered shadows, reflective edges, and subtle texture. The skill covers raised and pressed states, plus embossed labels and icons for buttons, cards, switches, and other controls.

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

• Give buttons a physical pressed appearance
• Add depth to cards and panels
• Style controls with plastic or metal surfaces

Add cursor-following water-ripple distortion to existing images using Shaders components. Preserve page content and layout while integrating lazy loading, accessible image fallbacks, and static display when WebGPU is unavailable or reduced motion is enabled.

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

• Adding cursor ripples to a hero image
• Adding interactive distortion to gallery images
• Replacing a cursor-driven spotlight reveal

Generate towers, castles, pagodas, and domes in Three.js from adjustable parameters. Create construction animations with a rising reveal, matching solid sections, scaffolding, and stage captions, using reusable geometry instead of imported mesh files.

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

• Animate the construction of a castle or pagoda
• Create an architectural title sequence
• Generate landmarks from adjustable parameters

Build visual sequences that move forward and backward with page scrolling. Use video, image frames, canvas, SVG, or HTML elements in a sticky stage, while preserving keyboard access, static alternatives, and predictable visual states.

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

• Showing product assembly through scrolling
• Explaining interface states or diagrams step by step
• Rotating objects or advancing photo sequences with scrolling

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

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

Design a dark monochrome interface around an exploded 3D wireframe, an outline view of separated parts. Coordinate annotations, connector lines, typography, and small metric displays to explain product structures or system states.

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

• Designing a product teardown interface
• Creating a system diagnostics dashboard
• Presenting structural specifications with annotations

Transform an article, case study, or brand story into a connected scrolling page. Choose scroll-controlled video, a real-time Three.js scene, or HTML with charts and typography, then organize the narrative into five to seven clear stages.

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

• Turn a long article into a visual scrolling journey
• Present a product story through a connected 3D scene
• Explain report findings with scrolling charts and text

Turn ordered steps into a vertical or horizontal timeline whose progress line and active step update as readers scroll. Keep the sequence readable across screen sizes, with keyboard navigation and support for reduced-motion preferences.

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

• Present onboarding or service steps as a scroll timeline
• Show a roadmap or history with visible progress
• Adapt a timeline for small screens

Add controllable rain, storms, and snow to Three.js scenes. Coordinate visible precipitation, lightning with delayed thunder, accumulating snow, wet ground, puddles, and seamless ambient audio while sharing particle resources across changing weather states.

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

• Add clear, rain, storm, and snow controls to a scene
• Create lightning with distance-based thunder delays
• Show accumulating snow and recurring blizzards

Give navigation, controls, and feature cards a consistent icon style using Iconify Solar Duotone Bold. It guides icon sizing, clear labels, two-tone opacity, and contrast so icons fit the surrounding interface.

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

• Unify icons across navigation elements
• Pair control icons with clear labels
• Align icon sizes in feature cards

Design a dark interface with matte-black surfaces, emerald accents, framed cards, and restrained glow. Apply consistent styling across navigation, typography, charts, and motion to create a calm, technical dashboard.

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

• Designing a dark analytics dashboard
• Unifying cards and navigation styles
• Highlighting status and chart data in green

Add word-by-word reveal animations to headlines and short copy, with each word fading in and rising once as it enters view. Includes implementation examples that account for screen readers, reduced motion, and disabled JavaScript.

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

• Animating portfolio headlines
• Revealing hero copy as it enters view
• Adding subtle motion to section introductions

Evaluate work on a ten-point scale using clear criteria, then improve each item toward a chosen target. Record evidence, compare before-and-after scores, and explain any remaining gaps without rounding scores up to claim success.

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

• Improve every item to at least eight out of ten
• Compare scores and evidence before and after revisions
• Identify why an item remains below its target

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

Design a two-panel page that gives visuals and supporting information distinct roles. This skill guides framing, spacing, typography, compact labels, and responsive stacking for product pages, portfolios, showcases, and technical presentations.

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

• Product pages pairing visuals with specifications
• Portfolios with separate artwork and commentary
• Concept presentations with a technical visual style

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

Document visual work with real screenshots captured before a change, during key interactions, and after completion. Inspect each image and share captioned files throughout the task so users can review progress and redirect the work early.

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

• Reviewing UI changes during implementation
• Comparing a visual bug before and after a fix
• Checking game and 3D scenes through screenshots

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

Track multiple Claude sessions working on one project, check that changes reached main with screenshots and changelog entries, verify the live site, and identify finished sessions, interrupted work, and questions awaiting the user.

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

• Reviewing progress across parallel Claude sessions
• Checking merged changes, changelog images, and the live site
• Archiving finished sessions after preserving screenshots

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

Embed interactive Unicorn Studio scenes in websites and adjust their sizing, layering, and rendering settings. Use it to integrate animated visuals with page content, manage performance, and troubleshoot scenes that fail to appear.

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

• Embed an interactive scene in a website
• Layer animated visuals with text and images
• Adjust rendering settings for mobile devices

Choose a visual direction for landing pages using WebGL, a browser graphics technology. Balance brand style with readable copy, clear calls to action, mobile performance, accessibility, and implementation effort, then define fallbacks and build priorities.

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

• Choosing a visual direction for a WebGL landing page
• Planning a launch page around a 3D product model
• Improving mobile performance and reducing motion