Cedar is a dark Framer portfolio template for design studios, brand consultancies and creative directors who want their work to feel cinematic. White type sits on near-black, full-bleed photography brings in the color, and the navigation stays out of the way in a floating pill at the bottom of the screen.
A home page made of your work
The home page fits on one screen. The studio name sits on the left in large type, a one-line description on the right, and between them a 3D stack of project images. Scrolling moves the cards through the stack: the ones further back soften into a blur, and the card under the cursor comes into focus. Each card links to its project.
The top bar is the same on every page, with the logo, links to X, Threads and Behance, and your city next to a live local time. The floating pill holds Index, Works, About, Services and Contact, and marks the current page in white. Headlines and labels appear character by character.
Selected Works, in two views
The Works page opens with a large Selected Works title, filter chips for All, Branding, Editorial and Digital, and a switch between Stack and Grid.
Stack is an A to Z index. Each project name is set in large type with its initial letter at the right edge. Hover a row and it turns white while a preview of the project’s image appears over the list. Grid shows the same projects as large images in two columns, with their names below. The chosen filter and view are kept in the page address, so a filtered link can be shared as it is.
Case studies with numbers
Every project has its own page. The title appears letter by letter above the category, client, role and year, set in a monospace face. A full-width cover photo with a parallax effect follows, then a short About text.
The Impact section shows three cards, each with a large figure that counts up when it scrolls into view, a short label and one sentence of context. A two-column gallery comes next, and Previous and Next links with the neighboring project names keep visitors moving through the work.
- About: a studio statement over a full-bleed photo, a philosophy paragraph, an awards table with year, award, project and category, the services list, a team grid with portraits, names and roles, and a closing call to action that links to the contact page and your email.
- Services: the Services link jumps to five numbered rows on the About page, from Branding to Packaging, each with a one-line description. Award and service rows turn white on hover, and service rows show an image beside them.
- Contact: your address, phone and hours with a photo, next to a form for name, email, company and message with a privacy checkbox.
- Privacy Policy: sections on who is responsible, what is collected, legal basis, retention, hosting, cookies and visitor rights, ready for your own details.
- 404: a large 404 with Page not found and a Back to Home button set inside the zero.
Easy to make your own
All projects live in one Works collection: title, category, client, role, year, about text, cover, three impact figures with their labels and descriptions, and a gallery. A new project shows up in both views on the Works page and in the Previous and Next links. The awards table and the team grid each read from their own collection, and the About page’s statement and philosophy come from the CMS as well.
The cards in the home page stack are image layers that you swap and link yourself, so you choose which projects visitors see first. Colors and type are saved as color and text styles.
What’s included
- 7 pages: Home, Works, Project page, About, Contact, Privacy Policy and 404
- A 3D stack of project images on Home that moves on scroll, with depth blur and focus on hover
- A floating pill navigation, and a top bar with social links and local time
- Works in an A to Z Stack view and a Grid view, with category filters and hover previews
- Project pages with a parallax cover, impact figures that count up, a gallery and Previous and Next links
- An About page with a philosophy, an awards table, five services, a team grid and a call to action
- A contact form with name, email, company, message and a privacy checkbox
- CMS collections for works, awards and team, with 16 sample projects
- Character by character text reveals on headlines and labels
- Responsive layouts for desktop, tablet and phone
- A site-wide SEO title, description and social image
Set in Switzer, with Inter Display in the navigation and Fragment Mono for project details. Remix it in Framer, swap in your content, then publish.
