I Built this Insane 3D Interactive Website with GPT-6 Astra + Seedance 2.5 (No Code)

0:00 In this video, I'm going to show you how I use GPT Astra to build this beautiful interactive website where we can make the object follow your cursor. And I created all these characters from

0:08 scratch without writing a single line of code. And this is not just a website that looks good aesthetically, but it is a functional website where you can make reservations complete with a backhand

0:18 dashboard to manage all of the bookings. I created all this with Astra by just prompting the AI in plain English. So, if you can follow me in the next 10 minutes, you can build something like

0:26 this even if you've never created a website before. Let's get started. All right. So, I built the entire website using the latest GPT Astra, but I didn't use the codeex app for this because I'm

0:36 actually using an AI platform called Genpark here, which is an all-in-one platform that can design and build websites, mobile apps, and much more. Now, the nice thing about using a

0:44 platform like this is that you're not locked in into a certain AI model, but you have the option to select any AI model that you want, including the most powerful models like Fable 5.1 and GPT

0:55 Astra. And not only that, but if you're doing any kind of image or video generation for a project, which is what we don't need for this, you automatically have access to the latest

1:03 image models like GBT 2.5 and CN 2.5 directly on the Gen Spark platform, which means that you don't have to call a third party tool for this. Now, Genpark is kind enough to sponsor this

1:12 video, but you'll see why this could be a great option if you want that convenience, but without sacrificing quality cuz you can already see the caliber of website that it's able to

1:21 produce. Now, we're going to split this video into two parts to make it easier to follow. First, we're going to start with the design here. We're going to come up with all the characters, the

1:28 color palette, and the overall design theme of the website. And once we have all this ready, we're going to build the rest of the site and add more features like the booking system here, as well as

1:37 the backend dashboard. So, as the owner of the business, you can see who's made bookings. And you can manage the entire reservation system from here. All right. So, let's start with the design. So,

1:44 what we're building today is basically a website for a dog hotel. Is a place where you can put your dog if you're going away for a short vacation, maybe. It has an interactive element to this

1:54 which makes the website more playful and engaging. Now, I actually got that idea for that animation from this website here. It's called motion sites.ai. It's basically like a Pinterest for web

2:04 design and they have a huge collection of animated websites here that you can grab inspiration from. Now, some of these are paid, but this particular one is actually free. Now, if you want to

2:14 clone this entire website, you can just grab the prompt here by clicking on copy full prompt. But I'm not going to do that here because what I want is actually to reference this movement and

2:23 give it to the AI to understand what I'm trying to achieve here. So, what I did here was to just use QuickTime to screen record this section here and capture the movement and just save it to a folder.

2:35 Now, the second step is to find the characters for the dogs. All right. Now, for this, I like to go to Pinterest cuz there's just a lot of examples that I can just grab. So, I can type in dog 3D.

2:44 And you'll see that we have a lot of options here. And I'm just going to pick a couple of characters that I like and in the style that I want as well. And the reason why I like to grab references

2:53 here and feed it to the AI is because you don't want to give it a vague prompt to Astra and say like, "Hey, I want a picture of a cute puppy." Because you'll end up with something that you probably

3:02 don't like. Because when you say cute puppy, do you want that in a cartoon style or in a flat vector style or what is it? Right? So, I always like to go to Pinterest and just to grab the closest

3:13 thing that I want it to look like and this will just help us with less back and forth with the AI which will save you more tokens overall. Now, I have picked the ones that I like. So, I

3:22 picked this two dogs here which is this one here and then this is the other one. I think both of these can work well together. And also the third file here is basically my screen recording of this

3:33 motion here. So the AI knows what I'm trying to achieve here. Now we're ready to prompt. Once you create an account in Genpark, you're going to see this button down here called design and prototype.

3:42 So I'm going to click on this. So we're going to be using JSpark design here to design the UI for our website. Now if you've used claw design before, this is something similar to that. And the

3:51 benefit of using this is that you're going to have more options later to tweak the design after it's been generated. So, it's going to be a lot easier to change the colors, change the

3:59 text, maybe the placements and all these things. And this is something I'm going to show you once we get to that point. Now, you see that it already has a lot of templates that you can use if you are

4:08 running out of ideas. But since we are doing this from scratch, we're just going to start with a blank slate here. Now, I'm ready to paste in my prompt here. So, what I'm basically saying here

4:16 is that I want to build a website for a dog hotel called Wolfy. And I just want it to work on the hero section first. And I'm also telling it to use the reference images that I got from

4:27 Pinterest. I don't want them to be just standing, but I want them to be standing behind a ledge with their front paws resting over the edge, which is what you see here. So sometimes for things like

4:36 this, you can just describe what you have in your mind. And it doesn't have to be too technical. And after that, I'm explaining how I want the cursor animation to be. And I also ask it to

4:46 watch my screen recording so it knows exactly how I want the movements to be. And I'm also giving it some color preferences. So, I wanted to be more like a mix of powder blue and warm

4:56 ivory. And I got this idea from a pet store website that I thought was super good. And without being too specific in the color code and everything like that, I just gave it some direction in what I

