Loading the effect library...
Frequently asked questions
Yes. You do not need to sign up or pay to view and copy the code and prompts.
Click View code, choose Copy HTML + CSS, then paste it into your website. With WordPress or Elementor, you can paste the HTML into an HTML widget and the CSS into the custom CSS section. All class names have the fx- prefix, so they rarely clash with existing CSS, but you should still test on a draft first.
The prompt already includes the effect description, technical requirements and reference code. Paste it into Claude, ChatGPT or another AI tool, and add your own requests such as changing the color, speed or size so the AI rewrites the code your way. The Open in Claude and ChatGPT buttons open the prompt in a new tab, where you need to be signed in.
Most work well in modern browsers. Some effects use newer CSS features such as @property, backdrop-filter or :has(), so they may not display correctly in older browsers. Test on the browsers and devices your customers use most.
The effects here favor transform and opacity, so they are fairly light. Even so, many infinitely looping animations on one page can cause jank on weak devices, so use them selectively. Most samples include a prefers-reduced-motion block that reduces motion for users who have turned that option on.
Message Nam for advice.
