feat(brand): AnimatedLogo component + Space Grotesk display font
- src/app/layout.tsx: load Space_Grotesk via next/font/google as --font-display (weights 500/600/700, self-hosted, display:swap). - src/components/AnimatedLogo.tsx: standalone animated brand mark. Single-A monogram in #2563EB->#1E3A8A tile, Space Grotesk 700 wordmark, Inter tagline with accent rule. Stroke-draw + cyan signal pulse + sheen sweep + text fade. Pure SVG/CSS, no animation libs. Respects prefers-reduced-motion. Variants: onLight | onDark. - src/app/preview/animated-logo/page.tsx: preview route at /preview/animated-logo (noindex). Existing AvBeatLogo untouched — Header/Footer wiring unchanged. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ops-bot
277
src/components/AnimatedLogo.tsx
Normal file
277
src/components/AnimatedLogo.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
'use client';
|
||||
|
||||
import React, { useId } from 'react';
|
||||
|
||||
/**
|
||||
* AnimatedLogo
|
||||
* ============
|
||||
* Standalone preview component — NOT yet wired into Header or Footer.
|
||||
* The existing AvBeatLogo (static A+V monogram) keeps the production
|
||||
* surfaces. This component is the experimental brand mark.
|
||||
*
|
||||
* • Single-A monogram inside a rounded-square tile with the brand
|
||||
* gradient (#2563EB → #1E3A8A).
|
||||
* • Wordmark in Space Grotesk 700, loaded via next/font/google as
|
||||
* --font-display in app/layout.tsx.
|
||||
* • Tagline in Inter (var(--font-sans)) with an accent-rule (a short
|
||||
* blue dash) preceding the text.
|
||||
*
|
||||
* Animations (pure CSS, no library):
|
||||
* • Stroke-draw on mount ~1.1s on the A path
|
||||
* • Cyan signal pulse ~3.2s loop traversing the A
|
||||
* • Subtle sheen sweep ~4.4s loop diagonal across the tile
|
||||
* • Wordmark + tagline fade in ~0.9s, delayed until stroke finishes
|
||||
*
|
||||
* All animations halt under `prefers-reduced-motion: reduce`.
|
||||
*
|
||||
* Props
|
||||
* size — emblem edge length in px (default 64). Wordmark scales.
|
||||
* variant — 'onLight' (default) | 'onDark' — chooses text colors.
|
||||
* showTagline (default true) — toggle the "Inside the Future of Pro
|
||||
* AV" line.
|
||||
*
|
||||
* Accessibility: role="img" with aria-label="AV Beat" on the wrapper.
|
||||
*/
|
||||
export type AnimatedLogoVariant = 'onLight' | 'onDark';
|
||||
|
||||
interface Props {
|
||||
size?: number;
|
||||
variant?: AnimatedLogoVariant;
|
||||
showTagline?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function AnimatedLogo({
|
||||
size = 64,
|
||||
variant = 'onLight',
|
||||
showTagline = true,
|
||||
className = '',
|
||||
}: Props) {
|
||||
// useId for stable, SSR-safe unique IDs (the page can render two of
|
||||
// these and the gradients won't collide).
|
||||
const uid = useId().replace(/[:]/g, '');
|
||||
const tileGradId = `al-tile-${uid}`;
|
||||
const sheenGradId = `al-sheen-${uid}`;
|
||||
const wordmarkColor = variant === 'onDark' ? '#FFFFFF' : '#0F172A';
|
||||
const taglineColor = variant === 'onDark' ? '#CBD5E1' : '#475569';
|
||||
const accentColor = '#1D4ED8';
|
||||
|
||||
return (
|
||||
<span
|
||||
role="img"
|
||||
aria-label="AV Beat"
|
||||
className={`avb-anim-logo avb-anim-logo--${variant} ${className}`}
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: Math.round(size * 0.22),
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{/* ── EMBLEM ───────────────────────────────────────────────── */}
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 64 64"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
style={{ display: 'block', overflow: 'visible' }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={tileGradId} x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0%" stopColor="#2563EB" />
|
||||
<stop offset="100%" stopColor="#1E3A8A" />
|
||||
</linearGradient>
|
||||
<linearGradient id={sheenGradId} x1="-1" y1="0" x2="1" y2="0" gradientUnits="objectBoundingBox">
|
||||
<stop offset="0%" stopColor="#FFFFFF" stopOpacity="0" />
|
||||
<stop offset="50%" stopColor="#FFFFFF" stopOpacity="0.32" />
|
||||
<stop offset="100%" stopColor="#FFFFFF" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
{/* Clip the sheen to the rounded tile so the gradient sweep
|
||||
never bleeds outside the corner radius. */}
|
||||
<clipPath id={`al-clip-${uid}`}>
|
||||
<rect x="0" y="0" width="64" height="64" rx="14" ry="14" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
|
||||
{/* Tile */}
|
||||
<rect x="0" y="0" width="64" height="64" rx="14" ry="14" fill={`url(#${tileGradId})`} />
|
||||
|
||||
{/* Sheen sweep — a tall skewed band that travels left→right. */}
|
||||
<g clipPath={`url(#al-clip-${uid})`}>
|
||||
<rect
|
||||
className="al-sheen"
|
||||
x="-32"
|
||||
y="-8"
|
||||
width="32"
|
||||
height="80"
|
||||
fill={`url(#${sheenGradId})`}
|
||||
transform="skewX(-18)"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/*
|
||||
Single-A monogram. Built as two strokes so the stroke-draw
|
||||
animation cleanly traces the legs of the A and the crossbar.
|
||||
pathLength=100 normalizes the dash math regardless of unit.
|
||||
*/}
|
||||
{/* Left leg + right leg in one continuous stroke for a clean
|
||||
single dash-draw. The path goes (bottom-left → apex →
|
||||
bottom-right). */}
|
||||
<path
|
||||
className="al-stroke"
|
||||
d="M 14 50 L 32 14 L 50 50"
|
||||
fill="none"
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth="5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
pathLength={100}
|
||||
/>
|
||||
{/* Crossbar — a second short stroke, dashed-drawn in sequence. */}
|
||||
<path
|
||||
className="al-stroke al-stroke--bar"
|
||||
d="M 21 36 L 43 36"
|
||||
fill="none"
|
||||
stroke="#FFFFFF"
|
||||
strokeWidth="4"
|
||||
strokeLinecap="round"
|
||||
pathLength={100}
|
||||
/>
|
||||
|
||||
{/*
|
||||
Cyan signal pulse — a small dot that rides along the same
|
||||
path as the A's outline. We re-use the left-leg-to-apex-to-
|
||||
right-leg path via <animateMotion> attached to a path
|
||||
reference. Falls back gracefully when reduce-motion is on.
|
||||
*/}
|
||||
<circle r="2.6" fill="#7DD3FC" className="al-pulse" cx="14" cy="50">
|
||||
<animateMotion
|
||||
dur="3.2s"
|
||||
repeatCount="indefinite"
|
||||
rotate="0"
|
||||
keyTimes="0;1"
|
||||
keyPoints="0;1"
|
||||
>
|
||||
<mpath href={`#al-path-${uid}`} />
|
||||
</animateMotion>
|
||||
</circle>
|
||||
{/* Hidden path the pulse rides along. Same geometry as visible
|
||||
A so the dot tracks the silhouette. */}
|
||||
<path id={`al-path-${uid}`} d="M 14 50 L 32 14 L 50 50" fill="none" stroke="none" />
|
||||
</svg>
|
||||
|
||||
{/* ── WORDMARK + TAGLINE ───────────────────────────────────── */}
|
||||
<span
|
||||
className="al-text"
|
||||
style={{ display: 'inline-flex', flexDirection: 'column', gap: Math.round(size * 0.08), minWidth: 0 }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontFamily: 'var(--font-display), "Space Grotesk", Inter, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
fontWeight: 700,
|
||||
fontSize: Math.round(size * 0.5),
|
||||
letterSpacing: '-0.012em',
|
||||
color: wordmarkColor,
|
||||
lineHeight: 0.95,
|
||||
textTransform: 'uppercase',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
AV BEAT
|
||||
</span>
|
||||
{showTagline && (
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: Math.round(size * 0.12),
|
||||
fontFamily: 'var(--font-sans), -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
fontWeight: 500,
|
||||
fontSize: Math.round(size * 0.165),
|
||||
letterSpacing: '0.06em',
|
||||
color: taglineColor,
|
||||
lineHeight: 1.1,
|
||||
whiteSpace: 'nowrap',
|
||||
textTransform: 'uppercase',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: Math.round(size * 0.28),
|
||||
height: 2,
|
||||
background: accentColor,
|
||||
borderRadius: 1,
|
||||
}}
|
||||
/>
|
||||
Inside the Future of Pro AV
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
|
||||
{/*
|
||||
Component-scoped CSS. Keeping it inline (style jsx-free) so the
|
||||
component is portable to any Next.js page without globals leak.
|
||||
prefers-reduced-motion blanket-disables every keyframe.
|
||||
*/}
|
||||
<style>{`
|
||||
.avb-anim-logo .al-stroke {
|
||||
stroke-dasharray: 100;
|
||||
stroke-dashoffset: 100;
|
||||
animation: al-draw 1.1s 0.05s cubic-bezier(0.65, 0, 0.35, 1) forwards;
|
||||
}
|
||||
.avb-anim-logo .al-stroke--bar {
|
||||
animation-delay: 0.85s;
|
||||
animation-duration: 0.55s;
|
||||
}
|
||||
.avb-anim-logo .al-sheen {
|
||||
animation: al-sheen 4.4s 1.1s cubic-bezier(0.55, 0.05, 0.45, 0.95) infinite;
|
||||
}
|
||||
.avb-anim-logo .al-pulse {
|
||||
opacity: 0;
|
||||
animation: al-pulse-fade 0.6s 1.05s ease-out forwards,
|
||||
al-pulse-glow 3.2s 1.65s ease-in-out infinite;
|
||||
}
|
||||
.avb-anim-logo .al-text {
|
||||
opacity: 0;
|
||||
transform: translateX(-4px);
|
||||
animation: al-fade-in 0.9s 1.0s cubic-bezier(0.2, 0, 0, 1) forwards;
|
||||
}
|
||||
@keyframes al-draw {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
@keyframes al-sheen {
|
||||
0% { transform: translateX(-30px) skewX(-18deg); }
|
||||
55% { transform: translateX(110px) skewX(-18deg); }
|
||||
100% { transform: translateX(110px) skewX(-18deg); }
|
||||
}
|
||||
@keyframes al-pulse-fade {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes al-pulse-glow {
|
||||
0%, 100% { filter: drop-shadow(0 0 1px rgba(125, 211, 252, 0.6)); }
|
||||
50% { filter: drop-shadow(0 0 6px rgba(125, 211, 252, 0.95)); }
|
||||
}
|
||||
@keyframes al-fade-in {
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.avb-anim-logo .al-stroke {
|
||||
stroke-dashoffset: 0 !important;
|
||||
animation: none !important;
|
||||
}
|
||||
.avb-anim-logo .al-sheen,
|
||||
.avb-anim-logo .al-pulse,
|
||||
.avb-anim-logo .al-text {
|
||||
animation: none !important;
|
||||
}
|
||||
.avb-anim-logo .al-text { opacity: 1; transform: none; }
|
||||
.avb-anim-logo .al-pulse { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user