5:08 want the colors to be. And I'm going to let it be creative in the design. And that is basically it. If you guys want the full prompt here, I'm going to leave it in the description below so you guys

5:17 can download it. And of course, I'm going to attach that folder as well in the zip file. And then I'm going to just hit go and it's going to process your prompt. And in just a few minutes, this

5:27 was done. You can see that the hero section is completely built out here with the cursor animation here. And let me just click on this to make this bigger. And I think it looks really

5:37 good. And again, because GenSpark has access to image models like GP2.5 and Cance 2.5, you don't need to call a third party tool for this. Is able to generate all this inside the platform.

5:49 Now, of course, if you want to make some changes, we have a couple of tools here. We can click edit. And now I can make changes to any of these elements. So, for example, if I want to change the

5:58 color of the text, I can simply click on color here and change that to whatever color that I want. Or if you want to change the text here, you can do that directly here. You can change to

6:06 whatever you want. And I think this is an easier way to make changes here rather than having to take a screenshot and then uploading it to the AI cuz that will burn tokens. Now, to be honest, it

6:15 took me two to three iterations to get this character as perfect as they are, cuz the first version, the dogs were actually looking to the right like this. So, all I have to do to make a change, I

6:25 can just click on draw here, and I can just circle what I want to be changed. And I can just type what I want, make sure the docks are looking straight ahead. And then I can hit send, and it

6:37 will make that change. Now, I'm not going to make this change now cuz it already looks good. But this is when this drawing tool will become handy. All right. Right. So now I'm happy with the

6:46 hero section. I'm ready to build out the rest of the website. So I'm just going to paste in the prompt. And what I'm saying here is basically to build out the rest of the website. And I wanted to

6:55 add some sections to show people what the actual place looks like. Maybe the rooms and amenities. So we'll be generating more photos here. And I'm also asking it to add a simple booking

7:05 demo just like how Airbnb does it. And last but not least, I'm also asking it to connect all the navigation and all the buttons here so that they go to the correct place. And I'm just going to hit

7:15 go here. Now, it's going to go to work. And I'm just going to fast forward until it builds the entire thing. A couple minutes later, we are ready with the entire website. So, I'm going to make

7:23 this a little bit bigger again. So, it built out the rest of the website, which is looking really good here. It took the design theme from the top here and just carried it over. And it also added some

7:35 images as well, which looks really, really good here. And then if we scroll down a bit more, we've got the booking page here. And I can already select the dates that I want here. And then I can

7:45 also select how many dogs I want. And I and I can click here to check availability, but I'm going to do that later. Now, I think design-wise, this looks really good already. But this does

7:53 not actually work yet because we haven't wired up the back end cuz we want to eventually connect this to a booking system where the owner of the business can actually manage the booking, right?

8:02 which is what we're going to do next actually. Now, assuming that you're already happy with the design here, we can continue to build out in the back end. And to do that, you can simply

8:10 click on build it here and then we're going to select website and it's going to prepare a handoff where we can grab all the design files here so we can build out the code. Now, that took a

8:20 couple minutes to package everything, but now it's ready. I can just click on build it now. And then again, I'm going to click on website and I'm going to click build it. Now, it's going to bring

8:28 all those package files into something called Genpar code where we're going to actually build out the actual website and eventually publish it with our own domain. Now, it's automatically created

8:39 this prompt for me which is pointing to the design files here and basically the prompt is asking the AI to build out the entire website with design that was already generated. Now, before I hit go,

8:49 I want to select the model that I want to use for this project. So I can select any of these models here like cloud people 5.1 or I can go with Astra. I can go with Soul. Now for this one I'm going

8:59 to pick Astra because that's the best coding model at the moment. And I'm just going to hit go. And we're just going to wait a couple more minutes when it's wiring up the website. And now it's

9:07 asking you whether you want to use Gen Spark's hosting or your own Cloudflare account to host the website. Now, if you have a subscription with GenSpark, you can use their hosting or if you have

9:16 your own Cloudflare account, which I do. I can connect that to GenSpark here and it's going to automatically publish everything as long as you give the API token. So, today I'm going to use my

9:26 Cloudflare account because I already have this. So, I'm going to hit go. And now it's also going to guide you in how to connect everything, how to use Cloudflare, how to grab that token from

9:36 Cloudflare and connect it to GenpSpark. Now, while this is working to connect your cloud player account to GenpSpark, it's actually pretty easy. So, so you want to click on the publish tab here.

9:45 And if you have the plus or the pro account in GenSpark, you can actually use this to host your website, which is actually the easier option. But if you already use Cloudfare like I do, I can

9:54 simply connect it to my own account. So, if I click on this, this is where you want to put your API key here. And once you save it and you give it permissions, GSpire is going to be able to push your

10:04 files and publish the website on your behalf. All right. So just in a couple minutes the website is ready. So if I click on open website here we've got our website and it is now hosted at

10:16 Cloudflare and it also give me the link to the admin dashboard. So let's click on that. So this is the backend dashboard where we can manage the bookings. Now I think at first glance

