Repository navigation
Website: home page UI icons from useAnimations itself - #116
Merged
Merged
Conversation
The search field's magnifier is searchToX: it turns into an X while the field has text, and the X clears the search (the browser's own clear button is hidden). The interaction select's chevron (chevronDown) and the hero badge's arrow (arrowRight) play while hovered or keyboard-focused. The "Clear search" label is translated into every language.
🔎 Website previewhttps://pr-116--affectionate-goldberg-13a61e.netlify.app Updated for commit fb810ff. |
ControlIcon (was HoverIcon) also follows a <details>' open state and hovers of any [data-icon-trigger] element. New icons: copy on the install command and the code blocks' copy buttons, plusToX on the FAQ questions (X while open), droplet, package, users, server and cpu on the feature cards, arrowRight on the documentation and Get started buttons (the text arrow is gone from their labels in every language).
tuanphungcz
force-pushed
the
website-animated-ui-icons
branch
from
October 19, 2026 16:01
75ce370 to
fb810ff
Compare
tuanphungcz
enabled auto-merge (squash)
October 19, 2026 16:12
tuanphungcz
disabled auto-merge
October 19, 2026 16:23
tuanphungcz
enabled auto-merge (squash)
October 19, 2026 16:23
tuanphungcz
added a commit
that referenced
this pull request
Oct 19, 2026
Follows #116, which brought useAnimations icons to the header and the home page. This PR brings them to every other page, so visitors see the library at work everywhere. **Icon stills come alive on hover** - Category, interaction and icon index grids, the Lottie and shadcn pages, related icons and other versions on icon pages, plus the category and interaction cards. A still plays on hover or keyboard focus, in its closest hover form: click icons replay, loops loop while hovered. - Each icon's Lottie JSON loads only on the first hover (`IconStill.astro`, `scripts/hover-icons.ts`, `HoverIcon.tsx`), so pages cost nothing extra until someone hovers. - Icons whose first frame is empty keep their still, and so does every icon with reduced motion. **Micro-interactions** - **Copy buttons** (install command, code blocks, icon dialog, documentation): the copy icon turns into a checkmark after a successful copy. `copy.ts` now sets `data-copied` only on success. - **Icon dialog:** the close button is a plus that turns into an X on every open. The download links get a download icon and "Icon page" gets an arrow. - **Icon pages:** chevrons in the breadcrumbs, download icons, the FAQ uses the same plus/X as the home page, and arrows on "All … icons" and previous/next. - **Arrows** on the icon index category links, the Lottie and shadcn "All icons" links and the home FAQ links. The text arrows are gone from those labels in all 13 languages. - **Language switcher** and the documentation's "On this page" get a chevron. The language banner's close button is a plus/X. - **Footer:** links that leave the site get an external-link icon. - **404:** the alert plays in on load, and Home / Browse icons get their own icons. **ControlIcon** has two new modes: `screen` (plays in once on screen, also when a dialog or banner around it opens) and `copied`. The shared chunk grows from 2.6 to 5.1 kB gzip (17 icons). Animated control icons per page: home 31, icon page 27 (+13 stills), `/icons` 27 (+300 stills), `/categories` 7 (+97 stills), documentation 8, 404 9. Verified locally (`vp check`, `website:build` with all languages, preview in Chrome): - Every ControlIcon island hydrates and renders an SVG. - Hovering animates the download, arrow, breadcrumb and footer icons, and leaving returns them to their start. - Opening a FAQ, the docs table of contents or the language switcher animates their icon. - Copying shows the checkmark, then the copy icon comes back. All 28 documentation code blocks have the icon. - The dialog's plus turns into an X on every open. - All 5 icons of a category card load and play on hover. - No leftover text arrows in the built pages. No console errors.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The home page now uses useAnimations icons for its own controls, so visitors see the library at work outside the icon grid. 21 icons, one shared island chunk (2.6 kB gzip).
searchToX. It turns into an X while the field has text (also when?q=fills it on load), and the X clears the search. The browser's built-in clear button is hidden.chevronDownplays on hover or keyboard focus.arrowRightplays on hover or keyboard focus. The text arrows are gone from those labels in all 13 languages.copyplays on hover.plusToX, an X while a question is open (replaces the rotating text plus).droplet,package,users,server,cpu; each plays while its card is hovered.New islands:
components/SearchIcon.tsx.components/ControlIcon.tsx: plays an icon inside Astro markup, driven by the element around it. That can be hover or focus of the closest link, button, label or[data-icon-trigger], or the open state of the closest<details>.The "Clear search" label is translated into all 13 languages.
Verified locally (
vp check,npm run website:build, preview in Chrome):?q=heartshows the X. Clicking it empties the field, shows all 300 icons and drops?q. Typing turns the icon back into an X.