# Professional Template Patterns - Evidence-Based Analysis
**Date:** October 5, 2025
**Source:** Analysis of our proven professional animations
**Purpose:** Foundation for template system (NOT invented patterns)
---
## Analysis of EndlessBlinkShowcase.tsx (PROFESSIONAL QUALITY)
### What Makes It Professional:
**1. NoOverlapScene Structure (Lines 402-438)**
```typescript
<NoOverlapScene startFrame={0} endFrame={90} exitType="wipe-left">
<Scene1Username />
</NoOverlapScene>
<NoOverlapScene startFrame={75} endFrame={180} exitType="hard-cut">
<Scene2Stats />
</NoOverlapScene>
```
- ✅ NO overlapping content (impossible by structure)
- ✅ Clean transitions (wipe-left, hard-cut, wipe-up)
- ✅ Frame-based timing (not opacity guesswork)
**2. Moving Background Grid (Lines 32-41)**
```typescript
<svg>
<pattern id="grid" width="40" height="40">
<path stroke="#3a3a3a" strokeWidth="1.5" />
</pattern>
</svg>
// Continuous movement: translateX((frame * 2) % 40)
```
- ✅ Adds depth and motion
- ✅ Loops seamlessly (modulo 40)
- ✅ Subtle (opacity: 0.6)
**3. Particles on EVERY Scene (Lines 77, 109, 138, 168, 191, 215, 313, 348)**
```typescript
const particles = useParticles({
type: 'sparkles', // or 'energy', 'magic', 'confetti'
colors: ['#10b981', '#3b82f6', '#a78bfa'],
seed: 1
});
// Render in AbsoluteFill: particles.map(p => renderParticle(p))
```
- ✅ Different types per scene (variety)
- ✅ Always rendered (never static background)
- ✅ Unified transform (particles move WITH content - line 88)
**4. Pulsing Glows (Lines 46, 55, 349, 361-362)**
```typescript
const glowIntensity = Math.sin(frame * 0.1) * 0.2 + 0.5;
boxShadow: `0 0 60px rgba(16, 185, 129, ${glowIntensity * 0.4})`
border: `4px solid rgba(16, 185, 129, ${glowIntensity})`
```
- ✅ Creates "breathing" effect
- ✅ Adds visual interest to static holds
- ✅ Uses Math.sin (continuous motion)
**5. Breathing Cards (Lines 56, 367)**
```typescript
transform: `scale(${1 + Math.sin(frame * 0.05) * 0.008})`
```
- ✅ Subtle (0.008 = 0.8% variation)
- ✅ Continuous (never stops)
- ✅ Organic (Math.sin curve)
**6. Motion Blur (Lines 85, 113, 220, 240-242, 321)**
```typescript
const blurAmount = adj < 15 ? calculateMotionBlur(Math.abs(y)) : 0;
filter: blurAmount > 0 ? `blur(${blurAmount}px)` : 'none'
```
- ✅ Only during movement (conditional)
- ✅ Based on velocity
- ✅ Removed after entry completes
**7. Continuous Float on Text (Lines 92, 121, 127)**
```typescript
transform: `translateY(${Math.sin(frame * 0.06) * 10}px)`
```
- ✅ Text never static
- ✅ Subtle movement (10px max)
- ✅ Organic sine wave
**8. 3D Rotations (Lines 229, 271, 283, 295)**
```typescript
rotateY: interpolate(progress, [0, 1], [180, 0]) // 3D flip
transformStyle: 'preserve-3d'
```
- ✅ Adds depth dimension
- ✅ Professional polish
- ✅ Attention-grabbing
**9. Large, Readable Fonts (Lines 92, 121, 259, 332)**
- Username: 140px
- Stats: 120px
- Headers: 72px
- Card titles: 64px
- Body: 32px (minimum)
**10. Deep Shadows for Depth (Lines 55, 362)**
```typescript
boxShadow: '0 40px 120px rgba(0,0,0,0.6), 0 0 60px rgba(glow)'
```
- ✅ Creates layering
- ✅ Cards "float" above background
- ✅ Professional depth
---
## Template Requirements (ALL Templates Must Have):
### Mandatory Structure:
1. ✅ MovingGrid background component
2. ✅ NoOverlapScene for each section
3. ✅ Particles on every scene (different types)
4. ✅ Pulsing glows (Math.sin intensity)
5. ✅ Breathing animations (Math.sin scale)
6. ✅ Motion blur on transitions
7. ✅ Continuous float on text
8. ✅ Deep shadows (40px+ blur)
9. ✅ Large fonts (64px+ titles, 32px+ body)
10. ✅ Spring animations (not linear)
### Forbidden:
- ❌ Static black background
- ❌ Plain cards without glows
- ❌ Elements without continuous motion
- ❌ Overlapping scenes
- ❌ Missing particles
- ❌ Hardcoded colors (use PROJECT_CONFIG.md)
---
## Product Showcase Template - Proper Design
**Based on:** EndlessBlinkShowcase pattern + EnhancedFluentShowcase code mockup
### Structure:
```
Scene 1 (0-90f): Hero
- Moving grid background
- Sparkle particles
- Logo with pulsing glow + continuous float
- Title with text shadow
- Tagline fading in (staggered)
Scene 2 (75-240f): Features
- Energy particles (different from Scene 1)
- 3 feature cards side-by-side
- Each card: pulsing border, breathing scale, deep shadow
- Icons with continuous float
- Staggered entry (15f, 30f, 45f)
- Code mockup or UI representation (NOT just text)
Scene 3 (225-360f): Benefits/Social Proof
- Magic particles
- Customer quotes OR metrics visualization
- Animated counters (if stats)
- Glowing testimonial cards
Scene 4 (345-450f): CTA
- Confetti particles (celebratory)
- Large button with pulsing glow
- Website with blinking cursor
- Final logo reveal
```
### Visual Requirements:
- Background: Moving grid (2px/frame) + gradient
- Particles: 4 different types across scenes
- All cards: Glow borders (pulsing), deep shadows, breathing scale
- All text: Continuous float, proper fontFamily
- Transitions: Wipe or hard-cut (NO opacity crossfade)
---
## Next Steps:
1. Create research doc with 5 more animation analyses
2. Extract reusable components (MovingGrid, GlowCard, FloatingText)
3. Rebuild ProductShowcase using these patterns
4. Test matches professional quality
**Timeline: 1-2 days for proper research-based templates**
