The argument in one line.
Premium website polish — liquid glass cards, shader gradient backgrounds, physics-based motion, designed data charts — no longer requires design skill, because eight free libraries let anyone copy the component code straight into an AI coding editor and ship it as-is.
Read if. Skip if.
READ IF YOU ARE…
- You build sites or apps by prompting AI coding tools like Claude Code, Cursor, or v0, and your output keeps reading as generic AI-template design.
- You're a solo developer or indie hacker with no formal design background who still has to ship a production-looking website.
- You want a concrete, bookmarkable list of component and animation libraries with real copy-paste code, not general design theory.
SKIP IF…
- You already work with a dedicated UI or motion designer, or maintain a mature internal design system.
- You're looking for design fundamentals, color theory, or layout principles — this video is a tool list, not a course.
The full version, fast.
AI coding tools make it trivial to build a working site but produce a recognizable, generic look — the fix isn't more design skill, it's sourcing better raw material. Eight free websites (KokonutUI, React Bits, Bklit, Limora, Anime.js, Motion, Rive, Magic UI) each publish pre-built, professionally designed components — liquid glass cards, shader gradient backgrounds, animated charts, physics-based motion, interactive cursor effects — with copy-paste code or one-line install commands. The workflow is the same everywhere: browse the component, copy the snippet or install command, paste it into an AI editor (Cursor, Claude Code, v0), and the AI wires it into the existing project. Several of the libraries (React Bits, Magic UI) also expose an MCP server so an AI agent can browse and install components directly instead of a human copying code by hand.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:34
01 · Cold open
Host lists premium effects (3D scroll, liquid glass, shaders, data viz) viewers assume take years of design skill, then claims all of it traces back to a handful of free websites — copy the component, paste into an AI editor, done.
00:35 – 01:55
02 · KokonutUI — liquid glass components
Browsable, highly polished animated component library. Host highlights the liquid glass card component specifically, ties it to Apple's 2026 liquid glass trend, and suggests asking the AI to learn the component's style and extend it.
01:56 – 03:08
03 · React Bits — shader gradient backgrounds
130+ fully-coded, AI-ready React components with a visual editor. Fully coded (not video/image) means fast load times. Host points to Stripe's animated background as a real-world example built with React Bits.
03:09 – 04:15
04 · Bklit — designed charts with video export
Data visualization component library: funnel charts, heat maps, line/bar/area charts. Positioned for anyone building an analytics dashboard; free to open in v0 and hand to an AI coding agent.
04:16 – 05:39
05 · Limora — on-brand AI images (host's own tool)
Host's own product. Extracts brand colors/typography/voice from a URL, then generates 14 categories of on-brand design assets (hero images, icons, OG images). Pitched on the consistency angle: randomly generated AI assets look unprofessional if they don't share a locked color palette.
05:40 – 06:23
06 · Anime.js — scroll & SVG animations
"All-in-one animation engine." Host cites an award-winning site built with it and shows a one-command terminal install that teaches an AI coding agent how to generate the same scroll-triggered animations.
06:24 – 07:15
07 · Motion — physics-based motion
Motion.dev's AI Kit page turns an AI agent into a 'motion expert' via a packaged skill. Host shows real examples (an animated site footer, a full site) built through the skill and argues Claude couldn't produce the same result without it.
07:16 – 08:10
08 · Rive — interactive cursor animation
No AI integration — the one tool on the list that requires learning a Figma-like interface directly. Host cites Figma's own homepage as a Rive showcase and frames the learning curve as a differentiator worth charging more for.
08:11 – 10:01
09 · Magic UI — globe & animated beam, plus conclusion
Well-known component site, same copy-paste workflow as KokonutUI, highlighted for its globe/beam components used in bento-grid layouts. Host flags Magic UI's new MCP server, which lets an AI agent select and install the right components itself instead of manual copying. Closes with a CTA to the free linked toolkit file and a request for feedback in comments.
Lines worth screenshotting.
- Nearly every premium visual effect on a famous website — Stripe's animated background, Figma's homepage motion — traces back to a handful of free open component libraries, not a custom in-house build.
- The bottleneck in AI-coded design isn't the AI's ability to write code, it's the quality of the design reference it's given — feed it a professionally built component and it can replicate the pattern.
- Liquid glass became a dominant UI trend across products after Apple introduced the effect in 2026, and free libraries like KokonutUI now ship ready-made liquid glass components.
- React Bits ships 130+ fully-coded (not video or image) components, which means they load instantly compared to video-based hero effects.
- Bklit specializes in data visualization components — funnels, heat maps, line and bar charts — aimed specifically at builders who need an analytics dashboard, not a marketing site.
- Consistency, not novelty, is what makes AI-generated visual assets look professional — random one-off AI images read as amateur, while assets locked to one extracted brand kit read as intentional.
- Motion.dev's AI Kit turns an AI coding agent into what the host calls a 'motion expert' via a packaged skill, rather than requiring the developer to learn animation APIs directly.
- Rive is the one tool on the list without direct AI-agent integration — it requires learning a Figma-like interface, which the host frames as a worthwhile investment specifically because it's harder to automate and therefore more differentiating.
- Magic UI recently added an MCP server, collapsing the old workflow (manually browsing and copying each component) into a single instruction the AI agent can execute end-to-end.
- The stated payoff for design libraries generally is defensive: they stop a site from reading as 'AI slop' rather than adding a novel capability the AI couldn't otherwise produce.
Eight free libraries do the design work AI editors can't yet fake.
WHAT TO LEARN
Sites built by prompting AI tools default to a recognizable generic look not because the AI can't code, but because it isn't fed professionally designed reference components — a handful of free libraries fix that by giving you finished components to copy in as-is.
01Cold open
- The core claim of the video is that premium-looking visual effects are sourced, not designed from scratch by a skilled individual.
02KokonutUI — liquid glass components
- Component libraries built for AI-editor workflows publish copy-paste code specifically so an AI coding tool can drop the exact component into an existing project without redesigning it.
- Chasing a specific visual trend (like liquid glass) works because it ties your site to a recognizable, currently-fashionable pattern rather than an ambiguous 'modern' look.
03React Bits — shader gradient backgrounds
- Fully-coded components load faster than video- or image-based hero effects, which matters for both performance and for how convincingly an effect reads as custom-built.
- Famous production sites (Stripe) run effects sourced from the same free libraries being recommended here, which is the credibility hook for the whole list.
04Bklit — designed charts with video export
- Data-heavy products benefit from a dedicated charting library instead of building bespoke charts, since dashboard credibility depends on chart polish as much as the data itself.
05Limora — on-brand AI images
- AI-generated visual assets read as unprofessional when they're inconsistent — locking a project to one extracted brand kit before generating anything is what makes a batch of AI assets look intentional rather than random.
06Anime.js — scroll & SVG animations
- A single terminal install command can teach an AI coding agent a whole animation pattern (scroll-triggered effects) rather than requiring the developer to hand-write animation logic.
07Motion — physics-based motion
- Some capabilities are now packaged specifically to be consumed by an AI agent (a 'skill') rather than a human, meaning the newest layer of design skill is picking the right skill to hand the agent.
08Rive — interactive cursor animation
- Not every tool worth adopting has an AI shortcut — some still require learning the interface directly, and that friction is framed as a differentiator rather than a reason to skip it.
09Magic UI + conclusion
- An MCP server collapses a manual browse-and-copy workflow into a single instruction an AI agent can execute end-to-end, which is the direction all of these tools are converging toward.
- A free, linked reference file turns a one-time watch into a bookmarkable resource — the video's real deliverable is the list, not the explanation.
Terms worth knowing.
- Liquid glass
- A frosted, translucent UI surface effect popularized by Apple in 2026, now widely copied across web products for cards, panels, and navigation elements.
- Shader gradient
- An animated background effect rendered with GPU shader code rather than a static image, producing smooth, real-time color and motion transitions.
- Vibe coding
- Building software primarily by prompting an AI coding assistant (Cursor, Claude Code, v0) rather than hand-writing most of the code.
- MCP (Model Context Protocol)
- A standard that lets an AI coding agent directly query and pull from a tool or library — in this case, letting an agent browse and install UI components itself instead of a human copying code manually.
- Brand kit extraction
- Automatically pulling a site's colors, typography, and voice from its URL so that AI-generated assets stay visually consistent with the existing brand.
- Physics-based motion
- Animation driven by simulated physical properties (spring, momentum, easing) rather than fixed keyframes, producing movement that feels natural instead of mechanical.
Things they pointed at.
00:35toolKokonutUI
01:56toolReact Bits
03:09toolBklit
05:40toolAnime.js
06:24toolMotion (motion.dev)
07:16toolRive
08:11toolMagic UI
01:36linkStripe (React Bits example)
07:50linkFigma homepage (Rive example)
Lines you could clip.
00:14
“Every single one came from three websites.”
00:45
“The AI cannot replicate those type of components by themselves, at least not yet.”
03:28
“If you just have a bunch of random assets generated by AI but it's not consistent, then your website will look like shit.”
08:00
“I don't think Claude will be able to create something like this without the skill, honestly.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphor
00:00You've probably seen websites like this and wondered how they are even made. Three d scroll effects, premium components, liquid glass effects, data visualizations, shaders, animation that look like they cost $10.
00:11Every single one came from three websites. If you write code, you've probably assumed that this take years of design skills you don't have, but it doesn't. Copy the components you like, paste the code in your AI editor, done.
00:24In this video, I will show you eight websites where you can grab all of these for free plus real examples from famous websites. So you can drop them into your project without the copy paste AI look. Okay.
00:36So first tool on the list is called Coconut UI. If you click on browse components, you can see the list of all the available designs that you can just copy and paste into your products.
00:47So what I love about this website is that the quality of the components are really really insane. As you can see, the attention to detail is really really huge. Each component is animated.
00:59If we refresh, we can see this nice appear animation, and this is clearly the type of component that will really make a big difference in your products and that will completely remove the AI slop because we can see that the designer has spent a lot of time creating those, and the AI cannot replicate those type of components by themselves at least yet.
01:19One of my favorite one is this liquid glass card components because the liquid glass is now everywhere in a lot of products because in 2026, Apple introduced the liquid glass effect, so it's now really trendy, and people use it a lot in their products. This is the type of effect we want to achieve like that. This is the glass effect.
01:39And you can actually push it further and ask the AI to learn how this component was created and to maybe create another component following the same style. As you will already have the strong foundations of this design, you can be creative with it.
01:56Next on the list is called React beats and is really useful especially because most of our products and website right now are built on what we called React. And the best part is that the AI really knows how to write code in this technology so you can smoothly implement some components like for example if we go to showcase we can see some of the designs created this is the type of results that we can get.
02:21Fully interactive and the best part is that as it's fully coded, it will not take a lot of time to load up because, yeah, it's not like a video or an image.
02:31So this website will give you a 130 plus components which is a lot, but also a visual editor if you don't like to edit right inside the ClotCode. You can see in real time how your component will look like and it's also AR ready as you can see so you can smoothly deliver it to cursor, ClotCode, Codecs or whatever and it will implement the components in your products.
02:54And for example, if we take a look at Stripe, they have actually this animated background over here and I can tell you that this was made in React. So this is the type of effect that you can get thanks to React bits.
03:09Next on the list is called the Bucklet. Bleaklet, I don't know how to pronounce it, UI. And this one is very very useful especially if you like to build dashboards or products that needs to have data visualizations.
03:22If you go to components, you can see that we have a large list of available components. Most of it is charts. So if you want to build, for example, an analytics tool, this can be extremely useful Or this high level graph.
03:37I mean, look at the details. It's really, really insane. Or even this one if you wanna showcase a funnel, even a heat map charts, line chart over here.
03:47I mean, you literally have everything you need in order to create your own analytics dashboard. So if you run any type of company and you want to have a dedicated dashboard where you can see all the analytics of your business in one place, I think this library is the best one that you can get.
04:04And yeah it's also free to use you can just open it in v zero and then ask ClotCode or Codex to deploy it in your products. So I definitely recommend you to check it out. Next on the list, have my own tool which is called Lemura.
04:20Let me log in to show you how it works. Essentially, it's very simple. First of all, you have to create a project and to upload your brand kit.
04:27To make things easier, you can just enter the website URL of your products and it will extract for you all the brand colors typography and the brand voice automatically. And then if you go to generate assets you can choose the asset that you want for example a background image you can tweak the settings over here change the visual style depending on what you want.
04:49Add a custom prompt if you have any, click on generate and then it will create the hero image for you. So the best part is that Limora is made only for designers so we have a list of 14 assets made for design projects if you want to build a website, an application, a mobile app.
05:06We even have like OG images, generations, and all the assets that you will generate are gonna be fully on brand. You can see it over here for some icons I've generated for projects.
05:16We all the time have the same colors which is great because if you just have a bunch of random assets generated by AI but it's not consistent then . So as it's my product, of course, recommend I you to use Limora, but at least you can give it a try by clicking the link in the description and you have your first asset generated for completely free.
05:40Next on the list is called anime.js and I'm just going to scroll through the website to show you the capabilities of this incredible model.
05:51This is for example really used in this website which has won the awards trophy And this one, think it was the website of the year. But I mean, if you take a look at the website, you can understand why it's really really crazy. And apparently, thanks to this tool, you can generate the same scrolling effect animations.
06:13So yeah it's just one command to install it. You have to copy the commands, paste it in your terminal and this will teach Cloud how to create animations just like this.
06:24Next on the list, we have motion. Dev and this one is very very useful again if you like animations on your website, who doesn't? And if you go to if you go to AI kits, you can see that they have this new page where they can make your AI agents motion experts.
06:41I'm just going to show you some recent examples of what has been created thanks to the skill because you'll see that it's pretty impressive. For example, this website footer was created thanks to motion.dev.
06:55As you can see, it's really really unique. I've never seen something like this before, but it looks very great. Or even this website as you can see was created thanks to motion.dev, and I don't think that Claude will be able to create something like this without the skill honestly.
07:10So yeah definitely another one to try and let me know what you think about it in the comments. Next on the list is called Rive. So this one is a bit more complex because I don't think it has an AI integration.
07:24So you have to learn a bit how to use the tool. They have like an interface like Figma, but they actually have this Learn Rive section where you have a bunch of resources in order to learn how to use Rive.
07:39And if you are already familiar with Figma, Canva or any other design tools, I think this one can be pretty easy for you. And this is the type of result that you can have.
07:50For example, Figma is using it on their homepage. So all of that is animated thanks to Rive. I think it's definitely worth it to add Rive to your skill sets because it will allow you to charge way higher prices.
08:03If you're able to generate those type of animations for your client projects is gonna be a huge one. And I want to finish on Magic UI because it's probably one of the most well known sites where you can find components to use in your projects.
08:20And it's the same workflow as Coconut UI. You just have to copy the code which will appear over here and then just ask Claude to implement it in your website or application. They, for example, have this glob components that I see all the time on design projects.
08:38So this one can be an interesting one if it's placed correctly, of course. For example, in a bento grid where you talk about having your product available in different languages, this is the type of component that you can add that would really level up the design.
08:54So again, a very good one to take a look at and I even see that they now have an MCP which makes things even easier because now you just have, like, one command to run instead of going manually through the components and saying, for example, I want to use this glob components in the feature feature section and to use the tweet card at the end of my website, Claude will take the decision for you.
09:18It will select the best components and include it on your website or application for you. So if you don't have any design knowledge or design skills, this might be a great option.
09:29Alright, guys. This is it. The complete list that will help you level up your website or applications as a Vibe Producer.
09:36If you want to have more videos of this style, let me know in the comments. I will be more than happy to to create it. And I've also created a document where you can find the list of the all the website links that I've showcased in this video.
09:50Click the second link in the video description. Thank you for watching. And if you want to learn more about my entire workflow when vibe coding applications or websites, click this video over here.
How they asked for the click.
VERBAL ASK
04:16product
“Next on the list, have my own tool which is called Limora... at least you can give it a try by clicking the link in the description and you have your first asset generated for completely free.”
Soft, embedded mid-list pitch for the host's own product — framed as tool #4 rather than a separate ad break, with an honest self-aware aside ('as it's my product, of course I recommend it').
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