10:25 I'm very impressed in what it's able to produce for me. Just in the first version it's already pretty robust here. Obviously, because we're using Astra is able to think through many of the

10:36 different scenarios that a business like this would probably need. So, we've got here the statuses and we've got some dummy data here obviously. And if I click on availability, we can also see a

10:47 calendar view here where okay, so in one day we have a capacity of five dogs, seven dogs, eight dogs. And then I can also modify the data here as well. I can hit settings and I can also change the

11:01 number of dogs that I'm managing per night here and also even changing the admin password. So I think I'm pretty impressed in how far it's able to think. Now I want to test if this actually

11:11 works. So I'm going to go to the homepage here and actually make a test booking. So if I select maybe six and seven here one dog check availability. Okay, so it is available. Add dog

11:24 details. Let's call it max JSON Gmail. Okay, and then review stay. Okay, this is a test. And let's hit reserve. Okay, so we've got the booking reference. And again, I didn't even ask it to create

11:38 this confirmation page here, but it's able to think about different types of scenarios and build out everything without having me to think about every single thing. So, I'm going to hit save

11:47 confirmation here. Okay. So, that gives you a text file here. And I'm going to just check the dashboard if that came in. So, I'm going to hit refresh here. And let's look for maybe it's under

11:58 pending. Okay. There you go. So, we've got the booking for Max. I just wish that the font is a little bit bigger. And I can now click on manage. And I can change the status to confirm and save

12:10 booking. And that should move it to confirm. Yeah, there you go. And if I go to availability, we can also see that September 25th and 26th is full. And if I go back to the website, these two

12:21 dates are blocked out as well. So I know that everything is connected properly. Now, if you're wondering where everything is actually stored, you can simply ask it a question, you know, how

12:29 to see the database of all the bookings. You know, where is all of that stored? And it's telling me that everything is actually stored in Cloudflare. And it gave me all the links to my website and

12:39 also the Cloudflare dashboard where I can see everything. And if I click on this link, it will bring me to my Cloudflare account and I can already see the database here. Now, I think this

12:48 website looks really good already, but I think it's still missing something. I think it'll be nice to have some reviews here, especially for a service business. And to do that, I can easily ask Jen

12:58 Spark to add a testimonial section, and it will actually do that. And if you want to get more fancy, you can actually go to 21st Dev here. They have a bunch of templates that you can choose. So you

13:07 can search by testimonials and it will show you a couple of options here. And a lot of these are animated as well. And it's just as easy as grabbing the code and copying it into GenSpark and it will

13:18 actually build out the whole thing. So for example, if I like this particular one, I can just click on this. And there's actually a lot more options to this as well. But let's pick a simpler

13:26 one like this one here. So I can click on copy code and I can say something like add a testimonial section under the booking section and use this style attach but adapt it to our design. And

13:36 I'm just going to paste the code that I got from 21st dev. And I'm just going to hit go. And you can see that it's processing everything and it's now adapting that style to our website. And

13:47 it's just trying to make sure that everything looks good even on mobile. Make sure it's responsive. And now looks like it is done. So edit and publish directly below the booking section.

13:57 Let's click on this. And if I scroll down, I'm going to see that this is the testimonials that it added. the exact scrolling animation that I want but adapted to our design. And just look at

14:07 the detail here that it added this quotation marks and also the pause here. I think they look really cute. Now, if you notice, it also changed the text of the testimonial as well to match the

14:17 type of business this is. But obviously, if you want to publish this as a real website, you want to add your own testimonials. Now, there's one more thing that I want to highlight, which is

14:26 Genpar connectors here. So if you click on scales and you click on connectors, you'll see that this is similar to what you have in cloud code which is connecting to third party tools. So here

14:37 you can connect genpark to tools like Gmail, Google drive, notion, and they do have a lot of apps that you can connect to. But if you are using an app that does not have a connector here, a simple

14:47 workaround is actually to connect it to Zapier, which is what I do. So, if I search Zapier and connect to Zapier, you'll suddenly have access to 9,000 apps. So, if you're doing any type of

14:58 automations or you need to connect to a certain app that does not exist here, more likely than not, it's going to be on Zapier. Now, how much does this actually cost? Now, Jespark has a couple

15:07 of plans here. The lowest plan starts from $19.99 if you're on the annual plan. With this, you get 10,000 credits per month. And obviously, if you need more credits, you can simply upgrade to

15:17 the next one. And with this plan here, it allows you to pick how many credits you want and the price will be adjusted based on the amount of credits you need. But I think the nice thing about this is

15:26 that even the lowest plan here already gives you access to all the Frontier models like Fable 5.1 and Astra. All the image models, video models, and even audio and music, which I think is pretty

15:37 generous. Now, if you guys want to give this a try, I'm going to put a link in the description below which will give you the best pricing to this so you can start building your website. Now,

15:45 building a website is one thing, but what if you want to build a fully animated mobile app, which is what I did in this next video. I break down how I was able to rebuild this mental health

15:53 app that's making a million dollars a month using Fable 5.1 without writing a single line of code. So, if you want to watch that video, click on this video next and I'll see you