How to build a creative studio landing page with Lovable
Stop renting your studio’s portfolio by the minute. Instead, start with our production-ready codebase. We provide the architecture for a high-performance, cinematic landing page. You simply use Lovable to customize the copy, swap the video assets, and tune the motion, all using plain English.
Lovable
$ Build a one-page site for a video studio: full-screen muted reel behind the headline, our featured film, the awards, what we offer, the team, and a contact form. No database. It posts to an endpoint I will give you.
- Sections previewed live
- Motion and weight tuned
- Ready for you to review
What a creative studio landing page actually is
One page, scrolled top to bottom, that answers a single question before a visitor decides anything else: are these the people I want making my film? It is a portfolio, a pitch, and a contact form wearing the same coat.
A studio site is not a product with users. Nobody signs up, nobody logs in, and nothing needs storing. Instead you have a stranger with a budget who arrived from an Instagram bio or a colleague’s message, who will spend a few seconds deciding whether you are serious, and who will either keep scrolling or close the tab. Everything on the page exists to earn the next screenful.
That makes the hard part unusual. There is no data model to get wrong and no permissions to leak. What is genuinely difficult is that the things making the page persuasive are the same things making it slow: a full-bleed film above the fold, high-resolution stills of your work, and motion on every section. The Web Almanac chapter behind the figure below also reports that on 76% of mobile pages the largest thing on screen is an image, which is the same slot a reel occupies here. You are asking a phone on cellular data to be cinematic. That trade-off is the whole engineering problem. It is also exactly what our codebase is built around. We’ve done the heavy lifting on the sections, the motion, and the responsive passes, so your time goes on the reel itself, and the guide below covers compressing it and giving it a still frame so it arrives fast, even on a bad connection.
The second difficulty is that you own every word. A template can hand you a services section. It cannot tell you what you sell, which three pieces of work to lead with, or what you are contractually allowed to show. Most studio sites stall because gathering the work and writing the pitch is hard enough. You shouldn’t have to fight with code, too. By starting with a complete, performance-optimized codebase and using your AI coding tool to handle the technical adjustments, you eliminate the engineering bottleneck. You spend your time where it matters: curating your best work.
The page is the theater
Here, the page is the theater. The visitor isn’t judging your web development skills. They are judging your video reel. The website’s only job is to get out of the way, load instantly, and present your work flawlessly on any screen.
The heaviest thing is the point of it
You cannot fix a studio page’s performance by removing the video, because the video is why anyone came. The work is compressing it, choosing a still frame to show first, and deciding what a phone on a bad connection gets instead.
Nothing to breach, and nowhere to hide
With no database and no logins, almost none of the usual failures apply. What is left is the two that do: a page too slow to be seen, and a contact form that quietly never reached you.
Front pages are the slow ones
45%
of mobile home pages pass all three of Google’s Core Web Vitals, against 56% for the pages behind them, from HTTP Archive’s Web Almanac, published January 2026 on July 2025 field data from real visitors.
almanac.httparchive.org · checked August 2026
The parts every studio page is built from
Almost every page in this category comes down to these six, in roughly this order, and each one is something you can ask your AI coding tool to build or rework in plain words.
High-impact hero section
A full-screen frame of your best work, one line that says what you make, and one button. The discipline is in what you leave out: a hero carrying three messages carries none, and a hero that takes six seconds to appear has already lost the visitor it was for.
Interactive video & showreel
One piece of work, properly presented, beats a grid of twelve thumbnails nobody clicks. Whether it plays from your own host or an embed changes the page’s speed, its privacy story, and how much control you have over what surrounds it.
Trust signals & client proof
Awards, festival laurels, client names, a number you can stand behind. This is the section that turns "nice reel" into "these people get hired", and the only rule is that everything on it has to be true.
Clear services & pricing ranges
Named services with a sense of scale (a day rate, a from-price, a typical project) so a visitor can work out whether talking to you is worth their time. Vagueness here reads as expensive, which filters out the people who would have said yes.
Team profiles & human context
Clients are buying who they will be in a room with. Faces, names, and one line each about what that person is actually for does more than another paragraph about your values.
Frictionless contact form
A short form, a visible confirmation when it sends, and somewhere real for the message to land. Every section above is spent getting a visitor here, which is why a form that silently fails is the most expensive bug on the page.
Own the page or rent it by the minute
Most studios put their site on a hosted builder and never think about it again. What is worth noticing is what each of those builders charges you by, because it is never "a website", it is always one of the things your page is made of.
Build your own
Own the architecture outright. Download our complete codebase, and use your AI coding tool to adapt it in days, not quarters.
- No meter on minutes of video, gigabytes served, or projects shown
- Custom code is not a plan feature: the look can go as far as your taste does
- Your reel plays from wherever you decide, at whatever quality you decide
- Keep the frontend static and lightning-fast. Your contact form can post directly to a secure endpoint (like a webhook or serverless function), meaning you get the benefits of backend processing, like triggering an AI brief summarizer, without managing a database
- Full ownership of the code: keep it forever, host it anywhere, and never pay a monthly subscription just to keep your portfolio online
Rent a hosted site builder
Squarespace · Framer · Format · CarbonmadeA hosted builder is live the same afternoon, with a designed starting point, video delivery you never think about, and a form that works on day one. What you accept is a meter and a ceiling.
- Live in an afternoon: nothing to build, nothing to host, someone to email when it breaks
- Video hosting handled for you, though on two of these four it is rationed in minutes: 30 minutes on Squarespace’s entry plan, and none at all on Format’s
- Framer charges again for anyone else who edits the site: $20 a month per extra editor
- Carbonmade counts projects instead: 8 on the entry plan, 50 on the next
- Writing your own code is a plan feature on Squarespace, not a given: a code block and site-wide code injection start on the second tier
- A custom domain is a paid upgrade on Framer, and comes with the annual plan on Squarespace
- The bill never stops, and the page is not yours to take with you
The most likely place a studio ends up, and the one whose limits are worth reading before you commit a reel to it. Verbatim from the help centre, by plan: “30 minutes of video storage”, “5 hours of video storage”, “50 hours of video storage”, “Unlimited video storage”. Custom code is tiered too: “Code block - JavaScript and iframe code” and “Code injection - site-wide and per-page” start on the second plan, not the first. A free custom domain for one year comes with an annual plan.
support.squarespace.com · checked August 2026
The closest of the four to what this template does, since motion is its whole pitch. Two meters, though: the free plan gives you a Framer domain and 1 GB of bandwidth, and a custom domain needs a paid plan, bandwidth being an odd thing to ration on a site whose main asset is a film. The second meter is people: “Additional editors are $20 / month”, or $10 for someone who only updates content. The prices above are what the page shows with yearly billing selected. It does not display the month-to-month figures beside them, so we are not quoting a range we did not read.
framer.com · checked August 2026
A portfolio platform rather than a site builder, and the clearest example in this set of a plan gate landing exactly where a video studio needs it: the entry plan hosts no video at all, Pro allows 15 minutes, Pro Plus 120. Note the billing spread, the widest here: Pro Plus is $36 month to month against $15 on an annual plan. Entry also excludes custom fonts and a free custom domain. Branded email is $100/year on top of any plan.
format.com · checked August 2026
The fourth meter, and the one that reads oddest for a studio: how many pieces of work you are allowed to publish. Eight projects is a real ceiling for anyone with a decade of credits, so the plan you land on is decided by your archive rather than your traffic. All plans include a free carbonmade.com address and let you point your own domain at it.
carbonmade.com · checked August 2026
Rule of thumb: if the site is a formality (somewhere to send people who already know you, updated twice a year) rent one and spend the time on the work instead. If your site is how you get hired, if the reel is long or in more than one cut, or if you can already name the thing you want that a builder will not let you do, that is the case for owning it. The tell is whether you have ever described your own site as "fine".
Why build with Lovable
This page has no database, no logins, and no permissions to get wrong, so almost none of the hidden work that stalls a solo build applies to it. What is left is craft, and craft is not obviously less work: the same section rebuilt until the spacing stops looking accidental, a video that has to seem expensive and weigh almost nothing, and three passes: narrow phone to wide monitor, weight, and whether any of it is usable for somebody who cannot see it the way you do.
Lovable turns that into a conversation with a live preview beside it, which suits visual work better than it suits most things: you describe a change and watch it happen rather than imagining it from a reply.
Prompt
Say what you want to add or change, in plain language.
Watch
The live preview rebuilds in the browser as Lovable writes the code.
Try it
Click through the real app, with real buttons, forms and data rather than a mockup.
Refine
Select what’s off and describe the fix, or ask for what’s next.
None of that requires a computer science background or writing code, and the whole build happens in one browser tab, one request at a time.
Three passesthat decide it
Responsive, weight, and accessibility decide whether the page works away from your desk. The first is the one Lovable helps with most directly, because the preview sits beside the chat and you can watch a layout break at a phone width instead of guessing that it will.
Click to point instead of describing where
Select any element in the live preview with Lovable’s Select elements tool, and your next message applies to exactly that piece.
Full ownership and complete privacy
The app and the records in it are yours. Every change is saved automatically, and the repository Lovable syncs to GitHub is private on every plan, with no technical setup and not one Git command.
Pay a designer, or do it with AI
A page with no backend has almost nothing to run. The whole cost is who builds it. Pay someone to design and build it, or describe what you want to an AI coding tool and do it yourself.
Hire a designer-developer
Custom build, from scratch- Designer-developer
- ~$6.5k-$26k
- Form endpoint
- Free tier · from $12.50/mo*
- Hosting
- $0 on a free tier
- Build time
- ~130 hrs of their work
~$6.5k-$26k to build, then close to nothing to run
That band is our ~130-hour estimate at what the work actually goes for: freelance web developers in the United States run about $40/hr at junior level to $150/hr and up at senior, and agencies add another 20% to 40% for overhead and project management. Call it $50/hr at the bottom and around $200/hr for an agency. Note what you are buying at that price, though. A developer alone gives you a built page and no art direction. The reason a studio site costs what it costs is usually the person deciding how it should feel.
Build it with Lovable
From scratch, with Lovable- Lovable
- Free (30 credits/mo) to $25+/month (Pro, from 100 credits)
- Hosting
- $0 on a Lovable subdomain
- Your time
- ~63 hrs
Free to try the idea, ~$25-$50+/month on Pro while you build a real one, then whichever credit tier you keep using
Lovable bills by credits, so what you pay tracks what you build: importing the pre-built template can fit inside the Free plan’s 30 credits a month, while a full from-scratch build burns through Free fast and usually needs Pro. Pro’s entry rung is $25/month (or $250/year, roughly $21/month effective) for 100 credits, the bottom of a ladder where 200 credits runs $50/month (or $500/year, about $42/month), and a multi-session build often lands on that rung or higher rather than the entry price.
* Two honest ways to make a contact form reach you, and both start free. A hosted form endpoint is the no-server route: Basin’s free tier covers one endpoint and 50 submissions a month with basic spam filtering, and its own page notes that filtered spam does not count against that allowance. Paid plans start at $12.50/mo billed yearly for 250 submissions. If you would rather own the whole path, one small function of your own plus an email service does it. Resend sends 3,000 emails a month free, capped at 100 a day. A studio fielding a few inquiries a week fits inside either free tier indefinitely.
Either way the page is yours, and nothing about it is metered: not the length of your reel, not the number of projects on it, not how many people are allowed to edit it. The difference is who does the work: pay someone up front, or describe what you want and build it yourself.
Prices and rates from usebasin.com, resend.com, developex.com and docs.lovable.dev, checked August 2026.
Decide before you build
Six decisions, none of them technical, and every one of them cheaper to make now than to unpick from a finished page. This is where studio sites actually stall.
Your 10-second elevator pitch
Write the line that goes under the hero before you build the hero. A sentence a stranger could repeat to a colleague, not a tagline. If you cannot get it under about twelve words, the problem is the positioning rather than the copywriting, and no amount of motion will cover it.
Portfolio selection & NDA clearance
Pick the two or three pieces that represent what you want more of, not what you are proudest of. Then check the paperwork: unreleased campaigns, client NDAs, and music licences all decide what may sit on a public page, and finding out after launch is the expensive order to do it in.
Video hosting & page speed budget
A short muted loop you host yourself, or an embed from a video platform. Self-hosting gives you control of the quality and no third-party scripts. An embed gives you adaptive quality and someone else’s bandwidth bill. Either way, decide the budget in megabytes now, because that number quietly sets how fast the page can ever be.
Single call-to-action & lead routing
An inquiry form, a booking link, or a plain email address. Pick one. A page offering three ways to get in touch gets fewer messages than a page offering one. Then decide where a submission goes and who is responsible for answering it, since an unread inbox is the same as no form.
Verifiable social proof
Awards, laurels, client logos, view counts. Decide the standard before you fill the section: a logo you may only show with permission, a festival you were selected for rather than won, a number from one unusually good campaign. A studio page trades entirely on credibility, and one claim a visitor can disprove costs more than the whole section earns.
Mobile playback & motion rules
Motion is why this kind of page works and also why some people cannot use it. Decide up front what happens for a visitor whose system says they prefer reduced motion. The content should still arrive in the same order, just without the movement. Settle whether the hero video is allowed to autoplay on a phone at all.
Comparing your build options
What you start from decides how much of this goes on the look and how much on structure nobody sees. The same page three ways: from nothing, from a bought theme with opinions of its own, or described to Lovable one section at a time.
The sections go up in a week. What takes the rest of the time is everything after that: getting a video hero to arrive fast enough that nobody leaves before it plays, making reveal animations feel deliberate rather than twitchy, holding all of it together from a narrow phone to a very wide monitor, and keeping a dark, animated page readable for someone who cannot see it the way you do.
This is the one build in our catalogue where a bought theme genuinely gets you a long way, because this build has no backend to be missing. What it cannot hand over is the look, and a studio selling taste has a specific problem with a theme other studios also bought. You still own the reel, the motion, the speed, and every word, and you spend some of the time you saved fighting a structure that assumed different sections.
Describe a section, watch it appear in the preview beside the chat, then select the part that is wrong and say what it should be instead. On a page that is entirely look and feel, seeing each change land immediately is worth more than it is on an application where most of the work is invisible.
Estimate your exact build timeframe
Untick the sections you do not need and the three passes at the bottom stay ticked for a reason. They are where a page like this is won. The total is our own estimate, not a quote.
Your estimate
63 hrs
start to finish
Based on the 6 of 6 features you’ve selected, plus ~4h of groundwork. Toggle any on the left to watch the number move, and open the groundwork row to untick what you have already, such as a database that is already running or going live if you are only building a mock-up for now.
A rough estimate, not a quote. Real time depends on how much you customize and how clean your data is.
Let’s set up the tools you need
Nothing installs. The whole workspace is a browser tab. An account, a plan, and a GitHub connection, and that is genuinely all: this is the rare Lovable project with no database to connect, because the page has nothing to store behind one.
Lovable account
Nothing to download. Sign up with an email, Google, or GitHub account and you land straight in the chat where you describe what to build.
Sign up for LovableLovable subscription
Lovable bills by build credits, so the plan you need follows what you build. Free gives you 5 credits a day, capped at 30 a month, which is enough to try it rather than to finish an app. Pro is $25/month for 100 credits ($250/year, about $21/month), and that is the bottom rung: a build spread over several sessions usually lands on 200 credits at $50/month, or higher.
Compare Lovable plansGitHub connection
Not needed to build anything, since Lovable keeps its own history of every change. Link a GitHub account and it also keeps a private repository in sync, so a copy of the real code exists outside the browser tab. Worth doing before the project is one you would hate to lose.
Set up GitHub syncSomewhere for the form to go
The one service this build connects to. A hosted form endpoint is the no-server route: you point the form at a URL and they email you each submission, spam filtering included. Basin’s free tier covers one endpoint and 50 submissions a month. If you would rather own the whole path, one small serverless function plus an email service does it instead, and Resend sends 3,000 emails a month free. Either way nothing needs setting up before step 01. You need it by the step that builds the form.
Compare Basin’s plansNone of this touches your computer, and no backend needs provisioning. If Lovable offers to set one up, you can decline. The only outside service is wherever the contact form sends to, and that can wait until step 05.
Build your studio page, prompt by prompt
Everything happens in one tab: you describe a section, the preview rebuilds, you look at it. The one habit worth keeping on a page like this is bookmarking a version before you change the look of something, because visual work means changing your mind and the preview makes that very easy to do repeatedly.
- 01
Say what the page is before you ask for anything
The first message sets the frame every later one inherits. Spend it on the palette, the type, and the fact that nothing here needs a backend. All three are cheaper to state than to correct across seven sections.
PromptSet up the projectThis is a single-page marketing site for a creative video studio, and it has no backend at all (no database, no logins, no stored data) so please do not add one or offer to provision one. Set up a dark theme first, as a small set of reusable colour variables: a near-black background, a light foreground, a muted grey for secondary text, and two accent colours. Pick a display typeface for headings and something plain for body text. Then show me just a styled empty page with the nav bar, so I can approve the palette before there is anything on top of it.
Approving the palette on an empty page takes one message. Changing it later means every section is a little bit wrong until it has been redone.
- 02
All seven sections, deliberately plain
Ask for the whole page unstyled and scroll through it in the preview. This is the cheapest moment to decide that awards should come before the about section, and the most expensive one to skip.
PromptLay out the pageAdd all the sections as full-width stacked blocks in this order: hero, featured work, awards, about, services, team, contact, footer. Each needs an id so the nav can scroll to it, and the nav should collapse into a hamburger menu on a phone. Keep it plain for now: real headings, placeholder paragraphs, and grey blocks where the images and video will go. I want to scroll the whole thing in the preview and change the order before anything looks good.
Plain sections are easier to reorder, in the chat and in your head.
- 03
The hero, and the still frame everyone forgets
The preview will make this look finished quickly. What the preview cannot show you is a visitor on a slow connection, which is exactly who the poster image is for, so ask for it in the same message.
PromptBuild the heroBuild the hero: a full-screen background video, muted, looping and autoplaying, with a poster image shown until the video can actually play and a dark overlay so text stays readable over any frame. On top, one headline, one supporting line, one button. Make the nav transparent at the top of the page and give it a solid background once I have scrolled about 50px. Then handle visitors who have asked their system for reduced motion: do not play the video for them at all, show the poster instead, and leave everything else exactly where it is. Use a placeholder video for now and tell me where to drop my own file in.
Bookmark this version before you start adjusting the hero’s type. It is the section you will change most and the one most annoying to get back.
- 04
Point at what is wrong instead of describing it
Four sections at once, then the reveal animation over all of them. This is where selecting an element in the preview earns its keep: describing which card is wrong takes three sentences, and pointing at it takes none.
PromptBuild the work and proof sectionsFill in four sections. Featured work: one large video with the project name, client, and a short write-up beside it, built so I can switch between an embedded video and a file of my own without redoing the layout. Awards: a responsive wall of laurels with the award name and year as real text rather than part of the image. Services: a card per service with a name, a sentence, and room for a from-price. Team: a grid of photographs with a name, a role, and one line each. Then add one scroll-reveal animation (a short fade and rise as each element comes into view) and reuse the same one everywhere rather than giving each section its own, disabling it entirely for anyone who has asked for reduced motion.
Use Select elements for the fixes rather than describing where something is. "This card’s spacing" beats "the third service card, on desktop".
- 05
The form, and the one service this page needs
The whole page has been getting a visitor to this point. Because there is no backend, the form needs one outside service, and because Lovable’s revert restores code and not data, this is a good moment to bookmark before you start changing things.
PromptBuild the form and connect itBuild the contact form: name, email, what they want made, and a message, with the required fields checked before anything sends and inline errors saying what is wrong. Then post it to a hosted form endpoint whose URL I will paste in, handling the failure case as well as the success case, and show a visible confirmation on the page itself that stays put long enough to read. Add a hidden honeypot field that bots fill and people never see, and reject any submission that has it filled in. There is no backend here and nothing secret in the project: the endpoint URL is public by design, and if anything in this step would need a real secret, stop and tell me rather than putting it in the code.
Submit the real form and check your inbox. The preview showing a success message proves the request left, not that anybody received it.
- 06Destination
The three passes the preview hides, then publish
A dark, animated page looks its best in the preview on a good laptop, which is the least representative view of it there is. Three passes fix that, and then it goes live.
PromptTune itThree passes, and tell me what changed in each. Speed: show me what each image and video weighs, swap the stills to a modern format sized for how they are actually displayed, hold everything below the fold back until it is needed, leave the hero alone as the one eager load, and say straight out if the video itself is the problem rather than designing around it. Accessibility: check every text colour against its background for contrast on a dark theme, make sure focus outlines are visible, confirm the whole page can be reached with a keyboard in a sensible order, and re-check that the reduced-motion version is missing nothing. Sharing: set the page title, the description, and an Open Graph image so a pasted link shows a preview card.
PromptPublish itPublish the project and connect my own domain, then tell me what to check on the live URL rather than in the preview, starting with opening it on a phone with wi-fi turned off and seeing how long the hero takes to appear. Also confirm the GitHub sync is on so there is a copy of the code outside this tab, and then list what to improve next in priority order.
The preview and a phone on cellular data are different pages. Only one of them is the one your clients see.
No databases to leak, no servers to hack
Static studio sites have no databases, logins, or servers to hack. Here is how your site stays ultra-secure and how to protect sensitive client data.
Most of what usually goes wrong cannot
No accounts means no password handling, no session hijacking, and no privilege escalation. No database means nothing to inject into and no access rules to get wrong. No server of your own means nothing to patch. Genuinely, structurally, this build starts safer than anything else in the catalogue.
Everything in the bundle is public
This is the one people get wrong. A static site ships every file it is made of to the visitor, so anything you paste into the project is readable by anyone who opens the page source: an API key, a private analytics token, the unlisted link to a client’s unreleased cut. "There is no backend, so nothing is secret" is the accurate way to think about it.
The form is the only thing that accepts input
One form, and it is the entire input surface of the page. Validate on the way in, keep the fields to what you will actually read, and remember that whatever the visitor types travels to whoever is receiving it, which is worth knowing before you add a field asking for a budget.
Spam is not a maybe
A public form on a public page finds bots within days, not months. A honeypot field that humans never see, or your provider’s own filtering, or a challenge on submit. Pick one before the address is indexed rather than after the first hundred messages about search-engine optimisation.
Whoever receives the form now holds client data
Names, email addresses, and a description of a project somebody has not announced yet. If a hosted form service is receiving that, it is processing personal data on your behalf, and you are the one answerable for it. Check where it is stored, how long for, and whether you can delete it on request. A 30-day retention window is a feature, not an oversight.
An embed is somebody else’s code on your page
A video embed from a third-party platform loads their scripts and can set their cookies against your visitors. That is usually a fair trade for adaptive playback, but it is the reason a page with no backend can still need a cookie notice, and the reason a self-hosted loop is the quieter option where it will do.
HTTPS, then two headers worth having
Every host in the next section gives you a certificate free, so there is no excuse for a page collecting inquiries over plain HTTP. Beyond that, a content security policy that names the video platform you actually embed, and a referrer policy, are twenty minutes that stop your page being framed or quietly repurposed.
No backend still means a supply chain
The page is static once built, but building it pulls in packages, and a compromised one ends up in the bundle you publish. Keep dependencies current and check what a new animation library brings with it. This is the one ongoing maintenance job a page like this actually has.
Read this project the way a stranger reading its published files would. List every value that ends up in the built bundle and should not be public: keys, tokens, private URLs, anything left in a comment. Then list every request the finished page makes to a third party, what each one sends, and any cookie it sets. Finally, tell me what the contact form does with a submission, where that submission ends up, and what currently stops a bot filling it in a thousand times.
Run this before you publish. The whole security surface of a page like this is what you shipped and what you embedded, so an audit that reads both covers nearly all of it.
The one rule that matters: a static site has no secrets: if a value is in the project, treat it as published. Anything that must stay private belongs behind a function on a server, not in the page.
What speeds the build, and what slows it
Speeds the build
- One small, specific request per message (a field, a section, a spacing change) rather than the whole page at once
- Getting your real reel and stills in early, because placeholder media hides layout problems
- Using Select elements to point at the exact thing that should change, instead of describing where it is
- Bookmarking a known-good version before you start moving the look around
- Reading each response before sending the next request, so small mistakes do not stack up
Slows the build
- Asking for the whole page in one message instead of one section at a time
- Judging the hero in a laptop preview, when most of the people it is for arrive on a phone
- Describing which card or heading to change instead of selecting it
- Skipping bookmarks, then scrolling far back through history to undo one bad redesign
- Approving several messages in a row without previewing what actually changed
Connecting GitHub (Optional)
Every change in Lovable is saved automatically without any technical setup. You only need to link GitHub if you want a private copy under your own control or plan to hand the codebase over to external developers.
What Git actually is
A recorder for a project: every change becomes a version you can go back to, and nothing is ever overwritten. GitHub is the service that keeps those versions online.
Lovable already saves every change
A new version is created each time Lovable changes your project. No save button, no Git command, and the full history is there to scroll back through.
Version history, Lovable docsReverting undoes the code, not your data
One click restores an earlier version of your code and redeploys it, but nothing already written to your database rolls back with it. A UI or logic change is safe to undo. A change that touched real records is not.
Bookmark before a big change
Before a redesign or a change to your data model, bookmark the version you are on: one click back instead of a long scroll through history.
Connecting it, if you want to
Open your project settings, pick GitHub, and authorise the account. Lovable creates a private repository and keeps it in sync both ways: changes in Lovable reach GitHub, and anything pushed to that branch comes back in. Free on every plan.
GitHub integration, Lovable docsIt’s also how you leave, if you ever want to
The synced repository is a standard Vite and React project: clone it, hand it to a developer, or deploy it yourself.
Deployment, hosting, and ownership, Lovable docsChoosing the right hosting for a video-led page
The finished site is a folder of files, so it runs on almost any host, free tiers included. The two things worth comparing here are how much traffic a free tier really allows and how close the files sit to your visitors, because the page is mostly video.
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| LovableBuilt in | Publishing from the chat | The project you have been previewing publishes itself, with nothing to configure and no account to open anywhere else. Free on any plan at a lovable.app address. Paid plans put it on your own domain: buy one through Lovable and the DNS is done for you, or point one you already own at it using the two records the setup screen shows. Certificate issued automatically either way. | Free on a lovable.app subdomain · own domain on paid plans |
One button, and the app you have been previewing is live.
Hosting it somewhere else
Only for a setup Lovable does not offer: a host you already pay for, or the exported code on your own account. None of it is needed to go live.
| Host | Best for | Notes | Free tier |
|---|---|---|---|
| Vercel | One-click deploys | Connect the project and it publishes itself. A standard Vite build, so nothing to configure. Read the plan terms before you settle: the free Hobby tier is for personal, non-commercial projects, and a studio page selling services is a commercial one, so it belongs on Pro from $20/user/mo. | Pro from $20/user/mo (Hobby is non-commercial) |
| Netlify | Drag-and-drop or Git | Connect the repository or drag the built folder in. Handy here for a second reason: it can receive form submissions itself, which is one fewer service to wire up if your volume is small. | Free tier |
| Cloudflare Pages | Cheapest at scale | Serves the files from wherever is nearest the visitor, which matters more on this build than on most. The heaviest thing on the page is a video, and how far it has to travel is most of how long it takes to start. | Generous free tier |
| GitHub Pages | Free Git-based hosting | Publishes straight from your repository, with one small tweak so in-page links behave. Unusually, this is the one build in our catalogue where the free-only-from-a-public-repo catch costs you nothing, because no keys in the project can be exposed, though the unreleased client work in it may be its own reason to keep the repository private. | Free from a public repo only |
| Firebase Hosting | Simple setup, Google stack | One setup, after which publishing is a single command from your machine. Mainly worth choosing if the rest of your tooling already sits in Google’s stack. Nothing about this page needs anything it offers. | Free Spark tier |
| AWS Amplify Hosting | Teams already on AWS | Connect the project in the AWS console. One routing setting makes in-page links work. Worth it mainly if your video already sits in the same account. | Free tier (build + hosting) |
| Surge | Publish from the terminal | One command publishes the built folder, with no repository needed. Genuinely useful for putting a work-in-progress in front of a client this afternoon. | Free - unlimited publishing |
| DigitalOcean App Platform | DigitalOcean users | Connect the project and it builds and serves the site for you. Fine, and rarely the reason to choose it unless you are already there. | Free - 3 static sites, 1 GB/mo transfer |
Any of these will serve the page. Two things to check rather than assume: whether the free tier permits commercial use, and what its bandwidth allowance is. A hero video changes that arithmetic completely, and a page that goes mildly viral is exactly when you find out. Read the plan terms for the host you pick, not just the headline price.
The failure to expect on launch day is a beautiful page that takes eight seconds to appear, not a broken build. Your video was fast on your laptop because it came off your own disk. Before you publish: check the file size of the hero video and get it into single-digit megabytes, give it a still frame to show while it loads, then open the published URL on an actual phone on cellular data with the wi-fi turned off. That last step is the one people skip, and it is the only one that tells you what a visitor gets.
No database here, but two things do live elsewhere
Nothing about this page needs a backend. What it does need is somewhere for a form submission to go, and a decision about where the film plays from.
| Service | Best for | Notes | Free tier |
|---|---|---|---|
| Hosted form endpoint | Getting the form to reach you | Point the form at a URL the provider gives you and they email you each submission, with spam filtering included. No server, no key in the bundle. Basin’s free tier covers one endpoint and 50 submissions a month, which outlasts most studios’ inquiry volume. | Free - 1 endpoint, 50 submissions/mo |
| Your own function + an email service | Owning the whole path | One serverless function on the host above, plus an email API, and the submission never touches a third-party form service. More control, one more thing to maintain. Resend’s free tier sends 3,000 emails a month, capped at 100 a day. | Free - 3,000 emails/mo |
| The video itself | The reel | Either a compressed file served by your host with the rest of the page, or an embed from a video platform. The file is quieter and fully yours. The embed gives you adaptive quality on bad connections and brings a third party’s scripts with it. Both are free at this scale, and the choice is about control rather than money. | $0 either way |
Neither of the first two stores anything you would call a database. They move a message from your page to your inbox, and that is the whole of this build’s server side.
Add AI capabilities in one simple step
Securely route your AI API keys through a lightweight serverless function. Use simple prompts to automatically summarize incoming client inquiries into 10-second briefs.
One function first, because there is no server
Everything else here needs somewhere to keep an API key, and a static page is the one shape that has nowhere. One serverless function on the host you are already using is the whole backend this page will ever need.
Add a single serverless function to this project (the smallest one my host supports) that reads an AI provider key from an environment variable, accepts a short JSON request, calls the model, and returns the text. Do not let the key reach the browser bundle, keep the function to one file, and show me how to set that environment variable on my host rather than in the repository.
A brief you can read in ten seconds
Inquiries arrive as a paragraph of free text. Turned into a few labelled lines (what they want made, roughly when, roughly what budget, whether they named a reference) you can triage a week of messages in a minute instead of reading each one twice.
When the contact form is submitted, send the message text through the ai function and have it return a short structured summary: the deliverable, the timeline, any budget mentioned, and any references named, with "not stated" where the message does not say. Include that summary above the original message in whatever reaches my inbox, and never in place of it.
Alt text and captions for everything you show
A page built from images and film is the hardest kind to describe and the most worth describing, for the visitor using a screen reader and for the search engine reading the same text. Doing it by hand is why it never gets done.
Go through every image and video on the page and draft alt text for each one (what is actually in the frame, in a sentence, not the file name) plus a caption track for any video that has speech. Put them in a single list I can edit before you write any of it into the code, since I know what the work is and you are guessing.
Headline variants you can actually test
The line under the hero does more work than anything else on the page, and it is usually the first thing anyone writes and the last thing anyone revisits. Five rewrites in your own voice, judged side by side, is a better use of an afternoon than another pass on the spacing.
Read the whole page, then write five alternative versions of the hero headline and its supporting line: same claim, different emphasis: one leading on the craft, one on the outcome for the client, one on the kind of work we want more of, one shorter than everything else, one that names our niche outright. Keep each under twelve words and match the voice already on the page.
You bring no key and pick no provider: Lovable manages an API key per project, and if you do not name a model it chooses one from what you describe. Match the model to the job: fast and cheap for anything that runs on every record, stronger only where the reasoning matters. Send every feature above through that one integration.
Get a head start with our template
The guide above builds this page from nothing. Prefer to start from a finished one? Our template ships every section already built and animated, so your time goes on your work and your words.
Creative Studio Landing Page
The exact landing page this guide builds, packaged so you can open it, point it at your own backend, and make it yours from there. A one-page landing for AI video tools and creative studios, built to explain what you do and turn visitors into clients. A cinematic hero, your work and awards, services, a team grid, and a contact form flow in a single scroll - with strong calls to action and nothing to set up on the backend.
The key benefits of starting with a template
The slow parts (the motion, the responsive passes, the dark theme that stays readable) are already done and tested on real devices. What is left is the part only you can do.
Building the page from scratch
~63 hrs
Opening the template, already built
~1 hr
~62 hrs of building you skip
These measure different things deliberately: the first is building the page, the second is opening and running one that already exists. Replacing the demo content is time you spend either way, so it is counted on neither side, and on this template that job is bigger than most. The hero video points at our own storage bucket, six service images come from a stock library, the footer carries a placeholder address, and the contact form does not send yet. All four have to be dealt with before launch, and the guide above says how.
A page that already moves
Seven sections in one scroll (hero, featured work, awards, about, services, team, contact) with scroll-reveal animation and a glass-card treatment already tuned, rather than a blank file and a plan to tune them later.
Nothing at all to configure
No database, no keys, no environment file, no accounts to create. Install the dependencies, start it, and the page is running, which is genuinely rare and is the whole reason this template is quick to get live.
Tested on real devices
It holds together from a narrow phone to a wide monitor, checked on hardware rather than by dragging a browser window narrow. That is a week of fiddly work you inherit finished.
Clean code that is easy to extend
React and TypeScript with a full component library already installed and mostly unused, deliberately, so the next section you ask your AI coding tool for has parts to build from instead of needing new ones.
From founders who build on our templates
As an agency we live or die by clean handoffs. The code is structured well enough that we restyle, wire in the client’s data, and ship - no untangling someone else’s mess.
Matt GrahamFounder & CEO, RapidDevCommon questions
No, and this is the thing to know first. A form on a page with no backend has nowhere to post to until you give it somewhere, so wiring an endpoint is a real step in the build rather than a detail. Our template ships the form with its submit stubbed out (it waits a second, clears the fields, and sends nothing) and as shipped it shows no confirmation either, because the component that displays the "message sent" notice is never mounted. Both are quick fixes and the guide above covers them, but nobody should discover them from a visitor asking why they never heard back.
None of them. There is no data to store, nobody to sign in, and no environment variables to set on your host, which is why this page can go live on a free tier in an afternoon. The only service you connect is whatever receives your contact form, and both of the options above start free.
Aim for single-digit megabytes, muted, a few seconds long, and looping. It is wallpaper that moves, not a film. Give it a still frame to display while it loads so the page is never blank. Serving the file from your own host keeps it fully yours and loads no third-party code. An embed from a video platform gives you adaptive quality on a poor connection and brings their scripts with it. The featured film further down the page is the one that belongs on a video platform, since that is the one people actually watch.
It can, and the mechanism is worth understanding rather than fearing. Google measures how long the biggest thing on screen takes to appear, and on this page that is your hero. The figure at the top of this guide is the shape of the problem: fewer than half of mobile home pages currently pass all three of those measurements. The fix is not removing the video but a compressed file, a still frame shown immediately, and nothing else competing for the first moment of the page.
Every operating system lets a visitor say they prefer reduced motion, usually because movement makes them ill, and a browser passes that preference to your page. The right response is that all the content still arrives in the same order and the same place. It simply appears rather than sliding in, and the hero shows its still frame instead of playing. That is a handful of lines, and it is the difference between a page somebody can use and one they have to leave.
It can be, and it takes deliberate work. Dark themes fail contrast in a specific way: mid-grey text on near-black looks refined on a calibrated monitor and disappears on a phone in daylight. Check the contrast of every text colour, keep focus outlines visible rather than styling them away, caption anything with speech, and make sure the whole page can be reached with a keyboard in a sensible order. It is one of the ticked passes in the estimator above for exactly this reason.
Close to nothing. Static hosting is free on several of the hosts listed above, subject to their plan terms, and whatever receives your contact form has a free tier that comfortably covers a few inquiries a week. If you add one of the AI features, you pay the model provider for the text you actually send it. There is no per-project, per-minute, or per-editor charge anywhere, because there is no platform in the middle to charge you.
Yes, and this is the ordinary reason a one-pager grows up. Adding routes and a second page is a described change rather than a rebuild, and the same is true of a blog, a case-study page per project, or a version of the site in another language. Worth knowing before you start: a single page and a multi-page site want their navigation built differently, so if you already know a case-study page is coming, say so up front.
Yes, on every host above, with a free certificate in a few clicks. Do it before the address goes anywhere (into your Instagram bio, your email signature, a pitch deck) because moving people from a host’s subdomain to your own domain later means chasing every place you printed the old one.
No, and this is the sharpest contrast with renting the page. What you end up with is an ordinary folder of files built from ordinary code: move it between hosts in an afternoon, hand it to a developer, keep it through the next rebrand. Nothing about it depends on a platform staying in business or keeping its current pricing.
No. Everything happens in a browser tab: you describe what you want in the chat, and Lovable writes and previews the code. The setup section above covers the handful of things you connect first: an account, a plan, and somewhere for the contact form to send to.
A sketch on the Free plan is fine for finding out whether the layout works, and it has nowhere for a contact form to go. The one you launch is that same project with your real work in it, the form pointed at a real endpoint, and your own domain in front of it.
Build credits reset every day (Free) or on your billing cycle (paid plans). If you run out mid-session, the app you’ve built stays exactly as it is. You either wait for the reset or move up a credit tier to keep going right away.
References
Sources checked August 2026- 01Performance chapter (Core Web Vitals by page type), Web Almanac 2025, HTTP Archive. almanac.httparchive.org (published January 2026)
- 02Choosing the right plan (video storage, code access), Squarespace Help Center. support.squarespace.com
- 03Pricing plans and features, Squarespace. squarespace.com
- 04Pricing (site plans, editor seats), Framer. framer.com
- 05Plans and pricing (hosted video by plan), Format. format.com
- 06Pricing (projects by plan), Carbonmade. carbonmade.com
- 07Pricing (free tier, submission limits), Basin. usebasin.com
- 08Pricing (free tier, sending limits), Resend. resend.com
- 09Web developer hourly rates 2026 (freelance and agency benchmarks). developex.com
- 10Sign up, Lovable. lovable.dev
- 11Subscription plans (Free, Pro, Business), Lovable docs. docs.lovable.dev
- 12Connect Supabase, Lovable docs. docs.lovable.dev
- 13GitHub integration, Lovable docs. docs.lovable.dev
- 14Deployment, hosting, and ownership, Lovable docs. docs.lovable.dev
- 15Version history and reverting, Lovable docs. docs.lovable.dev
- 16Preview toolbar (Select elements), Lovable docs. docs.lovable.dev
- 17AI features and model selection, Lovable docs. docs.lovable.dev
- 18Custom domains, Lovable docs. docs.lovable.dev
This guide is general information. Third-party prices, plan limits, and market rates are quoted from the sources above and were last checked on the date shown. Vendors change them without notice, so confirm before you budget. Where a vendor’s own page would not show us its prices we quote no figure for it rather than borrowing one from elsewhere, and say so in the comparison. Build hours and the cost estimates derived from them are our own estimates, not quotes. Lovable is a product of Lovable Labs. Verify current capabilities and pricing before relying on them.