A gem is a single interaction or animation: a hover effect, a marquee, a cursor trail, a scroll reveal. Add one to a button, heading or card and it feels alive. Each gem comes in up to four formats (Webflow, Figma, Framer and HTML), plus a prompt for your AI coding tool. Each gem page shows which ones it has.
Build the page with sections, then add gems for the detail people remember.
Open Gems in the sidebar. You will see Popular (the most copied), Recently added, Free and Categories. The library has hundreds of gems, and each one plays a live preview before you copy it.
Every gem has a Category and an Interaction. The interaction is what sets the effect off: Hover, Click, Scroll, Mouse Move, Drag or Loop. Filter by either to narrow the list.
Some gems are free for everyone. The rest come with Pro and Ultra. A lock icon in the copy menu tells you when a gem needs Pro. Gems, plans and limits has the details.
Next: find the right gem.
