[ Article ]

Framer website examples, and how I built each one

Six live Framer sites I designed and built, what makes each one work, and how long they took.

Framer website examples, and how I built each one, article cover
[ In this article ]

Six sites, and how each one was made

These are six Framer websites I designed and built in 2026. Each one is live, and each has a case study that walks through the build. They took between two days and two weeks.

I picked them because they’re very different from each other: an AI startup, a developer product, a consultant, an estate agency, a set of rental villas and a design studio. Between them, they show most of what Framer can do.

1. Cirro, an AI startup in a soft 3D sky

The Cirro website, an AI startup home page set in a soft 3D sky with a portrait and the word Cirro in large white letters

Built in: 2 weeks. Type: concept website.

Almost every AI site I looked at was dark, with a purple gradient. Cirro goes the other way: a bright sky, rounded type and a character with a face. I designed her before any page, then sampled the whole colour palette from her hair, her coat and the sky behind her.

The homepage runs as a day in three acts, morning, work and night, and your scroll moves through them. Soap bubbles trail the cursor and buttons fill with sky when you touch them.

See it on my work page or get the free template.

2. Opero, software for AI agents

A section of the Opero website, four numbered ideas for building software agents want, each with a proof block beside it

Built in: 1 week. Type: Framer template.

The brief was one line from Y Combinator: the next trillion users on the internet won’t be people. I set it as the headline and built the page for a product whose customers are agents.

The page is written for builders. Each of its four ideas makes a claim and comes with a proof block underneath, like an API call or a price per call, so the page reads like the documentation an agent checks first.

See it on my work page or get the template.

3. Maren Holt, a fractional CMO

The Maren Holt website, a personal site for a fractional CMO with a small photo and the headline Hey, I’m Maren on faint graph paper

Built in: 5 days. Type: Framer template.

A fractional CMO runs marketing for a few companies at once, usually one day a week each. The site is built around an org chart with her seat already filled, and the price is written as an invoice with a three-month trial stamp.

It took thirteen hero versions and one full reset to get there. It also ships with an AI skill that rewrites the site from your CV.

See it on my work page or get the template.

4. Marea, an estate agency on the Costa Brava

The Marea website, a coastline photo with the headline Find a home on the Costa Brava and a search bar for location, type and budget

Built in: 2 days. Type: Framer template.

Most property sites show a house as ten photos and a price. On Marea each home launches with a short film, a full gallery and a calculator that adds tax, fees and upkeep into one monthly figure.

The search really works: filters are saved in the link, so a search can be shared. I also cut the hero film from 72 MB to 1.4 MB so it plays straight away.

See it on my work page or get the template.

5. Brisa, three private houses on one bay

The Brisa website, two stacked house cards, the green Agave garden house and an orange house on the hill, each with a photo

Built in: 4 days. Type: Framer template.

Most hotel sites open with a dark photo and a thin serif. Brisa is bright, and each house has its own colour that follows it from its card to its page and its guest quote.

Every button is one custom component that leans toward the cursor and fills with colour from where you enter. Keyboard users get the same animation, and it switches off for anyone whose device asks for less motion.

See it on my work page or get the template.

6. Cobalt, a small design studio

A section of the Cobalt Studio website, an eight-week project timeline with six sign-offs under the heading Eight weeks, six sign-offs

Built in: 4 days. Type: Framer template.

Clients want to know what a studio does, how long it takes and what it costs before they write. Cobalt answers all three on the homepage, with five service tabs, an eight-week timeline and three plans.

It uses no code components at all. The service tabs are plain Framer variants, so a studio can rename a tab or change a price without a developer.

See the template.

A good site shows the job itself. The design follows from that.

What they have in common

  • One idea each. A face, an org chart, a cost sheet, a colour per house. The rest of the design comes from it.

  • Labs before building. Every homepage section was tried several ways before one was kept.

  • Content in the CMS. Homes, houses, case studies and posts are collections, so they can be updated without touching the layout.

  • Phones designed on purpose. Every page has its own tablet and phone layout.

What Framer is good at, judging by these

  • Sites where the design has to do the selling.

  • Motion that would take days to code by hand: scroll effects, hovers, page transitions.

  • Quick builds. Four of these six took a week or less.

  • Handing over. Owners edit copy and CMS content without breaking anything.

What is a Framer website?

A website designed, built and hosted in Framer, a visual tool where you lay out pages on a canvas and publish them directly. No separate hosting or code is needed.

Can I use one of these as my own site?

Yes. Each one is a template in my library, and Cirro is free. You can remix it and make it yours, or I can set it up for you.

How long does a Framer website take to build?

These took two days to two weeks. A custom site for a client usually takes me about two weeks for up to 10 pages, and four to six weeks for a bigger one.

If you want a site built like these, start a project. The full set of case studies is on my work page.

Gwatsin

Written by Gwatsin

Designer and developer

[ Next article ]

A therapist website template that feels safe to land on →

A therapist website template that feels safe to land on, article cover

LET’S BUILD

LET’S BUILD

SOMETHING

SOMETHING

exquisite

TOGETHER

TOGETHER