Antigravity X Google Flow - Full Process for Design Beautiful Animated Websites with AI — Transcript

Full transcript

1. 0:00In this video, you will learn how you
2. 0:01can create websites like these with AI.
3. 0:03We'll be using Anti-Gravity plus Nano
4. 0:06Banana plus animating all of these
5. 0:08images and creating all of this video
6. 0:10with AI. So, by the end of this, you
7. 0:12will know how to go from just a design
8. 0:15to the actual images and then to
9. 0:17animating those images with AI and then
10. 0:20how to actually build that with
11. 0:21Anti-Gravity. I'm going to show you the
12. 0:23full process to creating beautiful
13. 0:25websites from scratch and then we'll be
14. 0:27publishing that. So, I am a AI designer.
15. 0:31I've been doing this for more than 10
16. 0:32years and I've been creating the AI
17. 0:34websites on my platform Design Rocket.
18. 0:37You can see a lot of different AI
19. 0:39websites here that you can have access
20. 0:41to if you go to this link. You can also
21. 0:43have access to the full course on on AI
22. 0:45websites in the link down description.
23. 0:48But now, without further ado, let's get
24. 0:49into the video. I'll teach you full
25. 0:51process that I used to build this sites
26. 0:53with Anti-Gravity. This is the tool that
27. 0:56I start using recently and I created
28. 0:59this website that I'll share with you in
29. 1:01a moment. If I go to this link, you can
30. 1:04see that it's in a local host. I can
31. 1:06open in Google Chrome.
32. 1:09And this is the website that I've
33. 1:11created with all of the animations, with
34. 1:13the images that I generated with AI, as
35. 1:16well as this animation in the
36. 1:17background. Scrolling down, we have this
37. 1:19animation in the second section.
38. 1:21Scrolling down, we have this beautiful
39. 1:22looped animation, which is all
40. 1:26responsive for mobile. If I go to
41. 1:28inspect, you will learn and you will
42. 1:30know how you can build that with AI in a
43. 1:32few minutes. You'll You'll I'll show you
44. 1:34the whole process with the animating,
45. 1:36with the generating videos for this
46. 1:38website, with creating the images
47. 1:41themselves. So, let's start by actually
48. 1:43getting our inspiration for our website
49. 1:46and we're going to be building website
50. 1:48for AI web design agency since this is
51. 1:51just a trend right now. And for the
52. 1:53first draft, we're going to use AI
53. 1:55Google Studio. You can just type that in
54. 1:57the Google this is from Google similar
55. 1:59to anti-gravity but this is better at
56. 2:01the front end. Once we have the front
57. 2:03end here, we can just download the code
58. 2:05and start adding all of our assets with
59. 2:08anti-gravity because you can just drag
60. 2:11and drop into a folder there. So let's
61. 2:13start by describing what you wanted to
62. 2:15build. Click on this build icon icon
63. 2:17here and now we can display and describe
64. 2:20everything we wanted to build. So let's
65. 2:22just describe what we're building which
66. 2:24is
67. 2:25I need a website for AI web design
68. 2:27agency. This will just be a website that
69. 2:30talks about our agency services, how we
70. 2:32build websites using AI and stuff like
71. 2:34that. The main headline can be new era
72. 2:37and
73. 2:38yeah, so that's it. Let's have our text
74. 2:40here and let's just look for
75. 2:42inspirations because this is definitely
76. 2:44not enough to get a great result ready.
77. 2:46So I'm on Dribbble here and I click
78. 2:48popular and there is a lot of different
79. 2:50websites that I can choose as
80. 2:52inspiration and let's take a screenshot
81. 2:54of what graphics we're going to be
82. 2:56using. So let's look at this image and
83. 2:59let's just try generating something like
84. 3:01this for our website. I really like this
85. 3:04kind of rock type of thing. So let's
86. 3:07take a screenshot of this and let's go
87. 3:09to our images here and I'm going to go
88. 3:12here and I'm going to say
89. 3:15I'm going to say generate an image like
90. 3:17this for me without text just similar
91. 3:19image. Let's click generate. I'm going
92. 3:21to also create it with Nano Banana Pro.
93. 3:23I don't know which version will do
94. 3:24better so I'm going to create with a few
95. 3:26different ones and let's click generate.
96. 3:30This by the way I'm not affiliated with
97. 3:32this website in any way.
98. 3:34Uh you can use Nano Banana. Just go to
99. 3:36Nano Banana image generation
100. 3:40and you can have the same or just use
101. 3:41GPT original images. Let's see what it
102. 3:44comes back with.
103. 3:45This is the initial resources that we've
104. 3:47got. As you can see it looks pretty
105. 3:49cool. Let's now find something for our
106. 3:52design inspiration. I don't want to use
107. 3:54the same design. I want to try something
108. 3:55different for the headline and for the
109. 3:57content. So, let's find something like
110. 3:59this and let's just take a screenshot of
111. 4:02this.
112. 4:04And I'm going to go to Anti-Gravity here
113. 4:06to Google Studio and I'm going to say
114. 4:08just build just build the hero section
115. 4:12for now.
116. 4:13And I'm going to say use the background
117. 4:15color to be pure black, so hashtag 000.
118. 4:20Do not add any images from the
119. 4:21screenshot. Use the screenshot just as
120. 4:23an inspiration for the content
121. 4:25positioning and
122. 4:28replace that with our content.
123. 4:32So, once we have that, we can just send
124. 4:34that and see what it comes back with as
125. 4:36a first draft result. We can use the
126. 4:38flash version for cheap and quick
127. 4:40results. So, let's wait and see what it
128. 4:41comes back with.
129. 4:43Here is the first result that we got.
130. 4:45Let's keep building and then we can just
131. 4:48add changes as we go. So, for the second
132. 4:50section, I'm just going to scroll down
133. 4:53and see what other designs that I like.
134. 4:55Nothing special needed.
135. 4:57Just something that I like. Can be
136. 4:59something as simple as the text blocks.
137. 5:02So, let's zoom in here and let's say
138. 5:05let's take a screenshot and I'm going to
139. 5:07go to our website. I'm going to say
140. 5:11for the second section, let's talk a
141. 5:13little bit more about the company. So,
142. 5:15add a block of description and so you
143. 5:18know, way maybe something like this in
144. 5:19the screenshot. Also, replace all the
145. 5:22yellow colors with white. We're going to
146. 5:24have just white and black website and
147. 5:27also remove the phone from the hero
148. 5:29section and all the gradients. We don't
149. 5:31want to have any
150. 5:33not necessary elements. Just keep the
151. 5:35background pure black and we'll update
152. 5:37the background with images and videos.
153. 5:40We're going to be generating videos
154. 5:41later. No need for now.
155. 5:44So, let's just send that and see what it
156. 5:46comes back with as part of the second
157. 5:48section.
158. 5:49And this is what we've got and now let's
159. 5:51add the third section and then we can
160. 5:53start adding our videos and images to
161. 5:56our website. So for the third section
162. 5:58exactly the same logic. I'm just looking
163. 6:00for some inspiration and for that let's
164. 6:02go to landbook. Maybe we can find some
165. 6:04real example of a real website here that
166. 6:06we can add to our website. So I'm just
167. 6:09scrolling here and seeing different
168. 6:11stuff that I might like. Let's just
169. 6:12click on this and uh
170. 6:15This looks pretty cool. So let's say we
171. 6:17wanted to add a section
172. 6:20like this.
173. 6:24Let's just take a screenshot of this.
174. 6:27And do not need to overthink it. We can
175. 6:30just go to our AI side. We're going to
176. 6:32just uh play upload the screenshot here
177. 6:34and I'm going to say "So the next
178. 6:36section will be similar to this design
179. 6:38but obviously it will be in our black
180. 6:40colors and for it should fit our
181. 6:44content. So for AI design web agency
182. 6:46just rewrite the text and make something
183. 6:48creative with the designs that you see
184. 6:50on this image."
185. 6:53So now that we have this, let's while it
186. 6:55creates let's start animating this image
187. 6:57that we have here. So let's I think this
188. 7:00the nano bananas option is the best one
189. 7:04since it has some shadows here but maybe
190. 7:06this one is good. We'll try both. So I'm
191. 7:08going to click animate here. Uh if
192. 7:10you're using chat GPT you can just
193. 7:12download it and go to your animation
194. 7:15tool of choice. It can be uh
195. 7:17clean 2.6. It can be grok. Whatever you
196. 7:20prefer. So I'm going to say animate this
197. 7:23and for better ideas on animation I'm
198. 7:25going to go to chat GPT and I'm going to
199. 7:27ask some ideas on how can I animate
200. 7:28this. I'm going to say
201. 7:30"Give me some nice ideas on how can I
202. 7:32animate this image to place on my
203. 7:34website. I'm going to be using clean AI
204. 7:36so give me some prompts that I can add."
205. 7:40And let's just paste the image here. So,
206. 7:43I'm going to copy the image.
207. 7:45And I'm going to upload it here. And
208. 7:47let's just send it and see maybe we can
209. 7:49get some nice ideas for our prompts. So,
210. 7:52let's start animating this. I'm going to
211. 7:54use Kling 3.0 and I'm going to use multi
212. 7:56shot. And here we have multiple prompts
213. 7:59that AI ChatGPT gave me. So, let's just
214. 8:03paste all of them here and see what it
215. 8:05comes back with. I'm going to try a few
216. 8:06different options for you guys to see
217. 8:08and be able to compare what kind of
218. 8:10results can you anticipate from Kling.
219. 8:14And uh
220. 8:15three
221. 8:17And let's just do this one.
222. 8:21I'm going to remove this.
223. 8:22We're going to use this and let's just
224. 8:24generate. I'm also going to use one
225. 8:26shot. And for the one shot, let's just
226. 8:29say animate this.
227. 8:31And maybe something like this.
228. 8:35Make it noticeable. Let's say this.
229. 8:38We're also going to add our end frame,
230. 8:41so it's a looping animation and we're
231. 8:43going to make it like I don't know, like
232. 8:457 seconds.
233. 8:47Let's just click animate.
234. 8:52And see what it comes back with.
235. 8:54So, the Kling one is processing long
236. 8:56time. I created one with
237. 8:59Google Flow, which is V03.1 fast. And
238. 9:02this is the result we got, which is
239. 9:04loop, which is not the best. I think
240. 9:06this would be better, but let's just
241. 9:08download this for our for just showcase
242. 9:11how you can do that. And let's just
243. 9:13download our code here.
244. 9:17So, here we have the result from our
245. 9:18Nova AI agency. We can easily download
246. 9:21the code and start adding all of our
247. 9:22assets, but let's add two more sections
248. 9:25and for that, let's just do this one as
249. 9:27a screenshot. So, we're going to take a
250. 9:29screenshot of this and we're going to go
251. 9:32to our Nova AI. So, this is the
252. 9:34screenshot just for me being able to
253. 9:36have a creative more outputs from AI.
254. 9:40The next section would have similar
255. 9:41designs to this. Do not copy the exact
256. 9:44text as well as always. When you are
257. 9:47text to be for our website for AI web
258. 9:49design agency, but just use it as
259. 9:51inspiration for content positioning and
260. 9:54stuff like that.
261. 9:57So, let's just send that and see what it
262. 9:59comes back with.
263. 10:01So, it added this section which is has a
264. 10:03lot of not necessary elements. Remove
265. 10:05all of the unnecessary elements like the
266. 10:07flickering shape in the background.
267. 10:10Also, remove the volume 24 text and the
268. 10:13picture of the above the visionary
269. 10:16legacy we mentioned and let's remove the
270. 10:19um not necessary lines.
271. 10:23Let's just send this and uh
272. 10:26And also, we are going to say
273. 10:29also add footer to this page. And let's
274. 10:31just find some footer that we like. And
275. 10:34for the footer, we can do the same. We
276. 10:35don't have to necessarily find an actual
277. 10:38footer. We're just going to say landing
278. 10:40pages here.
279. 10:42Going to find a landing page that we
280. 10:43like.
281. 10:46In dark colors, preferably.
282. 10:49Like this. We're going to screenshot
283. 10:51this and send it to our AI.
284. 10:58And see what it comes back with.
285. 11:00So, now we can just download our code.
286. 11:03Let's click download here. But before
287. 11:06that, let's actually try to add the
288. 11:08video in here.
289. 11:11So, for this, we're going to Or
290. 11:12actually, yeah, let's just download it.
291. 11:14And now we can open it in Ant Gravity.
292. 11:17So, I'm going to close the thing. I'm
293. 11:18going to open Ant Gravity here.
294. 11:21And I'm going to open the folder and
295. 11:23just
296. 11:24double click on it so I unzip it.
297. 11:32Let's click on it again, find it here.
298. 11:38So, once we have it in there, we can
299. 11:41just click on this.
300. 11:43We're going to open the folder.
301. 11:46And just drag it into our anti-gravity
302. 11:49thing, and I'm going to click open. And
303. 11:51just to add it to our local host, I'm
304. 11:54going to say add it to local host. Add
305. 11:56this to local host.
306. 12:00And let's just send it and see what it
307. 12:01comes back with. There's our website. It
308. 12:04added it to our local host. We now can
309. 12:06add all of our graphic edits and stuff
310. 12:08like that. So, let's do exactly that.
311. 12:12Once I'm here, I'm going to download
312. 12:13this video. And let's go to our
313. 12:16anti-gravity. And here in the components
314. 12:18tab, I could just create a new folder.
315. 12:22And I'm going to say
316. 12:24uh assets.
317. 12:27And I'm going to just drag it here.
318. 12:30I don't think this is actually the right
319. 12:31way to add because I'm not a developer,
320. 12:34but I'm just going to do it like this.
321. 12:38And once here, I'm just going to drag
322. 12:40it. And I'm going to say add this as a
323. 12:43background of
324. 12:45the hero section and
325. 12:47make it looping.
326. 12:51So, once we have that, we can just send
327. 12:53it and see what it comes back with.
328. 12:56So, here our hero section, and the video
329. 12:59actually got rendered from Click Clean
330. 13:013.0, I think. It kind of a little bit
331. 13:05better. It has more of the details, and
332. 13:08I like it more. So, let's just download
333. 13:09it, and I'm going to ask AI to replace
334. 13:12that. I'm also going to ask it to add a
335. 13:14scroll animation to our website. As you
336. 13:17can see, when I scroll down, we don't
337. 13:18really have any of the animations that I
338. 13:20wanted to have. So, first, we can add
339. 13:23animation of appearing of the text. And
340. 13:25let's do that. So, I'm going to go to
341. 13:27anti-gravity and I'm going to say
342. 13:29when scrolling down, let's have the
343. 13:31frame or motion animation of the text
344. 13:33animating in the second section about
345. 13:35us. So, animation of scroll tied to
346. 13:39appearing of the letters and also the
347. 13:41background video would be scrolling with
348. 13:45the scroll, so it will be sticky and it
349. 13:47will fade into the background
350. 13:49in second section. So, kind of
351. 13:51transition from the hero section into
352. 13:53the second section, but the opacity will
353. 13:55drop to 90% and would it would be barely
354. 13:58visible in the second section, if you
355. 13:59know what I mean.
356. 14:03So, let's just send that and see what it
357. 14:06comes back with.
358. 14:09Let's also generate more images like
359. 14:11these. So, the prompt is I'm going to
360. 14:13say generate an image like this, but it
361. 14:15has to be different shaped elements, no
362. 14:16text without text, just image similar.
363. 14:19And I'm going to use GPT Pro to generate
364. 14:21a few images to have on our website,
365. 14:23since we don't really want to have all
366. 14:25of the images the same. Let's go to our
367. 14:28anti-gravity and as you can see, it's
368. 14:29working through all of the animations
369. 14:31and it does everything by itself and it
370. 14:33creates our beautiful results. So, let's
371. 14:36wait and see what it comes back with.
372. 14:41As you can see, it's creating this
373. 14:43beautiful design.
374. 14:46It also generated this video. So, let's
375. 14:48download it and let's place it inside of
376. 14:50this section that we have here. So, as
377. 14:52you can see, there is some text that we
378. 14:55got. So, let's just copy that and I'm
379. 14:56going to
380. 14:59open our anti-gravity and I'm going to
381. 15:01say
382. 15:05let's just move it so I can see this nav
383. 15:07here.
384. 15:08In section discover our intelligent
385. 15:10design ecosystem, let's have instead of
386. 15:13the Nova architecture and some graph
387. 15:16there, let's have a video that I will
388. 15:18upload now.
389. 15:22So, once I'm here, I can just drag the
390. 15:24video inside of our components here.
391. 15:29Assets. Let's click on that and let's
392. 15:31have this video.
393. 15:34Let's make sure this is the right video.
394. 15:36Nope, not that one.
395. 15:40Oh, yeah, this one.
396. 15:45Yeah, this one. Let's have it
397. 15:48Let's open it like in a folder and let's
398. 15:52just drag it inside of our anti-gravity
399. 15:54assets component here.
400. 15:58And let's just add it here. And let's
401. 16:00just send that and see what it comes
402. 16:01back with. But so far, here's the
403. 16:03preview of our website. As you can see,
404. 16:05we have beautiful hero section with this
405. 16:06animation. Let's look at how it's going
406. 16:09to look like on the mobile. On the
407. 16:11mobile, we need to optimize it for
408. 16:13mobile. So, let's just take care of that
409. 16:15after we finish the hero section. And I
410. 16:18think this section can be very cool if
411. 16:20we add this video to the background, but
412. 16:22AI a little bit messed up it. So, we can
413. 16:25just give it opacity very little and
414. 16:28then we can add it to that section. So,
415. 16:30let's just download it.
416. 16:33And let's just have it in there. So,
417. 16:35let's just accept everything in
418. 16:37anti-gravity while it builds.
419. 16:41So, here it is added our beautiful video
420. 16:43to the background, which is changing and
421. 16:46we have the scroll animation here as
422. 16:47well. So, let's scroll down and see what
423. 16:49we can add to this section. And yeah, so
424. 16:52let's just copy the last video that we
425. 16:54got here, which is this one.
426. 16:57And I'm going to download this as well.
427. 17:00I'm going to go to the bottom of the
428. 17:01website and see what it is. So, new era
429. 17:04web experience research. We're going to
430. 17:07just paste it in here and I'm going to
431. 17:08say
432. 17:10in this section, which is the last
433. 17:11section but above footer, I'm going to
434. 17:14have this video as the background. It's
435. 17:16going to have just 30% of opacity and
436. 17:20it's going to be looping in the
437. 17:21background of this section. And it will
438. 17:23have a transition on the top so that
439. 17:26transition is not that sharp, but it's
440. 17:29with a gradient from the black into
441. 17:31transparent if you know what I mean.
442. 17:38And let's just grab our video that we
443. 17:40downloaded. Let's just upload this to
444. 17:42antigravity here and I'm going to just
445. 17:44track this video here.
446. 17:48And this is the result that we've got.
447. 17:50As you can see, it is looking absolutely
448. 17:53sick in terms of we have this beautiful
449. 17:55grid type layout here below the footer
450. 17:58and we have this animation here. And
451. 18:01yeah, so this is landing page that we
452. 18:02just created in with AI with Google
453. 18:05antigravity and Nano Banana and Google
454. 18:08Flow. Let me know what do you think
455. 18:09about this
456. 18:11tool and if you like to using it, what
457. 18:13do you think if it compares to Laravel,
458. 18:15which one would you prefer? And thank
459. 18:16you for watching. I'll see you in the
460. 18:17next one.