Motion Studio
The most animated template that still scores 95+ on Lighthouse.
Next.js 14TypeScriptTailwindGSAPFramer Motion
$297one-time
96/100 LHPreview →
Deloryen Studio
Next.js Templates with Premium Animations
Animation separates memorable websites from forgettable ones. But animation without performance discipline separates slow websites from fast ones. The animation system in every Deloryen template is built on a principle that most animation-heavy templates violate: the Lighthouse score does not drop below 95. This is achieved through GPU-accelerated transforms only, code-split animation libraries loaded per route, prefers-reduced-motion compliance, and animation timing that serves the user experience rather than demonstrating the developer's library knowledge. The result is a site that moves with purpose, loads without compromise, and converts without distraction.
- GSAP ScrollTrigger or Framer Motion (per template)
- Scroll-triggered reveals and parallax
- Page transitions with AnimatePresence
- Magnetic cursor with mix-blend-mode
- Staggered children animations
- Counter animations for metrics
- GPU-accelerated transforms only
- prefers-reduced-motion compliance
Available Templates
Scroll Narrative
Scroll-driven storytelling template with GSAP pin sections.
Next.js 14TypeScriptTailwindGSAP
$247one-time
97/100 LHPreview →
Spring Portfolio
Framer Motion portfolio with spring physics and gesture interactions.
Next.js 14TypeScriptTailwindFramer Motion
$197one-time
97/100 LHPreview →
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
How do animations maintain 95+ Lighthouse scores?
+
All animations use GPU-accelerated CSS properties (transform, opacity) that do not trigger layout or paint. Animation libraries are code-split per route and loaded as client components. Server components are unaffected.
Can I choose between GSAP and Framer Motion?
+
Each template uses one animation system. GSAP templates offer ScrollTrigger and timeline control. Framer Motion templates offer spring physics and gesture interactions. Both maintain performance standards.
Are animations disabled for users with motion sensitivity?
+
Yes. All animations respect the prefers-reduced-motion media query automatically. No configuration required. Users with motion sensitivity receive static, non-animated content.
Can I add custom animations to a Deloryen template?
+
Yes. The animation system is documented and componentized. Custom animations use the same GPU-accelerated approach. Documentation covers adding animations without affecting performance.
Your move