Video of the Day20:40Ras Mic · Tutorial
My Complete Codex Agentic Engineering Workflow
Ras Mic walks through the seven habits, plugins to slash commands, that turn OpenAI's Codex from a prompt box into a full agentic coding workflow.
August 14thThe argument in one line.
Users judge apps entirely by their visual design and polish, so using copy-paste component libraries like Kokonut UI, Cult UI, and Motion Primitives eliminates any excuse for shipping aesthetically mediocre web applications.
Read if. Skip if.
READ IF YOU ARE…
- A developer building web apps who wants to ship polished UIs quickly without designing custom components from scratch.
- A founder or solo builder who lacks design skills or budget for a designer and needs production-ready component libraries.
- Someone building AI-powered applications who wants pre-built components optimized for chat interfaces, loading states, and voice inputs.
SKIP IF…
- You're building a highly customized or branded product where off-the-shelf components won't fit your design system.
- You're working with a framework or tech stack not supported by these libraries—the video doesn't cover framework compatibility or installation prerequisites.
The full version, fast.
Modern users judge an app by its surface, so shipping ugly UI is no longer defensible when copy-paste component libraries solve the polish problem in minutes. The video walks through four sources of production-ready building blocks: Kokonut UI for distinctive components like liquid-glass players, Apple-style activity rings, and AI input states; Cult UI for Family-inspired drawers, browser-window mockups, and hover video players; Motion Primitives for animated numbers, magnetic buttons, morphing dialogs, and dock interactions; and promptkit.com for AI-specific pieces like chain-of-thought displays and chat containers. Each component installs via a single CLI command or direct code copy. The practical conclusion is to treat these libraries as a default starting layer rather than rebuilding common interactions from scratch.
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:33
01 · Hook — the cover lie
Inverts 'don't judge a book by its cover' to argue users always judge apps visually. Sets up the 4-library premise.
00:33 – 02:43
02 · Library 1 — Kokonut UI
Niche/distinctive component library. Demos: Liquid Glass music player, Apple Activity Card, Bento Grid, Card Flip, Stack of Cards, Currency Transfer, AI State Loading, AI Voice, text animations (typing, matrix, shimmer, swoosh, glitch).
02:43 – 03:17
03 · Library 2 — Style UI (coming soon)
Ras Mic's own blocks-and-templates library. Waitlist at styleui.dev. Self-promotional but low-pressure — just a waitlist mention.
03:17 – 05:18
04 · Library 3 — Cult UI
Inspired by the Family crypto wallet app. Demos: FamilyDrawer (smooth animated sheet drawers), FamilyButton, ExpandableScreen (fullscreen waitlist modal), BrowserWindow (Chrome/Safari mockup with controls), 3D Image Carousel, Hover Video Player, ShiftCard.
05:18 – 08:22
05 · Library 4 — Motion Primitives
Animation-first UI kit (Framer Motion + Tailwind CSS). Demos: Animated Number, Sliding Number, Toolbar Dynamic/Expandable, Dock (macOS-style magnification), Glow Effect, Image Comparison (drag/hover/spring variants), Scroll Progress bar, Magnetic Button, Morphing Dialog, Morphing Popover. Bonus: promptkit.com for AI building blocks.
08:22 – 08:55
06 · CTA + outro
Subscribe push, Style UI waitlist reminder, sign-off.
Lines worth screenshotting.
- Users judge web apps by their cover — visual quality directly affects whether users return, which makes component library selection a business decision, not just an aesthetic one.
- Kokonut UI specializes in unique, hard-to-build components like Apple activity rings, liquid glass music players, and currency transfer animations that general libraries don't include.
- Motion Primitives focuses on animation quality — animated numbers, sliding numbers, dynamic toolbars, and dock components that feel native rather than CSS-transition-cheap.
- Cult UI's Family drawer component ports the smoothest mobile app animation pattern into the web — the one from the crypto wallet app widely considered the best-designed app ever built.
- A browser window mockup component that renders Chrome, Safari, or generic styles with a configurable URL bar is the correct tool for showing before/after product comparisons.
- The expandable screen component — a button that expands into a full-page modal — is a ready-made waitlist capture experience that would take hours to build from scratch.
- Copy-paste-ready component libraries eliminate the excuse for shipping ugly apps when the engineering time for a polished interface is now near-zero.
- NPX or BunX install commands combined with V0 integration means a component can go from discovery to production in under five minutes for developers already in the Next.js ecosystem.
- Hover video players, shift-card reveals, and three-dimensional carousels are all animation patterns that users notice subconsciously but that signal professional quality without being explicitly evaluated.
- The combination of Kokonut UI (unique), Cult UI (motion), and Motion Primitives (animation) covers the three layers of visual differentiation that most apps need.
- AI-specific components — chat loading states, voice input indicators, tool-calling progress — are already included in Kokonut UI, making it the right starting point for AI product interfaces.
- Syntax highlighting can be added to any component library's code preview using AI in under a minute — the absence of it in the demo should not deter adoption of an otherwise strong library.
Four Copy-Paste Component Libraries Eliminate Every Excuse for Shipping an Ugly Web App
UI component libraries
Ras Mic's browser tour of four component libraries shows that polished UI is now a copy-paste decision — the bottleneck is knowing which library has the component you need, not the ability to build it.
01Hook — the cover lie
- Users judge apps by their visual presentation — this is a conversion and retention fact, not an aesthetic preference
- The 'don't judge a book by its cover' inversion is the hook: when it comes to apps, users absolutely do
02Library 1 — Kokonut UI
- Distinctive niche components: liquid glass music player, Apple activity card, bento grid, card flip, stack of cards, currency transfer, AI voice visualizer
- Text animation effects (typing, matrix, shimmer, swoosh, glitch) fill the gap between static and fully animated UI without custom animation code
04Library 3 — Cult UI
- Inspired by a high-end crypto wallet app — the source explains the interaction quality: drawer sheets, expandable modals, browser window mockups, 3D carousels
- The FamilyButton and FamilyDrawer components are the highest-value picks for apps that need smooth sheet-based navigation
05Library 4 — Motion Primitives
- Animation-first with Framer Motion and Tailwind — animated numbers, sliding numbers, expandable toolbar, macOS dock magnification, glow effects, image comparison sliders
- Morphing Dialog and Morphing Popover are the standout components for apps that need state transitions that feel designed rather than functional
Terms worth knowing.
- component library
- A pre-built collection of reusable UI elements — buttons, cards, modals, carousels, and more — that developers can drop into a web project to avoid building common interface pieces from scratch, saving time and ensuring visual consistency.
- copy-paste component
- A UI component distributed as raw source code that developers can paste directly into their project rather than installing a third-party package — giving full ownership of the code with no external dependency to maintain.
- NPX command
- A command-line instruction using the Node.js package runner (npx) that installs and executes a package in a single step — commonly used to add component libraries to a project without permanently installing the package globally.
- bento grid
- A web layout pattern that arranges content in an asymmetric grid of varying-sized cards — popularized by Apple's product pages — used on marketing and portfolio sites to display multiple features or highlights in a visually dynamic, magazine-style arrangement.
- motion primitives
- Low-level, reusable animation building blocks for web interfaces — individual animated behaviors like sliding numbers, magnetic buttons, morphing dialogs, and spring-physics transitions — that developers compose together to create polished, fluid user experiences.
- family drawer
- A bottom-sheet drawer UI pattern popularized by the Family crypto wallet app — characterized by smooth spring-physics animations and fluid open/close transitions — adapted here for web browser use.
- chain of thought component
- A UI element designed for AI applications that visually displays the intermediate reasoning steps a language model produces while processing a request — giving users transparency into how the model reached its answer.
- haptic feedback
- Subtle vibration or tactile pulses produced by a device in response to user interaction — used in mobile apps to reinforce taps, swipes, and confirmations with a physical sensation that makes the interface feel more responsive and premium.
- v0 (Vercel)
- An AI-powered UI generation tool by Vercel that produces ready-to-use React components from a text prompt — allowing developers to generate and preview interface designs before copying the code into their project.
Things they pointed at.
03:17productFamily (crypto wallet app)
Lines you could clip.
00:08
“When it comes to web and mobile apps, we are 100% judging the book by its cover.”
08:28
“You have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below.”
01:26
“There are the general component libraries that have all the components. There are the blocks templates component libraries, and then there's the unique component libraries. And this is one of those.”
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.
analogystory
I'm sure you've heard of the age old saying, do not judge a book by its cover. But unfortunately, when it comes to web and mobile apps, we are 100% judging the book by its cover.
That's why in today's video, I'm gonna be showing you four component libraries that you can use to build sleek, beautiful applications that your users will love and will return and will want to use continuously. Because remember, they're going to judge the book by the cover, so why not make the cover beautiful.
Sit back, relax, let's get into it. First UI library is Coconut UI.
This is a collection of stunning components and I will say this is one of those component libraries that has the unique ones. Right? They're like the general component libraries that have all the components.
There are the blocks templates component libraries, and then there's the unique component component libraries. And this is one of those. For example, you have the slide text button, which I really like.
Right? I slide and it says click to see more. And then you have this liquid glass music player.
Right? You can drop this in using their NPX command or BunX command or you can open this in v zero or straight up just copy the code. They also have the Apple activity card.
Right? The activity rings. If you're on the Apple watch or use the health app, you'll know this component.
And this is a pretty hard one to build. Right? So you can build on top of this component, change it up.
Again, NPX command or you can copy the code. Uh, Coconut UI also has beautiful bento grids, a nice bento grid on your homepage. It just does something, man.
So you can see these nice little animations over here. I can see the code, although it'd be nice if there was, um, like highlighting, uh, syntax highlighting, which I'm sure you can add yourself using AI. And then we have card flip, animates beautifully, card looks sleek.
Oh, this is a good one. Uh, the stack of cards. You click and the the card split.
You click and then it goes back in the order it was. And then you have this component. Say you're building something to do with currency transfers.
Right? You just saw that animation right there. Super sleek and clean.
Coconut UI also has some AI specific components like an input selector, uh, search. You have here, like, let's say you have some tool calling happening.
You wanna have some loading state in the chat. You can use this. Um, you can use this as well.
And then they have an AI voice component. Um, eleven Labs also has something similar like this, so you can pick and choose. And you have a couple text animations here, one with scroll, typing, matrix, dynamic, the glitch effect, shimmer, slice text, swoosh.
And then last but not least, you have this profile drop down from all the components that I like. There's plenty more here. Check it out yourself.
The link is in the description, Coconut UI. Now second up, we have style UI. It says create beautiful UI with our blocks and templates, but this one is coming soon.
Someone very handsome that you may have seen before, I'll put his picture right here, is working on this with his team. Expect blocks and templates.
They're going to be super clean and super fresh, and I can't wait for this person again to get them into your hands. But to be on the wait list to make sure you're alerted when these drop, make sure to go to styleui.dev and enter the wait list.
Make sure to follow me on x as well. That's where I'll be announcing it. I'm sure you're going to love these ones.
Next up, we have Cult UI. I don't really feel comfortable with the name, but there are a couple components that I found fresh here. The first one being the family drawer.
Now if you're not familiar with family, it's this crypto wallet app. But in my opinion, it's the most beautifully designed, beautifully architected app ever.
The animations to the haptic feedback to how the components look, it's an absolutely dream of an app. And one of the beautiful things they designed are these drawers that just smoothly animate, and Cult UI has brought these into the web.
I particularly like the open custom drawer one. That's a really good one. Again, you have the family button as well.
When you click that, this nicely animates. I really like this. You can definitely use this in your web apps.
Another cool one that I liked was the expandable screen. Say you have a waitlist page, you can click get early access, and it's like a model that takes over the entire page. User can fill it up, then close it, nicely animates back.
Now another one I really like is the browser window. This is a customizable browser window mock up component with support for Chrome, Safari, and generic style. So you can customize how this looks.
You can make this look like Safari, Chrome. You could specify the URL. You can choose to show the address bar.
We can make this super small or extra large if you want. You can have the sidebar be to the left, to the right, and there are these presets as well that you can select, but a really nice and sleek component, definitely something you should add on your web apps. Obviously, if it makes sense.
This three d carousel of images is pretty cool. And again, just to set this up, all you do is copy the command and if you're building on chat scene, which I'm sure you are, you can have this set up easily. And then they have a hover video player where you see the component, I can hover over this and now it becomes a video player.
This is pretty sleek. I actually like this. I don't like the default video player with HTML, uh, the video tag, so this is a pretty sleek component.
And then you have the shift card component where if you hover over, you see the image shift to the right, and then this pop up slide beautifully. Again, there are plenty of components in Cult UI. I'll have the link down in the description below.
Check it out for yourself. And then we have motion primitives. UI kit to make beautiful animated interfaces faster.
So there's an emphasis on beautiful motion and animation with motion primitives. For example, let's say the animated number.
If you want to animate some GitHub stars that you wanna show off on your page or some dollar dollar bills, this is a great component for you to have. You have then the sliding number. This is just beautiful stuff.
Again, all the code is right there for you. We also have the dynamic toolbar where if I click on this, you notice how it nicely shifts. Let's click on expandable.
If I click on this, you see it expands from bottom to top. This, again, you can have a nice little toolbar or like even a dock using this component. What we're going to do is we're going to click on components on the top right, and then we're going to click on dock.
I really like the dock component. You can style this with whatever icons you want, but that nice animation as you hover over it is beautiful. You have this glow effect right here.
You can have it on buttons. But also what I like is let watch this. When I click submit, the component glows.
Right? So this is something you could do with some sort of submission. And then you have this, like you can use this as, a before and after, or you can use this as a, like, a slider to show, like, if you use my tool, this is what it looks like.
If you don't, this is what it looks like. Really sleek and simple. You can also have it on hover.
So this is where I clicked on the, like, the line, the separator, and I'm dragging it. This one, I just hover, and then I when I go left and right, it follows.
This one sorta has a spring motion where, like, notice how it's bouncy, like, it catches up. And then you can also have a custom slider with this. You can have a progress bar.
Right? That's on the nav bar. That's on the top.
So that'll show people how much progress they've made in reading an article or going through a page. They also have this magnetic button where, like, if I hover over it, it you notice how it sort of follows my cursor. Um, there's also where you can see the text is more so floating in the button.
Like, these little things are just so immaculate and beautiful, and they just enhance the user experience of your applications. Oh, this is a morphing dialogue. So notice how, like, let's say this is like a notification that pops up.
I can click on it and and that dialogue just animates beautifully. You can have that with images as well. You can have this with cards as well.
And then you have a morphing pop over. Let's say you are, like, editing some settings, a profile setting, whatever it is, you can have it just pop up there, click submit, and then it closes back. Here, it's telling you you can customize the transitions however you want.
You can have a text area pop up. There are just a lot of these primitives that you can find with motion primitives that I find super useful when developing web apps. And then I noticed when I clicked on IA, promptkit.com popped up, and this is for AI applications.
So if you're building an AI app, they have building blocks for you to use. Like, for example, their chain of thought component where you can show how the model is processing the information. You have a chat container here.
You have code blocks. Again, I'll link all of this stuff in the description down below. All this stuff is copy paste for you to use.
So please, you have no excuse on having ugly looking web applications. You literally have all these component libraries linked in the description down below. And, I want to let you know I will be dropping my very own style ui.dev very soon.
Make sure to sign up for the wait list link in the descriptions down below. Thank you so much for watching this video. Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one.
Peace.
The Hook
The bait, then the rug-pull.
Every dev knows the cliché — don't judge a book by its cover. Ras Mic opens by killing it dead: your users will absolutely judge your app on sight, so the cover had better be beautiful. What follows is a fast, live-demo tour of four component libraries that make 'no excuse for ugly' the only reasonable position.
Named ideas worth stealing.
00:33list
Kokonut UI
- Liquid Glass music player
- Apple Activity Card
- Bento Grid
- Card Flip
- Stack of Cards
- Currency Transfer
- AI State Loading
- AI Voice
- Text animations (typing/matrix/shimmer/swoosh/glitch/slice/scroll)
Niche component library focusing on distinctive, hard-to-build-from-scratch components rather than generic form/layout kits.
Steal forany app that needs a wow-factor landing section or AI-specific UI state indicators
03:17list
Cult UI
- FamilyDrawer
- FamilyButton
- ExpandableScreen
- BrowserWindow
- 3D Carousel
- Hover Video Player
- ShiftCard
Web port of UI patterns from the Family crypto wallet app — the gold standard of mobile app design aesthetics brought to web.
Steal forwaitlist pages, product demos, SaaS dashboards needing premium mobile-app-grade feel
05:18list
Motion Primitives
- Animated Number
- Sliding Number
- Toolbar Dynamic/Expandable
- Dock
- Glow Effect
- Image Comparison
- Scroll Progress
- Magnetic Button
- Morphing Dialog
- Morphing Popover
Animation-first kit built on Framer Motion + Tailwind. Every component prioritises motion quality — bouncy spring physics, morphing transitions, cursor magnetism.
Steal forany landing page that needs to feel alive — stats sections, social-proof numbers, feature comparison sliders
07:38list
promptkit.com
- Chain of Thought
- Chat Container
- Code Block
- Loader variants
AI-specific building blocks discovered inside Motion Primitives nav. Fills the gap for AI app UI patterns that generic component kits don't address.
Steal forany AI-powered feature — loading states, chain-of-thought UX, chat interfaces
How they asked for the click.
VERBAL ASK
08:28subscribe
“Make sure to like, comment, subscribe, hit that notification bell, and I'll see you in the next one. Peace.”
Standard YouTube outro. Also includes a soft Style UI waitlist push at t=163 mid-video and a repeat at t=520.
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.
