BYQ Gems

Motion, in one copy.

275 micro-interactions and motion effects: magnetic buttons, cursor trails, scroll reveals, kinetic type. Copy one to Webflow, Framer, Figma or HTML, or hand it to your AI.

Timing, easing, physics, restraint. The four things generated sites still get wrong, and the four things every gem is built around.

Copy it where you build.One gem, every surface.

Browse the gems library
  • Paste it

    Into Webflow, Framer, HTML or Figma, as one self-contained piece with its styles and script.

  • Or prompt it

    A brief for Claude Code, Cursor, Windsurf, v0, Bolt, Lovable or Replit, timing values included.

BYQ MCP

Ask for it by name.Your AI adds the gem, timing intact.

About the BYQ MCP

Ready for the era of AI.Prompt it, ask for it, or add it to a site.

Copy it as a prompt

Each gem packages itself as a brief: its markup, styles and script, every timing value and the reduced-motion rule, for Claude Code, Cursor, v0, Lovable and the rest.

Browse the gems

Connect the MCP

The whole library as 8 tools inside your AI app. Ask for a magnetic hover or a scroll reveal and the gem arrives as code, timing included.

Set up the MCP
Tool calls the BYQ MCP answered last month, from designers and their agents.

Add them to a site

On a site built in the BYQ Website builder, select a heading or a grid and ask for the gem. It lands on that element, timing intact.

Open the Website builder

One library,more ways to build with it.

Frequently askedquestions.

275 self-contained micro-interactions and motion effects: magnetic buttons, cursor trails, scroll reveals, kinetic type, marquees, canvas and WebGL. A gem is behaviour you add to something you have already built, not a block you place. Each one is a single interaction with its own markup, styles and script.

Every gem copies to Webflow, to Framer and as HTML. 241 of 275 also have a Figma file and a paste-ready prompt for your AI tool (the newest gems get theirs after release). You can also let your AI find and add gems through the BYQ MCP.

Yes, eight: Fit Text, Crosshair Cursor, Menu Toggle, Open Hours, Sticky Media Swap, Glyph Static, Spinning Text and Before / After Slider. Anyone can look at every gem; Pro and Ultra unlock copying the rest.

Most do not. 51 of 275 use GSAP 3.13, which is free for commercial use under Webflow's licence; the rest are CSS, vanilla JavaScript, canvas or WebGL. Each gem says what it needs before you copy it.

Gems are built to respect reduced motion: they check the visitor’s preference and settle to their end state. When you copy a gem as a prompt, the brief also tells your AI to keep that rule. Looping gems you place as decoration still deserve a pause control to meet WCAG 2.2.2.

Copy to Webflow pastes the gem as a self-contained element with its styles and script, so it needs no Interactions panel work. Webflow allows 50,000 characters of custom code per page, which every gem fits with room to spare. Use the Interactions panel for standard motion and gems for what it cannot express.

Copy to Framer pastes the gem onto your canvas as a code component you can place and resize. The Figma version, available for 241 gems, gives you the gem's design so your file matches the build.

Yes. With the BYQ MCP connected (Pro and Ultra), describe the effect you want, such as a magnetic hover for the main button, and Claude, Cursor or Codex searches the gems, picks a match and adds it to your project with the exact timing values. Copy Prompt does the same without the MCP, formatted for Claude Code, Cursor, Windsurf, v0, Bolt, Lovable or Replit.

Yes, from Claude: with the BYQ MCP connected, ask for the gem and the site tools search the library and add it to your BYQ-built site.

Yes, in as many projects as you like while you are a member, and what you have copied stays yours. Reselling or repackaging gems as your own library is not allowed.
Stop browsing. Start building.
Customer headshot used in testimonial section of BYQ Supply website.
Customer headshot used in testimonial section of BYQ Supply website.
Customer headshot used in testimonial section of BYQ Supply website.
Customer headshot used in testimonial section of BYQ Supply website.
Trusted by 10,000+
designers and agencies
Get started for free