Barber Cam - Animated Hero Component

Component Features

🎨 Design

Clean, modern aesthetic inspired by classic barbershop tradition. Professional and timeless with subtle sophistication.

⚡ Performance

CSS-based animation runs smoothly at 60fps. Lightweight SVG implementation with no external dependencies.

📱 Mobile-First

Fully responsive design scales perfectly from phones to desktop. Touch-friendly and optimized for all screen sizes.

♿ Accessibility

Respects prefers-reduced-motion. Semantic HTML and proper ARIA labels ensure inclusive experience.

🎬 Animation

Smooth 4-second rotation cycle using CSS transforms. No jitter, no heavy CPU usage. Battery-friendly implementation.

🔧 Easy to Use

Drop-in HTML/CSS/SVG component. No JavaScript required. Copy-paste ready for any project.

Technical Details

/* Core Animation */
@keyframes rotatePole {
  0% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); }
}

.pole-spin {
  animation: rotatePole 4s linear infinite;
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

/* Respects user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .pole-spin {
    animation: none;
    opacity: 0.8;
  }
}

Why This Implementation Works

SVG Rotation: Uses CSS transforms on the SVG rect element for smooth, GPU-accelerated rotation.
No Canvas: Pure SVG + CSS means lightweight, scalable, and searchable content.
Gradient + Pattern: Creates authentic barber pole stripes without heavy filters or complexity.
Drop Shadow: Subtle depth effect using CSS filter (no SVG filter overhead).
Linear Animation: 4-second cycle at constant speed mimics real barber pole motion.
Accessibility First: Respects reduced-motion preference; provides fallback visual state.

Brand Compliance

✓ Text: "EST. 2024" and "A CUT ABOVE" (brand wording preserved)
✓ Colors: Red (#c41e3a), White, Blue (#1e40af) - traditional barber palette
✓ Style: Premium, timeless, professional (not cartoonish)
✓ Animation: Smooth, subtle rotation (no flashy effects)
✓ Performance: Mobile-optimized, battery-friendly, up to 60fps
✓ Text: "EST. 2024" and "A CUT ABOVE" (updated from "THE CUT ABOVE" per brand guidance)
✓ Colors: Red (#c41e3a), White, Blue (#1e40af) - traditional barber palette
✓ Style: Premium, timeless, professional (not cartoonish)
✓ Animation: Smooth, subtle rotation (no flashy effects)
✓ Performance: Mobile-optimized, battery-friendly, 60fps

Classic Barbershop Style

A CUT ABOVE