MengTo
Showing 61–120 of 142 skills · Page 2 of 3
MengTo / funky-purple-container-tech
6.3kCreate a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.
MengTo / generate-reference-inspired-brand-worlds
6.3kGenerate multiple original brand campaign worlds from a supplied visual reference while controlling how close the new work feels without copying protected signature elements
MengTo / glass-dark-mode-clock
6.3kCreate a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.
MengTo / glass-dark-ui
6.3kBuild dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask
MengTo / globe-gl
6.3kUse when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
MengTo / globe-particles
6.3kCreate a globe-like 3D particle visualization with a dense luminous spherical core and thinner orbital ring or flattened disc
MengTo / gooey-blob-system
6.3kCreate a gooey blob system using SVG filters where multiple shapes merge into a single fluid form. Use overlapping circles combined with a Gaussian blur and color matrix filter to produce a continuous, organic mass. The forms should visually fuse and separate based on proximity.
MengTo / gsap
6.3kUse when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
MengTo / gsap-scrolltrigger-storytelling
6.3kBuild cinematic sticky product storytelling with GSAP ScrollTrigger, progressive UI reveals, scroll-synced animation, smooth interpolation, and immersive section transitions.
MengTo / high-contrast-skeuomorphic-clean
6.3kCreate a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.
MengTo / html-to-interaction-prompts
6.3kConvert a supplied HTML page or generated HTML reference into a screenshot-backed article containing multiple reusable interaction prompts
MengTo / image-first-grid-layout
6.3kCreate an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.
MengTo / implement-fog-of-war
6.3kImplement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games. Use for orthographic or isometric visibility masks, obstacle-aware line of sight, player and enemy vision ranges, hidden-enemy targeting rules, fog shader artifacts such as spokes or seam…
MengTo / landing-page
6.3kUse when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
MengTo / light-mode-paper-technical
6.3kCreate a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.
MengTo / matterjs
6.3kUse 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.
MengTo / mesh-gradient-dark-blue-clean
6.3kCreate a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion
MengTo / nested-container-clean-agency
6.3kCreate a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.
MengTo / nested-container-frames
6.3kCreate a container-in-container layout system using nested frames. Use an outer centered container with visible vertical boundary lines and corner markers. Inside, place inner containers inset from the edges, each with its own background and rounded frame.
MengTo / no-ai-design-slop
6.3kPrevent and remove generic AI-generated design defaults, incoherent visual choices, and established UI defects while creating, revising, or reviewing websites, apps, screenshots, mockups, and design code.
MengTo / operational-enterprise-ai
6.3kCreate or redesign enterprise AI, automation, security, and operations product pages that explain system boundaries, approvals, auditability, exceptions, and rollback.
MengTo / optimize-threejs-games
6.3kProfile, diagnose, and improve Three.js or WebGL game performance without regressing gameplay. Use for frame-time drops, CPU/GPU pressure, draw calls, texture and geometry budgets, animation loops, adaptive quality, mobile performance, and browser performance verification.
MengTo / optimize-web-animations
6.3kProfile, audit, and optimize frontend page performance with emphasis on animation work, memory-leak risks, long-session slowdowns, CSS animations, canvas/WebGL requestAnimationFrame loops, marquees, skeletons, GSAP/Three/Matter effects, timers, listeners, and observers
MengTo / orange-clean-paper-saas
6.3kCreate a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.
MengTo / pointer-trail-emitter
6.3kBuild a cursor trail whose spacing stays constant at any hand speed, by emitting motes per unit of distance travelled rather than on a timer, so a flick draws the same continuous ribbon as a crawl instead of breaking into scattered dots.
MengTo / pricing-page
6.3kUse 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.
MengTo / product-proof-saas
6.3kCreate or redesign SaaS and AI product landing pages where a real workflow, interface, or deterministic demo is the central proof. Use for pale atmospheric shells, product UI in the hero, prompt-to-output stories, audience tabs, compact feature modules, honest pricing comparisons, and FAQ handoffs.
MengTo / publish-project-to-github
6.3kPackage a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible, and verify the deployed result
MengTo / reveal-hover-effect
6.3kBuild cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another trea…
MengTo / scroll-progress-timeline
6.3kTurn any ordered process into a data-driven vertical or horizontal scroll story with a base line, progress fill, active step states, responsive collapse, semantic fallback, and reduced-motion behavior.
MengTo / scroll-scrubbed-visual-sequence
6.3kBuild reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers.
MengTo / scroll-scrubbed-word-reveal
6.3kReveal marked-up text word by word as scroll progress advances, while preserving semantic inline links, emphasis, responsive line wrapping, and reduced-motion readability.
MengTo / scroll-world-storytelling
6.3kTurn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography
MengTo / shaders-cursor-ripples
6.3kAdd cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components
MengTo / ship-web-games
6.3kPackage, deploy, and verify a playable Three.js or web game. Use for release builds, asset delivery, private/public deployment, production smoke tests, browser proof, release notes, rollback readiness, and cleanup of temporary QA resources.
MengTo / skeuomorphic-ui
6.3kCreate skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details
MengTo / split-layout-technical
6.3kCreate a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.
MengTo / staggered-word-reveal
6.3kCreate subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport.
MengTo / stitched-full-page-capture
6.3kCapture or repair reliable full-page screenshots for lazy-loaded, scroll-animated, Framer, WebGL/canvas, or reveal-heavy web pages
MengTo / tailwindcss
6.3kUse when designing/implementing UI with Tailwind CSS (layout, typography, responsive, theming, component patterns). Includes quick recipes and conventions for clean, consistent web design.
MengTo / tech-green-dark-mode-modern
6.3kCreate a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.
MengTo / technical-wireframe-info-layout
6.3kCreate a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.
MengTo / test-playable-web-games
6.3kTest a playable browser game end to end with deterministic fixtures and real browser evidence. Use for gameplay QA, regression testing, controls, accessibility, responsive/mobile testing, save flows, console checks, performance smoke tests, and release verification.
MengTo / threejs
6.3kUse 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.
MengTo / threejs-landscape
6.3kBuild a live Three.js landscape that stays quiet behind a subject — a noise heightfield on a polar grid so resolution follows the lens, ground coloured by slope and moisture rather than by texture, instanced GPU grass whose wind costs nothing on the CPU, scattered stones, a gradient sky dome, a star…
MengTo / threejs-towers
6.3kGenerate architecture procedurally in Three.js and film it assembling — a small geometry vocabulary that builds pagodas, castles, domes and spires from parameters instead of mesh files, hip roofs with flying eaves driven by a single profile function, and a clipping-plane build animation where everyt…
MengTo / threejs-weather
6.3kPut weather into a Three.js scene that reads as weather — rain anchored inside the frustum, a storm that is the rain leaned on rather than a second system, lightning on its own light with thunder scheduled by distance, snow that blows up into blizzards and keeps settling until the ground goes white,…
MengTo / tune-enemy-ai
6.3kBuild, debug, balance, or test combat enemy AI for playable action games. Use for aggro, target selection, navigation, spacing, attack choices, telegraphs, retreats, boss behavior, behavior-state machines, and deterministic AI regression tests.
MengTo / unicorn-studio
6.3kUse when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).
MengTo / unsplash-asset-images
6.3kUse when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for producing the right resolutions and aspect ratios (1:1, 4:5, 3:4, 16:9, 9…
MengTo / vantajs
6.3kUse when adding animated WebGL background effects with Vanta.js (setup, parameters, resizing, performance, integration in React/Next.js).
MengTo / web-technique-to-skill
6.3kTurn a visual or interaction technique you already built into a reusable web-design skill, by isolating the one mechanism that makes it work while reproducing its approved reference exactly around that focus, and packaging it with a demo that proves both the mechanism and the visual fidelity.
MengTo / webgl-3d-object
6.3kCreate a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion
MengTo / webgl-landing-steering
6.3kUse when creating or refining WebGL-heavy landing pages and you need to steer toward a specific visual outcome (premium, technical, playful, cinematic) while balancing conversion clarity, performance, and implementation complexity.
MengTo / webgl-laser
6.3kCreate a fixed full-screen WebGL laser background effect with a thin white-hot vertical core, restrained brand-colored halo, and soft smoky fog around the beam. Use only for laser background effects, not full page layout, copy, generic hero scenes, particles, or unrelated motion systems.
MengTo / write-like-meng-on-x
6.3kWrite, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content repo evidence
MengTo / x-bookmark-quote-posts
6.3kCheck a user's latest X/Twitter bookmarks and turn recent saved posts into source-backed quote-post drafts calibrated against the user's latest 100 authored posts
MengTo / animation-on-scroll
6.3kCreate an on-scroll animation trigger using IntersectionObserver with Tailwind-friendly animation classes and keyframes
MengTo / audit-reference-originality
6.3kAudit a website or digital experience against its supplied source references for originality and plagiarism risk
MengTo / audit-verify-explain-grade-5
6.3kAudit work, verify claims with concrete evidence, and explain the result in simple grade-5 language