Platen Framer Template

About this template

Platen is a dark Framer portfolio template for art directors, with every project in one index and a cover that changes beside it as you hover a row.

Home: one screen with the whole body of work. Each row shows the title, client, discipline and year, and the cover on the right comes into focus as you hover. On phones the list steps through the work on its own, and a live clock with your city sits in the header.

Project page: the title, details and text stay pinned on the left while the cover and gallery scroll on the right. Previous and Next follow your own project order.

Info: a statement, about text, services, clients and recognition beside your portrait. Contact: email, studio address, representation and social links.

Everything is set in small uppercase Inter on one 12-column grid, with dark colour tokens you change in one place. One Projects CMS collection feeds the index, the hover previews and the case studies.

What's included

7 pages: Home, Info, Contact, Project, Imprint, Styleguide, 404

Index home with a hover cover preview: Settle (fade, zoom and focus) or Curtain

Work Row component with a compact variant for tablet and phone

Automatic stepping through the work on touch screens

Live clock in your time zone

Case study page with sticky details, cover, gallery, Previous and Next

Sticky portrait on Info, full-height photograph on Contact

Projects CMS sorted by your own number

Full-screen accent menu on phone

Dark colour tokens, uppercase Inter text styles and a Styleguide page

Per-page SEO titles, descriptions, social images and favicon

Responsive, respects reduced motion

Good to know

Set the hover transition at the top of PlatenIndex.tsx (TRANSITION: "settle" or "curtain"), and the clock's time zone at the top of PlatenClock.tsx (TIME_ZONE, such as "Europe/Berlin"). Both lists on Home must keep the same sorting so each row matches its cover.