Orvel
Project Overview
- Industry
- Creative
- Pages
- 6
- Platform
- Astro








The Brief
An independent brand and digital studio wanted a site that behaves like its work. Founders and marketing teams needed to see real projects, what the studio makes, who is on the floor in two cities and how to start, without the usual wall of agency adjectives or a template that could belong to anyone.
The Approach
Let the work lead and keep the page quiet. The hero is a close-up portrait that responds like liquid under the pointer, the studio reel opens out of the statement, and sixteen projects sit in a pinned deck with each client name set in its own typeface. Services turn on a capability drum, the journal is a magazine that turns its pages, and the two cities share one split scene with live clocks.
The Outcome
A visitor can play the reel, move through the sixteen projects, read the studio journal, see both offices in real time and start a project from a short brief in a few minutes. Pages stay quick on a phone, motion respects reduced-motion settings, and every project and note is a content file the studio edits without touching the design.
About the Project
The site includes Home, Work with sixteen project pages, Services, Studio, Journal with thirty notes, and Contact, plus Privacy and 404 pages.
The visual direction is a light editorial page that turns dark only where it helps, with a wide grotesk for display and a monospace for labels. The hero is a close-up portrait that moves like liquid under the pointer, the studio reel opens out of the opening statement, each client name is set in its own typeface in a pinned project deck, services turn on a capability drum, and the journal is a magazine that turns its pages as you scroll.
Built as a fast static site in Astro with plain TypeScript, GSAP, Lenis and WebGL, Orvel keeps its projects and journal notes as content files, respects reduced-motion settings and works on a phone. The studio reel, the two-city scene with live clocks and the project brief form are built in.
Pages
Home
About
Services
Projects
Case Studies
Blogs
Contact
Privacy Policy
Features
Forms
Blog
404 Page
Custom Code
Animation



