00:00:00How do you know which design tools are actually worth using when a new one drops every week?
00:00:04The problem is, there are new tools being released every day, all promising quality, but most of them are just hype.
00:00:09During our testing of tools, we found out a few that actually delivers what they promise and fit well in our workflow.
00:00:15One of our team members was working on a product landing page for a car with a 3D animation in the hero section.
00:00:21The source code to this website and all the features used are available in AI Labs Pro.
00:00:25For those who don't know, it's our recently launched community where you get ready to use templates, prompts, all the commands and skills that you can plug directly into your projects for this video and all previous ones.
00:00:36If you've found value in what we do and want to support the channel, this is the best way to do it. Links in the description.
00:00:42So the first step to building a website like this is having a good asset and for that I used Tripo3D, the AI powered 3D object generator.
00:00:50When I signed in, I got around 300 credits, which was more than enough for around 10 generations.
00:00:54Now I needed an image to convert to 3D.
00:00:57I had an image of the car for the hero section, but the background interfered with the model generation because background and foreground identification is hard for tools like this, and I didn't want to waste credits on a bad output.
00:01:08So I removed the background using the background remover tool from Canva, but you can also use Remove BG, which is a free alternative.
00:01:16Once the background was removed, I went to Tripo3D and gave it that image as a reference.
00:01:21It took around 1 minute to generate the model and it matched the image to a great extent.
00:01:25I was able to check all the views from every angle, and the model consistently resembled the object from all sides.
00:01:31Once the 3D model was ready, I exported it.
00:01:34On Tripo3D, you only get 15 exports on the free plan, so I made sure I was satisfied with the generation and out of two attempts, downloaded the one that worked best.
00:01:43I set the resolution to 4K and exported it.
00:01:45Once the GLB file was downloaded, I added it to the public directory of a newly initialized Next.js app, so it could be accessed easily.
00:01:52The reason for exporting as GLB instead of other formats is because GLB contains textures and materials in a single file instead of having them separately, and it's a native web format, so it integrates easily with web libraries.
00:02:04Once the GLB file was ready, it was time to implement it in the web app.
00:02:08For building the landing page, I chose the Codex app, which was recently released and is only available on macOS.
00:02:14Now you might be thinking, even though we already have Claude code, why are we using Codex in this video?
00:02:19With the launch of their new product, they're offering extended limits and a generous quota even on free plans, so right now is actually the best time for you guys to make the most out of it.
00:02:29But you can use the same process in any agent of your choice.
00:02:32I downloaded Codex and opened the project folder in it.
00:02:34The interface is similar to AntiGravity's agent manager to a great extent, but more focused on agents rather than code.
00:02:40The skills feature was the part we liked the most.
00:02:43In other agents, whenever you need to create your own skill, you have to get an open-source skill creator and build it from there.
00:02:49But Codex already has a skill creator built in and a lot of common ready-to-use skills that come with installation, and that wasn't available in other agents.
00:02:56To simplify the 3D animation process, I used the skill creator and provided a detailed description of how it should construct the animation, along with the libraries it should use.
00:03:06It asked a few questions, and once those were answered, it ran the scripts contained in the skill creator, built the skill, and made it ready to use.
00:03:13Now there was one thing that was different.
00:03:14Normally, agents install skills in their .agent or .claud folder, but Codex installed it in the root folder, so I moved it to the .agent folder manually.
00:03:24But it did follow the same pattern as the open-source agent framework laid out by Claude, containing scripts, references, and all the assets for adding capabilities to the skill.
00:03:33It also included a yaml file with the generic prompt that acts as a reference for the agent to know what user prompts will trigger the skill.
00:03:40I gave Codex the task of setting up the animations using the skill that was just created, including all the required details in the prompt.
00:03:47It started the implementation and ran the install commands.
00:03:49After a considerable amount of time, it completed the task, but it said it couldn't install the dependencies because of a timeout on the command in the environment, so I asked it to write the dependencies into the package .json instead.
00:04:01When I ran the install command manually, I got errors because of dependency mismatches because of different versions of libraries in the project.
00:04:08I had to debug it with Codex multiple times until the animation on the hero section was finally working the way I wanted.
00:04:14Now Codex was taking a lot of time to complete individual features, so I broke the tasks down into four subtasks.
00:04:21Each task contained one feature of the landing page and was isolated from the others and contained the objectives, requirements, and constraints.
00:04:28I used the multi-agent feature of Codex and had each agent work on one of the tasks.
00:04:32Since all of them were working on the same landing page, I had them work in separate work trees instead of all making changes on the main branch, because agents working on the same section causes conflicts in the code.
00:04:43Almost all of the agents finished their tasks in a similar timeframe.
00:04:46I merged the outputs and got all of the features implemented together without any conflicts, but significantly faster given how slow Codex was on its own.
00:04:55Now that the website was ready and had the required components, everything except the hero section didn't have any animations and looked flat, so I turned to gsap for that.
00:05:03gsap is the javascript animation library used by a lot of professionals and it delivers consistent performance.
00:05:09Since the dependencies were conflicting earlier and I got that timeout error, I went to the terminal and installed gsap ahead of the implementation using the npm install command.
00:05:18I gave Codex a highly detailed prompt containing instructions for adding animations and specifically told it not to touch the hero section since it was already in a good state.
00:05:27I added specific instructions on how and where to add animations. It took a long time to perform this task.
00:05:33There were a few minor errors which I reiterated by giving the error message back to Codex.
00:05:37After that, the animations were implemented and the hero section stayed exactly as it was.
00:05:42But scroll triggered animations were added to all other sections and that made a noticeable difference in how the site felt overall.
00:05:48Now even though the website had animations, the components still looked flat compared to the hero section.
00:05:54So I went to Aseternity UI and chose components from there because Aseternity components come with a lot of built-in micro interactions and animations that are ready to plug into a project.
00:06:04I went to Codex and asked it to replace the existing components with Aseternity's while keeping the animations the same.
00:06:10After the implementation, I noticed it had added gradients that didn't match the app's theme.
00:06:14So I gave it a screenshot and pointed out that the gradients were going against the existing theme and after that it switched them to colors that matched.
00:06:21But when I looked at the animations, the components it had implemented were static and didn't have the micro interactions that Aseternity components normally come with.
00:06:30So I told Codex that there are Aseternity components with built-in micro interactions like tilt-on-hover effects and asked it to use those instead of the plain ones.
00:06:38After that, the components had hover-tilt and interaction effects built-in and the site felt noticeably more interactive.
00:06:44To further improve the visuals, I used a public repository called post-processing which is available as an NPM package.
00:06:51It's a post-processing animation layer that gets applied after effects when using React 3 fiber.
00:06:56Through this, we can use image processing features like gamma correction and other refinements for high-performance results.
00:07:01I gave Codex a prompt to use this library to create subtle lighting effects and asked it to guide me through the process.
00:07:07It didn't get it right at first and there was no visible difference in the output.
00:07:11I had to debug it multiple times by prompting it again until it finally got the effect right and added a subtle glow to the 3D model and that gave the whole section a more finished look with warm lightning on the hero section.
00:07:23That brings us to the end of this video.
00:07:25If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below.
00:07:31As always, thank you for watching and I'll see you in the next one.