4d4540c3e5
✨ Sharp Flame Edges: - Replaced rounded borders with custom clip-path polygons - Created jagged, realistic flame shapes for all fire elements - Sharp pointed tips and irregular edges like real fire - Different polygon patterns for main flame, left flame, and right flame 🎨 Enhanced Animation: - Added more complex flickering with 4 keyframe stages - Enhanced scaling and rotation variations - Added subtle hue-rotate filters for color shifting - More realistic flame movement patterns 🌟 Improved Particles: - Sharp-edged particles using octagonal clip-paths - Added rotation animations to particle floating - Different polygon shapes for visual variety - More dynamic movement with combined transforms The fire logo now looks much more realistic with sharp, jagged flame edges that flicker naturally
290 lines
No EOL
8.3 KiB
JavaScript
290 lines
No EOL
8.3 KiB
JavaScript
import { useTheme } from '../lib/theme-context';
|
|
|
|
export default function AnimatedFireLogo({ size = 80 }) {
|
|
const { theme } = useTheme();
|
|
|
|
return (
|
|
<div
|
|
className="fire-logo-container relative flex items-center justify-center"
|
|
style={{ width: size, height: size }}
|
|
>
|
|
{/* Main Fire */}
|
|
<div className="fire-main">
|
|
<div className="fire-left"></div>
|
|
<div className="fire-main-flame"></div>
|
|
<div className="fire-right"></div>
|
|
</div>
|
|
|
|
{/* Additional flames for more realistic effect */}
|
|
<div className="fire-particle fire-particle-1"></div>
|
|
<div className="fire-particle fire-particle-2"></div>
|
|
<div className="fire-particle fire-particle-3"></div>
|
|
|
|
{/* Base/Log */}
|
|
<div className="fire-base"></div>
|
|
|
|
<style jsx>{`
|
|
.fire-logo-container {
|
|
transform: scale(${size / 80});
|
|
}
|
|
|
|
.fire-main {
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.fire-left, .fire-main-flame, .fire-right {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.fire-main-flame {
|
|
width: 40px;
|
|
height: 50px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: ${theme === 'dark'
|
|
? 'linear-gradient(to top, #ff6b35 0%, #f7931e 50%, #fff200 100%)'
|
|
: 'linear-gradient(to top, #d84315 0%, #ff6f00 50%, #ffab40 100%)'
|
|
};
|
|
clip-path: polygon(
|
|
20% 100%,
|
|
10% 85%,
|
|
5% 70%,
|
|
15% 55%,
|
|
8% 40%,
|
|
20% 30%,
|
|
15% 15%,
|
|
30% 10%,
|
|
25% 0%,
|
|
45% 5%,
|
|
50% 0%,
|
|
65% 8%,
|
|
70% 15%,
|
|
85% 30%,
|
|
92% 40%,
|
|
85% 55%,
|
|
95% 70%,
|
|
90% 85%,
|
|
80% 100%
|
|
);
|
|
animation: fire-flicker 0.8s ease-in-out infinite alternate;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fire-left {
|
|
width: 30px;
|
|
height: 40px;
|
|
left: 5px;
|
|
background: ${theme === 'dark'
|
|
? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
|
|
: 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
|
|
};
|
|
clip-path: polygon(
|
|
25% 100%,
|
|
15% 80%,
|
|
5% 60%,
|
|
20% 45%,
|
|
10% 25%,
|
|
25% 15%,
|
|
20% 5%,
|
|
40% 0%,
|
|
60% 10%,
|
|
80% 20%,
|
|
90% 35%,
|
|
85% 50%,
|
|
95% 65%,
|
|
85% 80%,
|
|
75% 100%
|
|
);
|
|
animation: fire-flicker-left 1.2s ease-in-out infinite alternate;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fire-right {
|
|
width: 25px;
|
|
height: 35px;
|
|
right: 8px;
|
|
background: ${theme === 'dark'
|
|
? 'linear-gradient(to top, #ff4500 0%, #ff6b35 50%, #ffa500 100%)'
|
|
: 'linear-gradient(to top, #bf360c 0%, #d84315 50%, #ff6f00 100%)'
|
|
};
|
|
clip-path: polygon(
|
|
20% 100%,
|
|
10% 85%,
|
|
5% 65%,
|
|
15% 50%,
|
|
8% 30%,
|
|
25% 20%,
|
|
20% 5%,
|
|
40% 0%,
|
|
65% 8%,
|
|
85% 25%,
|
|
90% 40%,
|
|
85% 60%,
|
|
95% 75%,
|
|
88% 90%,
|
|
80% 100%
|
|
);
|
|
animation: fire-flicker-right 1s ease-in-out infinite alternate;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fire-particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.fire-particle-1 {
|
|
width: 8px;
|
|
height: 8px;
|
|
top: 10px;
|
|
left: 15px;
|
|
background: ${theme === 'dark' ? '#fff200' : '#ffab40'};
|
|
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
|
|
animation: particle-float-1 2s ease-in-out infinite;
|
|
}
|
|
|
|
.fire-particle-2 {
|
|
width: 6px;
|
|
height: 6px;
|
|
top: 15px;
|
|
right: 12px;
|
|
background: ${theme === 'dark' ? '#ffa500' : '#ff6f00'};
|
|
clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
|
|
animation: particle-float-2 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.fire-particle-3 {
|
|
width: 4px;
|
|
height: 4px;
|
|
top: 8px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: ${theme === 'dark' ? '#ff6b35' : '#d84315'};
|
|
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
|
|
animation: particle-float-3 2.2s ease-in-out infinite;
|
|
}
|
|
|
|
.fire-base {
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 50px;
|
|
height: 8px;
|
|
background: ${theme === 'dark'
|
|
? 'linear-gradient(to right, #8b4513, #a0522d, #8b4513)'
|
|
: 'linear-gradient(to right, #5d4037, #6d4c41, #5d4037)'
|
|
};
|
|
border-radius: 50%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
@keyframes fire-flicker {
|
|
0% {
|
|
transform: translateX(-50%) rotate(-1deg) scaleY(1) scaleX(1);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: translateX(-50%) rotate(0.5deg) scaleY(1.08) scaleX(0.95);
|
|
filter: hue-rotate(2deg);
|
|
}
|
|
50% {
|
|
transform: translateX(-50%) rotate(1deg) scaleY(1.05) scaleX(1.02);
|
|
filter: hue-rotate(-1deg);
|
|
}
|
|
75% {
|
|
transform: translateX(-50%) rotate(-0.5deg) scaleY(0.98) scaleX(1.05);
|
|
filter: hue-rotate(3deg);
|
|
}
|
|
100% {
|
|
transform: translateX(-50%) rotate(-1deg) scaleY(0.95) scaleX(0.98);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fire-flicker-left {
|
|
0% {
|
|
transform: rotate(-2deg) scaleY(1) scaleX(1);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: rotate(1deg) scaleY(1.12) scaleX(0.88);
|
|
filter: hue-rotate(-2deg);
|
|
}
|
|
50% {
|
|
transform: rotate(2deg) scaleY(1.08) scaleX(0.92);
|
|
filter: hue-rotate(1deg);
|
|
}
|
|
75% {
|
|
transform: rotate(-1deg) scaleY(0.95) scaleX(1.08);
|
|
filter: hue-rotate(-1deg);
|
|
}
|
|
100% {
|
|
transform: rotate(-2deg) scaleY(0.90) scaleX(1.12);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes fire-flicker-right {
|
|
0% {
|
|
transform: rotate(1.5deg) scaleY(1) scaleX(1);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: rotate(-0.8deg) scaleY(1.1) scaleX(1.05);
|
|
filter: hue-rotate(2deg);
|
|
}
|
|
50% {
|
|
transform: rotate(-2deg) scaleY(1.05) scaleX(0.95);
|
|
filter: hue-rotate(-1deg);
|
|
}
|
|
75% {
|
|
transform: rotate(2.5deg) scaleY(0.92) scaleX(1.08);
|
|
filter: hue-rotate(1deg);
|
|
}
|
|
100% {
|
|
transform: rotate(3deg) scaleY(0.95) scaleX(0.90);
|
|
filter: hue-rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes particle-float-1 {
|
|
0%, 100% {
|
|
transform: translateY(0px) scale(1) rotate(0deg);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translateY(-15px) scale(1.2) rotate(180deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes particle-float-2 {
|
|
0%, 100% {
|
|
transform: translateY(0px) scale(1) rotate(0deg);
|
|
opacity: 0.6;
|
|
}
|
|
50% {
|
|
transform: translateY(-12px) scale(0.8) rotate(-180deg);
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
@keyframes particle-float-3 {
|
|
0%, 100% {
|
|
transform: translateX(-50%) translateY(0px) scale(1) rotate(0deg);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: translateX(-50%) translateY(-18px) scale(1.5) rotate(360deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|