A site for an independent design studio: its name as wide as the page, a reel of client sites, the work, services and a way to get in touch.
A studio site that sets its name in a bold sans across the whole page. Under it, an ink-blue panel holds a browser that plays the studio's client sites in turn, with a rail of the projects beside it; then one sentence on what the studio is, the work with a filter by discipline, the services, the clients and a few numbers, news and open roles, and the email. Around the home page sit a work index and a case study for each project, the services with a page each, the studio and its people, careers with a post per role, a journal, a contact page with a project enquiry form, privacy, imprint and a 404. The sample studio is Tessera, in Lisbon, and every word lives in its content files.
It is the free template: every section is built from free Eased components and installs on its own from the free registry, and the starter downloads without an account. The client sites are drawn with gradients, type and shapes rather than photos, so there is nothing to license. Light and dark themes, reduced motion and keyboard use are handled the same way they are in the library.
The case-study reel
A beat after the panel comes into view, the browser's address bar types a client's domain, a load line runs under the toolbar and the client's site comes in line by line. It holds, the next domain types, and after four sites it rests on the last with Replay. A rail of tabs beside the window jumps to any site, a pause button stops it, and it pauses itself offscreen. Under reduced motion it is one still you can switch with the tabs.
Home/
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Intro
What the studio is in one serif sentence, the page's heading, with one way into the work.
Selected work
A grid of project covers with a filter by discipline; the grid reflows on a spring.
Clients
Client names as wordmarks in a ruled grid, then three numbers that roll up once.
Latest and careers
News, writing and a role as cards with drawn covers, then the open roles as a ruled list.
Contact
The question, a line on how the studio replies, and the email set large with a copy button.
Work/work
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Work index
Every project in one ruled grid: a small cover, the client, the project, its disciplines and its year.
Contact
The question, a line on how the studio replies, and the email set large with a copy button.
Case studies
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Case study
A project's story on its own page: the client's site drawn as wide as the page, the challenge beside the facts, what the studio made, three outcomes, the credits and the next project.
Services/services
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Services pages
The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work.
Contact
The question, a line on how the studio replies, and the email set large with a copy button.
Service pages
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Services pages
The services index as one ruled list, and a page per service with a typical project's facts, what it delivers, how it runs week by week and recent work.
Contact
The question, a line on how the studio replies, and the email set large with a copy button.
Studio/studio
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Studio
What the studio is, its people with initials avatars and how a project runs, with a line to the open roles.
Clients
Client names as wordmarks in a ruled grid, then three numbers that roll up once.
Careers/careers
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Careers
The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link.
Job posts
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Careers
The open roles as one ruled grid with what everyone gets and how the studio hires, and a job post per role with its facts and an apply link.
Journal/journal
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Journal posts
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Contact/contact
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Legal
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Legal page
Privacy and imprint as a ruled list of parts, under a note that the text is a sample to replace.
Not found (404)/404
Header
One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.
Not found
The template's 404: the code beside the studio's mark with its tile missing, a line and the pages people usually want.
Download the starter
A Next.js app with every section, the content file and the Eased tokens. Unzip it, run pnpm install and pnpm dev, then make it yours in one file.
Install one section
Each section is its own free registry item, with the components it uses. Add it to an app that already has Eased set up.
npx shadcn add https://eased.dev/r/agency-reel.json