Skip to content

Website: animated icons across the whole site - #117

Merged
tuanphungcz merged 1 commit into
mainfrom
website-more-animated-icons
Oct 19, 2026
Merged

tuanphungcz merged 1 commit into
mainfrom
website-more-animated-icons

Conversation

@tuanphungcz

Copy link
Copy Markdown
Collaborator

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.

- Icon stills (category, interaction, icon index, Lottie and shadcn grids, related icons, other versions, category and interaction cards) play on hover or keyboard focus. Each icon's Lottie JSON loads on the first hover (IconStill.astro, scripts/hover-icons.ts, HoverIcon.tsx); icons whose first frame is empty keep their still.
- Copy buttons: the copy icon turns into a checkmark after a successful copy (install command, code blocks, icon dialog, documentation). copy.ts sets data-copied only on success.
- Icon dialog: the close button is a plus that turns into an X on every open; download links get a download icon, "Icon page" an arrow.
- Icon pages: breadcrumb chevrons, download icons, plus/X FAQ, 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 a plus/X, footer links that leave the site an external-link icon, the 404 page an alert that plays in and home/grid icons.
- ControlIcon: new modes `screen` (plays in once on screen) and `copied`.
@github-actions

Copy link
Copy Markdown

🔎 Website preview

https://pr-117--affectionate-goldberg-13a61e.netlify.app

Updated for commit e789bef.

@tuanphungcz
tuanphungcz merged commit 035f164 into main Oct 19, 2026
7 checks passed
@tuanphungcz
tuanphungcz deleted the website-more-animated-icons branch October 19, 2026 16:45

This branch was successfully deployed

1 active deployment
preview — e789bef2 Deployed Oct 19, 2026 by tuanphungcz via preview #75
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant