Small, original building blocks for motion on the web: text that moves, hover effects, a 3D ring, a shader background. Hover a tile to watch it run, then open it to tune it and export it for your tool.
Free: live previews, copy code, copy prompt, and a ready-made prompt for each tool. Free account: the .zip download and the all-tools bundle. Everything is original code; we study techniques with Enrichr and write our own versions. How to use these with an AI assistant.
/
Technique
Recently viewed
Coming soon
3D glyph text
Coming soon
Magazine page flip
Nothing matches.
Browse by technique
Request an element
Missing an effect? Describe the motion you want and where you saw the idea; we add the best-requested ones. Submit a link or an original element instead.
Free tools that go with it
Found a site whose motion you like? Check how it is built first, then ask your AI assistant to make your own version from these elements.
Animation library checkerFind out whether a site runs GSAP, Three.js, Lenis or Framer Motion.
Website font finderThe fonts a page really loads, from just a URL.
Color palette from URLThe colors a site really uses, ranked, as copy-ready CSS.
Design token extractorPull a site's CSS variables and tokens as JSON or Tailwind.
FAQ
Are these free?
Copying the code, copying the prompt and the ready-made prompt for each AI tool are free. The .zip download and the all-tools bundle need a free account. During the preview the code is free to use in personal and client projects; final licence terms will be published before any paid tier starts.
Do they need GSAP or three.js?
No. Every element here is plain JavaScript and CSS, and the shader background uses the browser's own WebGL.
Are they copies of other sites?
No. They are original code. We use Enrichr to study how award-winning sites work, then write our own implementation of the technique. We never host or embed other people's designs.
Do they respect reduced motion?
Yes. Each element checks prefers-reduced-motion and shows a still version.