Refract Studio

Refract is a bold, dark website for brand and motion studios. Oversized condensed headlines run edge to edge while a real-time 3D scene moves behind them. Three scenes come built in: Field, a wordmark made of drifting particles; Monolith, a stack of slabs; and Glass, a polished glass knot. They are drawn in code with three.js, so there is no Spline file and no video to replace.

More kit than template: 13 pages, 21 section variants, 2 ready-made Home pages, 17 code components, 7 agent skills and a Guide page. Every section is its own component with desktop, tablet and phone versions, and its text, images and links are component variables, so you can swap a Hero Scene for a Hero Statement or a Work Orbit for a Work Feature without rebuilding anything. The Guide lists the 7 skills (new-case-study, new-page, rebrand, swap-section, copy-voice, launch-check and tune-scene) and 15 prompts you copy with one click.

The style button in the nav switches the whole demo between Field, Monolith and Glass: the 3D scene and the site colors change together. Pages: Home and Home 2, Work with filters and a grid or list view, case study pages from the CMS, Services, Engagements with retainer plans, a monthly or quarterly toggle and a live estimate calculator, Studio, Careers with expanding roles, Journal, Contact with a form and a book-a-call picker, Legal, Guide, a Sections gallery that shows all 21 variants and a custom 404. Fully responsive. Uses only 2 CMS collections (Projects and Journal), so it works on the Framer Basic plan. Colors (7 styles) and text styles (21) are set in one place. SEO-ready: every page has its own title and description, and case study and Journal pages take theirs from each CMS entry.

Free updates and email support: after purchase, your remix link appears right away on the order confirmation and in your receipt email, and every future update is free. Questions: support@bobob.app