Variable-Driven Color
CSS custom properties enable runtime gradient control. JavaScript updates variables. Transitions happen automatically.
// Logo evolution through color
:root {
--logo-color-1: #4facfe;
--logo-color-2: #00f2fe;
--evolution-stage: 1;
}
.logo-text {
background: linear-gradient(45deg,
var(--logo-color-1),
var(--logo-color-2)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
This gradient responds to CSS variables
JavaScript Color Control
Stage-based palettes. Smooth transitions. No flicker.
// Evolution color mapping
const stageColors = {
1: ['#4facfe', '#00f2fe'], // Initial blue-purple
2: ['#f093fb', '#f5576c'], // Pink evolution
3: ['#4facfe', '#00f2fe'], // Blue transformation
4: ['#43e97b', '#38f9d7'], // Green emergence
5: ['#ffecd2', '#fcb69f'] // Golden completion
};
function evolveGradient(stage) {
const [color1, color2] = stageColors[stage];
document.documentElement.style.setProperty('--logo-color-1', color1);
document.documentElement.style.setProperty('--logo-color-2', color2);
document.documentElement.style.setProperty('--evolution-stage', stage);
}
Performance Considerations
GPU acceleration through transforms. Avoid layout thrashing. Batch property updates.
// Optimized transitions
.logo-text {
transform: translateZ(0); // Force hardware acceleration
will-change: background; // Hint browser optimization
backface-visibility: hidden; // Prevent flicker
}
// Batch updates
function updateLogoAppearance(stage, scale, opacity) {
const root = document.documentElement;
requestAnimationFrame(() => {
root.style.setProperty('--logo-stage', stage);
root.style.setProperty('--logo-scale', scale);
root.style.setProperty('--logo-opacity', opacity);
});
}
Interactive Responsiveness
Hover states enhance evolution. Active states provide feedback. Focus states maintain accessibility.
.logo-text:hover {
--logo-intensity: 1.2;
transform: scale(calc(1 + var(--evolution-stage) * 0.02));
}
.logo-text:active {
--logo-intensity: 0.8;
transform: scale(0.98);
}
// Dynamic intensity control
:root {
--logo-intensity: 1;
}
.logo-text {
filter: brightness(var(--logo-intensity));
}
Mobile Adaptations
Reduced motion support. Touch-friendly interactions. Battery-conscious animations.
@media (prefers-reduced-motion: reduce) {
.logo-text {
transition: none;
}
}
@media (hover: none) {
.logo-text:hover {
transform: none; // Disable hover on touch devices
}
}
Built for my portfolio's logo evolution. Demonstrates smooth state transitions without JavaScript animation libraries.