Platen

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.