Oriel Studio

About this template

Oriel is a template for studios and freelancers who sell AI design, AI coding, agents and launch work. It has the calm, precise feel of Apple's product pages: big confident type, lots of space, and one colourful glow that makes the page feel alive.

The hero shows an AI design canvas instead of stock photography: a working-studio window with a sidebar, a mobile app mock, a code card and an agent chat. It floats on an animated gradient glow and flattens as you scroll. Below it, a row of services scrolls past and lights up in colour as each word crosses the centre of the screen.

Everything is built natively in Framer. There are no code components, so every section, animation and colour can be selected and edited on the canvas.

Pages: Home, Project (a CMS case-study page), Contact, and a custom 404.

Home sections: hero with the AI canvas and gradient glow, colour ticker, a grid of five service cards, a dark numbers band, step cards that stack as you scroll, a full-width project grid with a custom "View case" cursor, three pricing plans, an FAQ accordion, and a closing call-to-action.

CMS: a Projects collection with title, category, year, cover image, summary, result, services, accent colour and a rich-text case study. Six projects are fully written, with no lorem ipsum. Each project page picks up its own accent colour and links to the next project.

Motion: the headline blurs in, the hero window tilts back into place, sections rise in as you scroll, the process cards stack, and pages fade in on navigation. All of it uses Framer's built-in effects.

Contact form: works out of the box, with sending, success and error states on the button.

Reusable components: Button (five styles with hover and press states), Text Link, Navigation (desktop, plus a phone menu that opens and closes), FAQ Item, Submit Button, and the "View case" cursor.