Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.
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.
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.
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.
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.
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.
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.
Design appointment-based service websites with calm photography, spacious layouts, and clear treatment comparisons. Carry the same visual style through location, practitioner, and time selection, including booking confirmation, validation errors, retries, and preserved choices.
Design a dark navy interface with bold cobalt feature blocks, readable white text, thin framing lines, and localized blue glow. Apply a consistent visual direction to hero banners, action cards, navigation, link groups, and footer areas.
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.
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.
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.
Add subtle two-digit number markers to process steps, feature groups, cards, or editorial sections. Use consistent placement, spacing, and understated typography to provide visual structure while keeping headings and calls to action prominent.
Create buttons, cards, and panels with diagonally cut corners. It provides CSS shapes, border treatments, and sizing guidance to keep the geometry consistent while preserving readable labels, usable touch targets, and visible keyboard focus.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)