I built a premium creative agency website template with cinematic page transitions, case study storytelling system, interactive design playbook, booking modal, and a film-grain noise overlay — 11 pages covering portfolio, services with tiered pricing, team, blog with content blocks, and more
Most agency templates make one of two mistakes: they're either too generic (hero image, services grid, contact form, done) or they try to be so "creative" that navigation becomes a puzzle. Real creative agencies need something that showcases their work beautifully while still being usable by the clients they're trying to attract.
Obsidian Studio is my answer — a template that feels like it belongs to a world-class design studio, without sacrificing the practicality of a conversion-focused website.
The name sets the tone. Obsidian — dark, refined, volcanic glass. The entire visual language builds from this concept:
Color Palette: A zinc-based neutral scale from #fafafa to #09090b, with warm gold accent (#D4A574) and copper hover state (#B87333). Cream (#FAF7F2) for light mode backgrounds, charcoal (#1A1A1A) for dark mode. The gold accent is warmer and more muted than typical agency templates — it whispers luxury rather than shouting it.
Typography: Outfit (geometric sans-serif) for body and UI elements, Playfair Display (editorial serif) for headings. This contrast between modern and classical creates visual tension that agencies love — it says "we understand tradition AND innovation."
Film Grain: An SVG fractal noise overlay at 3% opacity with mix-blend-mode: overlay gives every page a subtle filmic texture. It's the kind of detail you don't consciously notice but would miss if it were removed.
Every route change in Obsidian Studio is a moment. The template.tsx wrapper applies Framer Motion fade + slide transitions between pages, creating a cinema-like browsing experience. Combined with section-level stagger animations and dramatic easing curves, navigating the site feels like watching a reel.
Obsidian Studio
This is the template's crown jewel. The /work section features 8 case studies across branding, web design, product design, architecture, and fashion. Each case study uses a story block system:
This block-based approach means each case study follows the same narrative arc while having unique content. The work grid has category filtering (All, Branding, Web, Product, Architecture, Fashion) for easy browsing.
The services page goes beyond a simple list. Each of the 4 services (Brand Identity, Web Design, Product Design, Creative Direction) includes:
This gives potential clients enough information to self-qualify before reaching out, reducing low-intent inquiries.
The /playbook route is something you rarely see in agency templates — an interactive design system showcase page. It displays the template's own typography, colors, component library, and spacing system as a browsable reference. For agencies, this doubles as a portfolio piece demonstrating their design system thinking.
The contact page includes a booking modal with calendar-based call scheduling. Instead of just a contact form, it lets prospects pick a time slot for a discovery call — a pattern proven to increase conversion rates for service businesses.
The blog system uses typed content blocks: text, quote, image, and code. Each post has calculated reading time and category tags. This block-based approach means blog posts have rich, varied layouts without requiring a CMS.
JSON-driven content — 7 data files (site.json, home.json, work.json, services.json, team.json, blog.json, legal.json) define all content. TypeScript types in lib/types.ts enforce data shape, making customization type-safe.
Component organization — Split into sections (10 homepage components), features (complex components like case study blocks and work grid), layout (header, footer, navigation), and UI primitives (button, card, input, modal, etc.).
Custom hooks — 8 hooks including useMagneticButton (cursor-follow effect on CTAs), useScrollReveal (intersection observer animations), useFocusTrap (modal accessibility), and useTheme (dark mode management).
No external UI libraries — Every component from Button to Drawer to Lightbox is hand-built. This means zero dependency conflicts and complete control over the design language.
System-aware with localStorage persistence. The toggle in the header detects OS preference initially, then respects the user's manual choice. The theme key obsidian-theme persists between sessions.
Built with excellence in mind
Optimized for speed & scalability
Battle-tested with real users
Responsive across all devices
Maintainable & well-documented
Explore other projects
I rebuilt my brass manufacturing corporate website from scratch — new brand identity, modernized color system, static export optimization, local product photography, and cleaner URL architecture.
I built a production-grade corporate website for a brass component manufacturer and exporter based in Jamnagar, Gujarat. Fully static, zero-backend architecture with a custom design token system, 55+ product catalog with detailed specifications
I built a premium fashion e-commerce template with a complete shopping experience — product catalog with 6-type filtering, cart with promo codes, 4-step checkout, wishlist, collections, quick view, recently viewed tracking, dark mode, and page transitions