About Ogee
Ogee is a free portfolio template for independent designers and small studios. The home page pairs a large serif headline with a curved WebGL ribbon of your projects. Drag it and the cards follow your pointer. Flick it and it coasts to a stop on the nearest card. A horizontal trackpad scroll or the arrow keys move it one card at a time. Under the focused card the title, year, category and a "View case" link are real text, so they stay readable, selectable and indexable. Click the focused card to open its case study.
What you get
- A remix link to the Framer project on the Framer Marketplace. The demo site is the same project.
- A 6-page Framer site: Home, Work, Case study (CMS detail page), About, Contact and 404
- A Projects CMS with 8 sample projects. The same collection drives the 3D ribbon, the Work grid, the numbered index on Home and the case pages. Add a project in the CMS and it appears on the ribbon
- The Ogee ribbon component: drag with inertia, snap to the nearest card, horizontal wheel/trackpad, arrow keys plus Home, End and Enter. Controls for colours, fonts, card radius, curvature, card gap, focus position and the hint text
- LocalTime: a "Copenhagen 23:12, available from January 2027" line that shows your city's current time. Set the time zone, 12/24 h and the availability text
- Case study pages with year, category, client, role, summary, a gallery and rich-text body, plus a Next project link
- About page with bio, services, selected clients and recognition. Contact page with a Framer form (name, email, budget, message) and your email address
- Desktop, laptop, tablet and phone layouts
- Plan: a free Framer account can remix, edit and publish it on a framer.website subdomain. A custom domain needs a paid Framer plan.
Good to know
- The 3D ribbon runs in Preview and on the published site. In the Framer editor it shows a still poster of the cards
- Phones get a native 2D swipe list of the same projects (with a counter and the focused card's details), not WebGL
- Visitors who turn on "reduce motion" see a static grid of the projects instead of the 3D ribbon
- Browsers without WebGL show the projects as a 2D scrolling row with arrow buttons
- The ribbon loads three.js (pinned v0.169.0) from the jsDelivr CDN when it first comes into view. If that load fails, visitors get the 2D row
- The designer, clients and projects are made up. Photos are from Unsplash
- The contact form uses Framer forms. There is no CRM, booking or payment integration
