Fresh: shaders, liquid glass & video

Interface parts,
fired hot.

Shaders, liquid glass, heroes, AI inputs, forms and motion pieces built to a high bar. Every one is a single file you can preview live, read, and paste anywhere: no framework, no build step.

Browse categories Open a component →
Editorial herohero-editorial Shader gradientshader-gradient Aurora herohero-aurora
0components
0categories
0dependencies
MCPuse with your AI →

01Featured

Hover a tile to run it live.

02Browse by category

Every category, one click away.

←→

How it works

  1. One file per component. Markup, a <style> block and an optional <script>. Nothing global leaks: every class is prefixed.
  2. No dependencies. Pure HTML, CSS and JS. Works in React, Vue, Astro or a plain page; port the markup to JSX and keep the CSS.
  3. Motion that behaves. Effects use transforms and opacity, pause offscreen where it matters, and respect prefers-reduced-motion.
  4. Video & frame assets. Video components reference files under media/. Swap in your own loops or frame sequences; the code handles any aspect ratio.
  5. Fonts. Previews use Geist and Instrument Serif from Google Fonts. The downloaded index.html includes the link.
  6. MIT licensed. Free for personal and commercial work, no attribution required. Ship it, change it, sell what you build with it.

Model Context Protocol

Katsyka UI inside your AI

Connect Katsyka UI to Claude, Cursor, VS Code, ChatGPT or any MCP client. Your assistant searches the library and pulls the exact component code into whatever you're building. No key, no install.

https://ui.katsyka.dev/mcp
  1. search_componentsDescribe what you need ("glass pricing table", "date range slider") and get ranked matches.
  2. get_componentReturns HTML, CSS and JS separately, or a complete runnable index.html. Video assets resolve to absolute URLs.
  3. list_componentsThe whole catalogue, or one category. New components show up the moment they're published.