🔥 Add Animated Fire Logo Component
✨ Beautiful Animated Fire Logo: - Created AnimatedFireLogo component based on CodePen animation - Realistic fire flickering with multiple flame layers - Theme-aware colors (bright for dark mode, warm for light mode) - Floating particle effects with individual animations - Scalable size prop for different use cases 🎨 Enhanced Login Experience: - Replaced static fire emoji with animated logo - 100px size for prominent branding - Smooth flickering animations at different speeds - Wood base and floating sparks for realism - Perfect integration with fire glow background 🌙 Theme Support: - Dark mode: Bright yellows and oranges for visibility - Light mode: Warm browns and golds for elegance - Consistent with Deck Hearth fire theme - CSS-in-JS for dynamic theming The login page now has a mesmerizing animated fire logo that perfectly captures the Deck Hearth brand
This commit is contained in:
Randall Stillwell
parent
2163b9ea0e
commit
cdb2e5f8ac
2 changed files with 204 additions and 1 deletions
200
components/AnimatedFireLogo.js
Normal file
200
components/AnimatedFireLogo.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
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;
|
||||
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
|
||||
}
|
||||
|
||||
.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%)'
|
||||
};
|
||||
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%)'
|
||||
};
|
||||
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%)'
|
||||
};
|
||||
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'};
|
||||
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'};
|
||||
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'};
|
||||
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(-2deg) scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) rotate(1deg) scaleY(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%) rotate(-1deg) scaleY(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fire-flicker-left {
|
||||
0% {
|
||||
transform: rotate(-3deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(2deg) scaleY(1.1) scaleX(0.9);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-1deg) scaleY(0.9) scaleX(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fire-flicker-right {
|
||||
0% {
|
||||
transform: rotate(2deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-1deg) scaleY(1.05) scaleX(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(3deg) scaleY(0.95) scaleX(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-1 {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.7;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-15px) scale(1.2);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-2 {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) scale(0.8);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particle-float-3 {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0px) scale(1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-18px) scale(1.5);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import AuthLayout from '../components/AuthLayout';
|
||||
import AnimatedFireLogo from '../components/AnimatedFireLogo';
|
||||
|
||||
export default function Login() {
|
||||
const router = useRouter();
|
||||
|
|
@ -67,7 +68,9 @@ export default function Login() {
|
|||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">🔥</div>
|
||||
<div className="mb-6 flex justify-center">
|
||||
<AnimatedFireLogo size={100} />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold gradient-text-flame mb-2">
|
||||
Welcome to Deck Hearth
|
||||
</h2>
|
||||
|
|
|
|||
Loading…
Reference in a new issue