AI导哈

设计与多媒体

glassmorphism

iart-ai/web-ani…n-skills

This skill should be used when the user asks to "add a glassmorphism effect", "frosted glass UI", "Apple liquid glass style", "frosted blur card", "translucent glass panel animation", "make a frosted nav bar", "build a glass modal/dialog", "animate a glass card on hover", or "add a refracting liquid-glass hero". Covers frosted translucent panels with backdrop-filter blur, edge/specular highlights, SVG liquid-glass refraction, motion on hover/scroll/enter, and accessible reduced-transparency fallbacks.

  • 2580 次安装
  • 64 星标
  • 收录于

安装命令

npx skills add https://github.com/iart-ai/web-animation-skills --skill glassmorphism

SKILL.md

Glassmorphism (Frosted & Liquid Glass)

Translucent, frosted UI: panels you can see through, blurred so the backdrop reads as soft color, rimmed by a bright edge of light, floating on layered shadow. The 2026 "liquid glass" evolution adds refraction — the background visibly bends through the panel — plus moving specular highlights. The goal is depth and material, not just opacity.

When to use

  • Frosted cards, nav bars, sidebars, modals/dialogs, and toolbars over busy/photo backgrounds
  • Login/hero panels and overlays that should feel layered above the page
  • Apple-style "liquid glass" heroes: refracting, slowly churning surfaces with a specular sweep
  • Hover/scroll/enter motion on glass — frost deepening, highlight brightening, the panel lifting
  • Any place where content needs to read as floating glass while staying legible

The four ingredients of believable glass

Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:

Glassmorphism (Frosted & Liquid Glass)

Translucent, frosted UI: panels you can see through, blurred so the backdrop reads as soft color, rimmed by a bright edge of light, floating on layered shadow. The 2026 "liquid glass" evolution adds refraction — the background visibly bends through the panel — plus moving specular highlights. The goal is depth and material, not just opacity.

When to use

  • Frosted cards, nav bars, sidebars, modals/dialogs, and toolbars over busy/photo backgrounds
  • Login/hero panels and overlays that should feel layered above the page
  • Apple-style "liquid glass" heroes: refracting, slowly churning surfaces with a specular sweep
  • Hover/scroll/enter motion on glass — frost deepening, highlight brightening, the panel lifting
  • Any place where content needs to read as floating glass while staying legible

The four ingredients of believable glass

Glass is never one property. Every panel needs all four, or it reads as a plain translucent box:

相关 Skills

accessible-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "respect prefers-reduced-motion", "honor reduced motion", "make my animations accessible", "fix vestibular / motion-sickness issues", "add a useReducedMotion hook", "gate GSAP / Framer Motion / Lenis for reduced motion", or "meet WCAG 2.3.3 / C39". Provides tiered (not all-or-nothing) reduced-motion patterns in CSS and JS.设计与多媒体281860fps-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "fix janky CSS animation", "make animation 60fps", "stop layout thrashing", "animate width/height/top/left smoothly", "convert animation to transform", "animate box-shadow performantly", "animate height auto", "FLIP animation", or "why is my scroll/hover animation choppy".设计与多媒体2771svg-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "animate an SVG", "make a line draw itself on", "do a stroke draw-on / signature animation", "morph one shape into another", "move an element along a path", "animate an icon/logo", or "animate an SVG gradient or filter". Covers stroke-dashoffset draw-on, path morphing, motion-along-path, and animated icons/gradients/filters via CSS, SMIL, and GSAP.设计与多媒体2743micro-interactioniart-ai/web-ani…n-skillsThis skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.前端开发2701gsap-webiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "build a scroll animation", "add ScrollTrigger", "pin a section while scrolling", "scrub an animation to scroll", "create a hero timeline", "do a horizontal scroll section", "split text and animate words", "animate a layout change with GSAP Flip", "sync ScrollTrigger with Lenis", "Lenis smooth scroll jittery", "ScrollTrigger markers drift", "ScrollTrigger pins break with Lenis/Locomotive", or "set up smooth scroll with GSAP pinning". Covers GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis/Locomotive smooth-scroll sync for code-driven web motion.设计与多媒体2661page-transition-animationiart-ai/web-ani…n-skillsThis skill should be used when the user asks to "animate page or route transitions", "add a page transition or crossfade between views", "animate route changes in Next.js App Router", "use the View Transitions API", "AnimatePresence exit doesn't fire on navigation", or "Framer Motion exit animation not working / exit animation before unmount in Next.js". Covers enter/exit page-transition animation with the View Transitions API and Framer Motion, for Next.js App Router and general SPA routing.设计与多媒体2526