35:I[8054,["/_next/static/chunks/0n8co495bugh0.js","/_next/static/chunks/0csmpwpm9scwv.js","/_next/static/chunks/2tf14-0oaa2ok.js","/_next/static/chunks/0i6pfab6ujd9i.js","/_next/static/chunks/32u7gfw7_j3cs.js"],"EffectCard"] 36:T4c2,37:Td22,.fx-modal-willow-help { position: relative; width: 300px; height: 190px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(134, 239, 172, 0.18); background: linear-gradient(165deg, #17201b, #090d0a); font-family: system-ui, "Segoe UI", sans-serif; color: #e6f2e9; } .fx-modal-willow-help-gate { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .fx-modal-willow-help-page { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .fx-modal-willow-help-open { padding: 9px 20px; border-radius: 8px; border: 1px solid rgba(134, 239, 172, 0.4); background: rgba(134, 239, 172, 0.1); color: #86efac; font-size: 12.5px; cursor: pointer; } .fx-modal-willow-help-veil { position: absolute; inset: 0; background: rgba(4, 8, 6, 0.7); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; transition: opacity 0.24s ease, visibility 0.24s; } .fx-modal-willow-help-card { position: absolute; inset: 12px 18px; display: flex; flex-direction: column; gap: 6px; padding: 11px 14px 12px; border-radius: 12px; border: 1px solid rgba(134, 239, 172, 0.24); background: #121a15; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.62); transform-origin: top center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s; } .fx-modal-willow-help-title { font-size: 12.5px; font-weight: 600; } .fx-modal-willow-help-search { width: 100%; box-sizing: border-box; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(134, 239, 172, 0.22); background: #0d1310; color: #e6f2e9; font-size: 10.5px; outline: none; } .fx-modal-willow-help-search:focus { border-color: #86efac; } .fx-modal-willow-help-list { display: flex; flex-direction: column; gap: 3px; } .fx-modal-willow-help-topic { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; border-radius: 7px; background: rgba(134, 239, 172, 0.06); font-size: 10.5px; color: #b7d3c2; cursor: pointer; transition: background 0.18s ease; } .fx-modal-willow-help-topic:hover { background: rgba(134, 239, 172, 0.14); } .fx-modal-willow-help-chev { color: #86efac; font-size: 12px; } .fx-modal-willow-help-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .fx-modal-willow-help-mail { font-size: 9.5px; letter-spacing: 0.06em; color: #7d9887; } .fx-modal-willow-help-close { padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(134, 239, 172, 0.32); color: #86efac; font-size: 10px; cursor: pointer; } .fx-modal-willow-help-gate:checked ~ .fx-modal-willow-help-veil { opacity: 1; visibility: visible; pointer-events: auto; } .fx-modal-willow-help-gate:checked ~ .fx-modal-willow-help-card { opacity: 1; visibility: visible; pointer-events: auto; animation: fx-modal-willow-help-sway 0.86s cubic-bezier(0.3, 0.8, 0.35, 1); } @keyframes fx-modal-willow-help-sway { 0% { transform: translateY(-30px) rotate(-6deg); } 38% { transform: translateY(0) rotate(3.4deg); } 60% { transform: translateY(0) rotate(-1.9deg); } 80% { transform: translateY(0) rotate(0.9deg); } 100% { transform: translateY(0) rotate(0deg); } }6:["$","main",null,{"className":"page-shell","children":[["$","script",null,{"type":"application/ld+json","suppressHydrationWarning":true,"dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://librarycss.com/en\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"#help\",\"item\":\"https://librarycss.com/en/tags/help\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"CollectionPage\",\"name\":\"help CSS effects\",\"description\":\"Free CSS effects tagged \\\"help\\\".\",\"url\":\"https://librarycss.com/en/tags/help\",\"inLanguage\":\"en-US\",\"mainEntity\":{\"@type\":\"ItemList\",\"numberOfItems\":1,\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Willow Help Modal\",\"url\":\"https://librarycss.com/en/effects/modal-willow-help\"}]}}]"}}],["$","div",null,{"className":"page-container max-w-[1500px]","children":[["$","nav",null,{"aria-label":"Breadcrumbs","className":"min-w-0","children":["$","ol",null,{"className":"flex flex-wrap items-center gap-1 text-xs text-[color:var(--muted)]","children":[["$","li","/en",{"className":"flex min-w-0 items-center gap-1","children":[false,["$","$L18",null,{"href":"/en","className":"truncate hover:text-[color:var(--foreground)]","children":"Home"}]]}],["$","li","/en/tags/help",{"className":"flex min-w-0 items-center gap-1","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":12,"height":12,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-chevron-right shrink-0 text-[color:var(--faint)]","aria-hidden":true,"children":[["$","path","mthhwq",{"d":"m9 18 6-6-6-6"}],"$undefined"]}],["$","span",null,{"className":"truncate font-medium text-[color:var(--foreground)]","aria-current":"page","children":"#help"}]]}]]}]}],["$","header",null,{"className":"mt-4","children":[["$","h1",null,{"className":"text-3xl font-bold tracking-[-0.04em] text-[color:var(--foreground)] sm:text-4xl","children":["#","help"," CSS effects"]}],["$","p",null,{"className":"mt-3 max-w-3xl text-sm leading-6 text-[color:var(--muted)]","children":["1"," free, pure-CSS effects match the \"","help","\" tag. Each is copy-ready and needs no library or build step."]}]]}],[["$","h2",null,{"className":"sr-only","children":"Effects tagged #help"}],["$","div",null,{"className":"mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4","children":[["$","$L35","modal-willow-help",{"effect":{"id":"modal-willow-help","title":"Willow Help Modal","category":"Modals","description":"A support panel hangs from its top edge and sways to a stop over a list of topics.","tags":["modal","help","keyframes","spring"],"html":"$36","css":"$37","previewVideoUrl":null},"hrefPrefix":"/en/effects","locale":"en"}]]}]],"$L38","$L39",null]}]]}]

Effects tagged #help

Willow Help Modal

Popular tags