Add a real 3D object to a web page using Three.js. Combine geometric depth, materials that respond to light, perspective, and subtle rotation or floating motion for hero sections and product visuals.
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.
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.
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 a dark interface around frosted glass surfaces and a clock-like circular dial. Coordinate backgrounds, navigation, buttons, typography, and slow motion to create a consistent instrument-panel appearance with restrained monochrome highlights.
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.
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 enterprise AI and automation product pages that explain permissions, approvals, audit records, and recovery from failures. Organize verified metrics and case studies, accessible workflow details, and demo or waitlist forms that clarify what happens next.
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.
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.
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.
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.
Build consistent rows and grids of brand logos using Iconify Simple Icons. Place marks in 64×64 visual boxes, adjust their size and alignment, and add accessible labels where needed for integration lists, partners, or tool badges.
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.
Design SaaS interfaces with warm paper tones, orange accents, rounded forms, and layered product illustrations. Apply a consistent visual direction across onboarding, cards, buttons, and motion, with adjustable warmth, softness, and visual detail.
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.
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.
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.
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.
Design a clean agency-style page using nested containers: a light outer frame, dark inset sections, and rounded inner cards. Coordinate pricing, service groups, and action areas through clear hierarchy, generous spacing, and restrained accent colors.
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.
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.
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.
Is this your account? Link GitHub to bring it onto your creator page (Japanese)