d028e4b853
✨ Exact Recreation: - Tightened fire to contained elliptical base behind cards - Positioned 3 cards exactly as shown in reference image - Center card straight with fire icon, side cards angled ±15° - Fire now contained and focused, not sprawling 🔥 Contained Fire Design: - 3-layer elliptical fire base (base, middle, top) - 5 flame tongues reaching upward from base - Much more controlled and elegant fire shape - Fire positioned behind cards at bottom 15% �� Perfect Card Layout: - Left card: J♥ symbol, rotated -15°, positioned at 20% left - Right card: K♥ symbol, rotated +15°, positioned at 20% right - Center card: Fire icon, straight, positioned at center top - All cards properly layered above fire (z-index 10-15) 🎨 Refined Animation: - Subtle fire flickering with contained movement - Gentle card floating with realistic rotation - Center fire icon with soft glow animation - Perfect balance of movement without distraction Now matches the reference image exactly! 🎯
242 lines
No EOL
9 KiB
JavaScript
242 lines
No EOL
9 KiB
JavaScript
import { useTheme } from '../lib/theme-context';
|
|
|
|
export default function AnimatedFireLogo({ size = 100 }) {
|
|
const { theme } = useTheme();
|
|
|
|
// Theme-aware colors
|
|
const colors = {
|
|
dark: {
|
|
fireBase: '#FF8C42',
|
|
fireMiddle: '#FF6B35',
|
|
fireTop: '#FFF200',
|
|
cardBg: '#F6E3AE',
|
|
cardBorder: '#E38F36'
|
|
},
|
|
light: {
|
|
fireBase: '#FF6B35',
|
|
fireMiddle: '#F6891F',
|
|
fireTop: '#FFD04A',
|
|
cardBg: '#F6E3AE',
|
|
cardBorder: '#E38F36'
|
|
}
|
|
};
|
|
|
|
const currentColors = colors[theme] || colors.light;
|
|
|
|
return (
|
|
<div
|
|
className="deck-hearth-logo-container relative flex items-center justify-center"
|
|
style={{ width: size * 3.5, height: size * 2.4 }}
|
|
>
|
|
{/* Contained Fire Base */}
|
|
<div className="fire-base absolute" style={{
|
|
left: '50%',
|
|
bottom: '15%',
|
|
transform: 'translateX(-50%)',
|
|
zIndex: 1
|
|
}}>
|
|
<svg width={size * 2.2} height={size * 1.8} viewBox="0 0 220 180" fill="none">
|
|
{/* Main fire shape - more contained */}
|
|
<ellipse className="fire-layer-base" cx="110" cy="140" rx="90" ry="35" fill={currentColors.fireBase} opacity="0.8"/>
|
|
<ellipse className="fire-layer-mid" cx="110" cy="120" rx="75" ry="45" fill={currentColors.fireMiddle} opacity="0.9"/>
|
|
<ellipse className="fire-layer-top" cx="110" cy="90" rx="60" ry="35" fill={currentColors.fireTop} opacity="0.7"/>
|
|
|
|
{/* Flame tongues */}
|
|
<path className="flame-tongue-1" d="M80 90 Q75 70 85 50 Q90 70 80 90" fill={currentColors.fireTop} opacity="0.8"/>
|
|
<path className="flame-tongue-2" d="M110 80 Q105 55 115 30 Q120 60 110 80" fill={currentColors.fireTop} opacity="0.9"/>
|
|
<path className="flame-tongue-3" d="M140 90 Q145 70 135 50 Q130 70 140 90" fill={currentColors.fireTop} opacity="0.8"/>
|
|
<path className="flame-tongue-4" d="M95 85 Q92 65 100 45 Q105 70 95 85" fill={currentColors.fireMiddle} opacity="0.7"/>
|
|
<path className="flame-tongue-5" d="M125 85 Q128 65 120 45 Q115 70 125 85" fill={currentColors.fireMiddle} opacity="0.7"/>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Left Card */}
|
|
<div className="card-left absolute" style={{
|
|
left: '20%',
|
|
top: '35%',
|
|
transform: 'translate(-50%, -50%) rotate(-15deg)',
|
|
zIndex: 10
|
|
}}>
|
|
<svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
|
|
<rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
|
|
{/* Card corner symbol - bottom left */}
|
|
<g transform="translate(15, 120)">
|
|
<text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">J♥</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Right Card */}
|
|
<div className="card-right absolute" style={{
|
|
right: '20%',
|
|
top: '35%',
|
|
transform: 'translate(50%, -50%) rotate(15deg)',
|
|
zIndex: 10
|
|
}}>
|
|
<svg width={size * 1.2} height={size * 1.5} viewBox="0 0 120 150" fill="none">
|
|
<rect x="5" y="5" width="110" height="140" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
|
|
{/* Card corner symbol - top right */}
|
|
<g transform="translate(85, 20)">
|
|
<text x="0" y="15" fontSize="18" fill={currentColors.cardBorder} fontFamily="serif" fontWeight="bold">K♥</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Center Card - Front */}
|
|
<div className="card-center absolute" style={{
|
|
left: '50%',
|
|
top: '30%',
|
|
transform: 'translate(-50%, -50%)',
|
|
zIndex: 15
|
|
}}>
|
|
<svg width={size * 1.3} height={size * 1.6} viewBox="0 0 130 160" fill="none">
|
|
<rect x="5" y="5" width="120" height="150" rx="12" fill={currentColors.cardBg} stroke={currentColors.cardBorder} strokeWidth="3"/>
|
|
|
|
{/* Center fire symbol */}
|
|
<g transform="translate(65, 80)">
|
|
<path className="center-fire-icon" d="M0 20 Q-8 10 -5 0 Q0 -10 5 0 Q8 10 0 20 Q-3 15 0 10 Q3 15 0 20"
|
|
fill={currentColors.fireMiddle} opacity="0.9"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
.deck-hearth-logo-container {
|
|
filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.3));
|
|
}
|
|
|
|
/* Fire Animations - Subtle and contained */
|
|
.fire-layer-base {
|
|
animation: fire-base-flicker 3s ease-in-out infinite alternate;
|
|
}
|
|
|
|
.fire-layer-mid {
|
|
animation: fire-mid-flicker 2.5s ease-in-out infinite alternate;
|
|
animation-delay: -0.5s;
|
|
}
|
|
|
|
.fire-layer-top {
|
|
animation: fire-top-flicker 2s ease-in-out infinite alternate;
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
.flame-tongue-1 { animation: flame-dance-1 1.8s ease-in-out infinite alternate; animation-delay: -0.2s; }
|
|
.flame-tongue-2 { animation: flame-dance-2 2.2s ease-in-out infinite alternate; animation-delay: -0.7s; }
|
|
.flame-tongue-3 { animation: flame-dance-3 1.9s ease-in-out infinite alternate; animation-delay: -0.4s; }
|
|
.flame-tongue-4 { animation: flame-dance-4 2.1s ease-in-out infinite alternate; animation-delay: -0.9s; }
|
|
.flame-tongue-5 { animation: flame-dance-5 1.7s ease-in-out infinite alternate; animation-delay: -0.3s; }
|
|
|
|
/* Card Animations - Gentle floating */
|
|
.card-center {
|
|
animation: card-float-center 4s ease-in-out infinite;
|
|
}
|
|
|
|
.card-left {
|
|
animation: card-float-left 4.5s ease-in-out infinite;
|
|
animation-delay: -1s;
|
|
}
|
|
|
|
.card-right {
|
|
animation: card-float-right 4.2s ease-in-out infinite;
|
|
animation-delay: -2s;
|
|
}
|
|
|
|
.center-fire-icon {
|
|
animation: icon-glow 2s ease-in-out infinite alternate;
|
|
}
|
|
|
|
/* Fire Animation Keyframes */
|
|
@keyframes fire-base-flicker {
|
|
0% { transform: scaleY(1) scaleX(1); opacity: 0.8; }
|
|
100% { transform: scaleY(1.05) scaleX(1.02); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes fire-mid-flicker {
|
|
0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
|
|
100% { transform: scaleY(1.08) scaleX(0.98); opacity: 1; }
|
|
}
|
|
|
|
@keyframes fire-top-flicker {
|
|
0% { transform: scaleY(1) scaleX(1); opacity: 0.7; }
|
|
100% { transform: scaleY(1.12) scaleX(0.95); opacity: 0.85; }
|
|
}
|
|
|
|
@keyframes flame-dance-1 {
|
|
0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
|
|
100% { transform: scaleY(1.2) rotate(-3deg); opacity: 1; }
|
|
}
|
|
|
|
@keyframes flame-dance-2 {
|
|
0% { transform: scaleY(1) rotate(0deg); opacity: 0.9; }
|
|
100% { transform: scaleY(1.3) rotate(2deg); opacity: 1; }
|
|
}
|
|
|
|
@keyframes flame-dance-3 {
|
|
0% { transform: scaleY(1) rotate(0deg); opacity: 0.8; }
|
|
100% { transform: scaleY(1.15) rotate(4deg); opacity: 0.95; }
|
|
}
|
|
|
|
@keyframes flame-dance-4 {
|
|
0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
|
|
100% { transform: scaleY(1.25) rotate(-2deg); opacity: 0.9; }
|
|
}
|
|
|
|
@keyframes flame-dance-5 {
|
|
0% { transform: scaleY(1) rotate(0deg); opacity: 0.7; }
|
|
100% { transform: scaleY(1.18) rotate(3deg); opacity: 0.85; }
|
|
}
|
|
|
|
/* Card Float Animations */
|
|
@keyframes card-float-center {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) rotate(0deg) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(-50%, -52%) rotate(1deg) scale(1.02);
|
|
}
|
|
50% {
|
|
transform: translate(-48%, -50%) rotate(-0.5deg) scale(0.98);
|
|
}
|
|
75% {
|
|
transform: translate(-52%, -48%) rotate(1.5deg) scale(1.01);
|
|
}
|
|
}
|
|
|
|
@keyframes card-float-left {
|
|
0%, 100% {
|
|
transform: translate(-50%, -50%) rotate(-15deg) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(-48%, -52%) rotate(-14deg) scale(1.01);
|
|
}
|
|
50% {
|
|
transform: translate(-52%, -50%) rotate(-16deg) scale(0.99);
|
|
}
|
|
75% {
|
|
transform: translate(-50%, -48%) rotate(-13deg) scale(1.02);
|
|
}
|
|
}
|
|
|
|
@keyframes card-float-right {
|
|
0%, 100% {
|
|
transform: translate(50%, -50%) rotate(15deg) scale(1);
|
|
}
|
|
25% {
|
|
transform: translate(52%, -52%) rotate(14deg) scale(1.01);
|
|
}
|
|
50% {
|
|
transform: translate(48%, -50%) rotate(16deg) scale(0.99);
|
|
}
|
|
75% {
|
|
transform: translate(50%, -48%) rotate(13deg) scale(1.02);
|
|
}
|
|
}
|
|
|
|
@keyframes icon-glow {
|
|
0% { opacity: 0.9; transform: scale(1); }
|
|
100% { opacity: 1; transform: scale(1.1); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|