Motion Dept — 3D

Motion Dept is a portfolio template for film and motion studios. Every thumbnail on the home page is a sheet of fabric. Hover and it billows, click and drag to pull it across the page, let go and it springs back flat. Switch to Index and the projects become a list you can browse with the arrow keys, while the preview image moves like cloth too.

It suits film studios, directors, cinematographers, editors and motion designers who want visitors to touch the work before they press play.

What makes it different

The cloth is a real physics simulation rendered in WebGL, with light and shading on the folds, so a pinch in one corner pulls the whole sheet. It runs only while someone interacts. On touch devices or with reduced motion on, the images show as normal.

In the Index view, a white bar wipes across each column in blocky steps when a row becomes active. Click a row, hover to peek, or step through with ↑ ↓. The header clock shows each visitor's own city and local time.

What's included

A Grid home page and an Index page, linked by a toggle in the header. Both read from one Projects CMS collection with 15 sample projects, so the site looks finished the moment you open it. Desktop, tablet and phone layouts, 5 color styles and 3 text styles, set in JetBrains Mono with a Silkscreen wordmark.

Easy to make your own

The effects are three code components with every setting in the properties panel. Cloth Image has intensity, speed, shading and drag. Index Row has its own colors. Live Clock shows the visitor's location or a fixed city of your choice. Change the color styles once and the whole site follows.

Need a portfolio built around your own work instead? I take on custom Framer projects for studios and creatives. Tell me what you have in mind at hey@critain.com.