Refract

Refract is a portfolio template for art directors and designers. A liquid glass lens greets visitors on the home page; behind it sits a calm editorial system that runs on the CMS.

A liquid glass hero

The lens follows the cursor, splits when you swipe through it and bursts on click.

Case studies in five chapters

Context, Challenge, Process, Solution and Outcome, with a live index, metrics and credits. Empty chapters hide themselves.

Your work, in motion

Scroll Film plays a video as visitors scroll, with chapters and a progress bar. Device Mockup puts your screens on a 3D phone and laptop that follow the cursor.

Lab, Journal and every screen

Side projects and writing each get their own collection. Light and dark mode, on desktop, tablet and phone.

Built for Framer AI

Refract is an Agent Template: a Design System page and three skills tell Framer AI how to edit it.

• /design-system for any change, from styles to your details

• /case-study interviews you, then writes a project into the CMS

• /new-page builds a page from the existing sections

The agent is optional: you can edit everything yourself, on the canvas or in the CMS.

Easy to make yours

Your name, menu and footer are edited from one panel, and an illustrated Getting started page walks you through every step.

What's included

• Pages: Home, Work, Project, Lab, Journal, About, Contact, Legal, 404 and Getting started

• CMS: Projects, Lab and Journal, with sample content

• Fonts: Instrument Serif, Geist and Geist Mono, free on Google Fonts

Credits and support

The glass lens is inspired by “Distorting Typography” by SannyV (@sanny.verkissen) on the Spline Community, licensed CC BY 4.0, rebuilt from scratch in Three.js.

Support: templates@gabrieledesantis.com