Studio NOIR
Dark editorial design studio template with GSAP sequences and magnetic cursor.
Next.js 14TypeScriptTailwindGSAPFramer Motion
$297one-time
96/100 LHPreview →
Deloryen Studio
Next.js Design Studio Templates
Design studios are in the business of demonstrating taste before they are hired to apply it. Every typographic decision, every animation timing curve, every layout proportion on the studio website is being evaluated by the potential client who is simultaneously deciding whether to trust the studio with their own brand. Deloryen design studio templates are built with GSAP and Framer Motion animation systems that demonstrate technical craft, editorial grid layouts that communicate visual intelligence, and a project showcase architecture that makes the work impossible to scroll past. The site is the pitch. Make it the best pitch you have ever delivered.
- GSAP scroll-driven narrative animations
- Editorial grid with asymmetric project layouts
- Magnetic cursor system
- Project pages with full-screen photography
- Service and process pages with animation
- Studio culture and team showcase
- Awards and recognition section
- New business inquiry with brief template
Available Templates
What Every Template Includes
Production Standards. Not Marketing Claims.
| Specification | Other Marketplaces | Deloryen Studio |
|---|---|---|
| Lighthouse Performance | 62–74 | 95–100 |
| Next.js Architecture | Pages Router common | App Router only |
| TypeScript Coverage | Partial or absent | 100% strict mode |
| CSS System | Bootstrap (200kb+) | Tailwind (10kb purged) |
| Structured Data | Rarely included | Every page |
| GEO Optimization | None | Built-in |
| Performance Guarantee | None | Documented + testable |
| License | Complex, tiered | Clear commercial terms |
FAQ
Frequently Asked Questions
Does the design studio template include the cursor animation system?
+
Yes. The magnetic cursor with mix-blend-mode:difference effect, hover state expansion, and button warping is included as a documented, configurable component.
Can I disable animations for users who prefer reduced motion?
+
Yes. All animations respect the prefers-reduced-motion media query. Users with motion sensitivity receive a static version automatically. Accessibility compliance is maintained throughout.
How is the Lighthouse score maintained with heavy animations?
+
Animations are implemented using CSS transforms and opacity — GPU-accelerated properties that do not trigger layout or paint. GSAP and Framer Motion are loaded lazily. The animation system does not affect Lighthouse Performance.
Is the design studio template suitable for branding agencies?
+
Yes. The template architecture works for brand strategy firms, visual identity studios, UX agencies, and creative consultancies — any studio where the aesthetic quality of the website is itself a portfolio piece.
Your move