Animations & Effects - Dev Showcase

Overview

The Dev Showcase features several advanced CSS animations and visual effects including particle systems, interactive glow panels, glassmorphism effects, and smooth transitions throughout the interface.

Animation Categories

Particle System

Animated floating particles in the header background

Glow Panels

Mouse-tracking gradient borders on interactive panels

Glassmorphism

Frosted glass effects with backdrop blur

Transitions

Smooth hover effects and state changes

Particle Animation System

Overview

The header features a particle system with 20 animated elements that float upward in curved paths with rotation.

HTML Structure

<div class="header-particles">
    <div class="particles-container">
        <div class="particle"></div>
        <div class="particle"></div>
        <!-- 20 particles total -->
    </div>
    <div class="header-content">
        <h2>#HELLO WORLD</h2>
        <h1>Developer Name</h1>
    </div>
</div>

Base Particle Styles

header-particles.css (lines 21-27)

.particle {
    position: absolute;
    background-color: #c0c0c0;
    border-radius: 50%;
    opacity: 0.3;
    animation: float linear infinite;
}

Float Animation Keyframes

Particles follow a complex curved path with opacity changes:

header-particles.css (lines 29-78)

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 0.5;
        transform: translate(calc(var(--tx) * 0.15), calc(var(--ty) * 0.1)) rotate(45deg);
    }

    15% {
        opacity: 0.7;
        transform: translate(calc(var(--tx) * 0.05), calc(var(--ty) * 0.25)) rotate(80deg);
    }

    28% {
        opacity: 0.6;
        transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.35)) rotate(140deg);
    }

    42% {
        opacity: 0.7;
        transform: translate(calc(var(--tx) * 0.25), calc(var(--ty) * 0.5)) rotate(200deg);
    }

    55% {
        opacity: 0.6;
        transform: translate(calc(var(--tx) * 0.65), calc(var(--ty) * 0.6)) rotate(260deg);
    }

    70% {
        opacity: 0.7;
        transform: translate(calc(var(--tx) * 0.75), calc(var(--ty) * 0.75)) rotate(310deg);
    }

    85% {
        opacity: 0.5;
        transform: translate(calc(var(--tx) * 0.9), calc(var(--ty) * 0.88)) rotate(340deg);
    }

    92% {
        opacity: 0.3;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) rotate(360deg);
        opacity: 0;
    }
}

The animation uses CSS custom properties (--tx and --ty) for each particle’s unique trajectory.

Particle Variations

Each particle has unique properties:

header-particles.css (lines 80-89)

.particle:nth-child(1) {
    width: 3px;
    height: 3px;
    left: 10%;
    top: 20%;
    --tx: 80px;
    --ty: -250px;
    animation-duration: 8s;
    animation-delay: 0s;
}

20 particles total, each with:

Unique size (2-4px)
Different starting position
Custom trajectory (--tx, --ty)
Varied duration (8s-10s)
Staggered delays (0s-1.6s)

Header Background

header-particles.css (lines 1-10)

.header-particles {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(180deg, #2d2d2d 0%, #0a0a0a 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

Glow Panel Effects

Interactive Border Glow

Glow panels feature a dynamic gradient border that follows the mouse cursor:

glow-panels.js (lines 3-24)

document.querySelectorAll('.glow-panel').forEach(panel => {
    panel.addEventListener('mousemove', function (e) {
        const rect = panel.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        const deltaX = x - centerX;
        const deltaY = y - centerY;

        let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
        angle = (angle + 360) % 360;

        panel.style.setProperty('--angle', `${angle}deg}`);
    });

    panel.addEventListener('mouseleave', function () {
        panel.style.setProperty('--angle', '0deg');
    });
});

CSS Implementation

panels-glow.css (lines 8-43)

.glow-panel {
    position: relative;
    background-color: var(--color-bg-tertiary);
    border-radius: 12px;
    padding: 2.5rem;
    min-height: 200px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--transition-speed) var(--transition-easing);
}

.glow-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(
        var(--angle, 0deg), 
        transparent 40%, 
        var(--color-accent-red) 50%, 
        transparent 60%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-speed) var(--transition-easing);
    pointer-events: none;
}

.glow-panel:hover::before {
    opacity: 1;
}

.glow-panel:hover {
    transform: translateY(-8px);
}

How It Works

Pseudo-element: Creates a gradient border using ::before
Linear gradient: Rotates based on mouse position (--angle)
Mask composite: Uses CSS masking to create border effect
Opacity transition: Fades in on hover
JavaScript tracking: Updates angle based on mouse coordinates

Glassmorphism Effects

CSS Variables

The project uses consistent glassmorphism styling:

:root {
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: rgba(0, 0, 0, 0.1);
}

Typical Glassmorphism Card

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Include both backdrop-filter and -webkit-backdrop-filter for Safari support.

Transition System

Global Transition Variables

:root {
    --transition-speed: 0.3s;
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Common Transition Patterns

Hover Lift
Scale on Hover
Rotate Button

.card {
    transition: all var(--transition-speed) var(--transition-easing);
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--color-border-hover);
}

.image-container img {
    transition: transform var(--transition-speed) var(--transition-easing);
}

.image-container:hover img {
    transform: scale(1.05);
}

.close-btn {
    transition: all var(--transition-speed) var(--transition-easing);
}

.close-btn:hover {
    transform: rotate(90deg);
    background-color: var(--color-accent-red-light);
}

Zoom-In Effect

modal.css (lines 24-41)

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: modalZoom 0.3s var(--transition-easing);
}

@keyframes modalZoom {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

Fade Transition

modal.css (lines 1-22)

.image-modal,
.certificate-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-speed) var(--transition-easing);
}

.image-modal.active,
.certificate-modal.active {
    opacity: 1;
    pointer-events: auto;
}

Carousel Animations

Smooth Slide Transition

carousel.css (lines 22-26)

.carousel-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Dragging State

carousel.css (lines 28-31)

.carousel-track.dragging {
    transition: none;
    cursor: grabbing;
}

Card Fade-In

carousel.css (lines 133-140)

.project-info-card {
    display: none;
    animation: fadeIn 0.4s var(--transition-easing);
}

.project-info-card.active {
    display: block;
}

Performance Optimizations

GPU Acceleration

Use transform and opacity for animations instead of positional properties:

/* Good - GPU accelerated */
.element {
    transform: translateY(-5px);
}

/* Avoid - triggers layout */
.element {
    top: -5px;
}

Will-Change Hint

For frequently animated elements:

.carousel-track {
    will-change: transform;
}

Use sparingly as it increases memory usage.

RequestAnimationFrame

JavaScript animations use RAF for smooth 60fps:

this.animationID = requestAnimationFrame(() => {
    this.track.style.transform = `translate3d(${pos}px, 0, 0)`;
});

Transform3D

Always use translate3d() instead of translateX():

// GPU accelerated
element.style.transform = `translate3d(${x}px, 0, 0)`;

Easing Functions

The project uses custom cubic-bezier easing:

:root {
    --transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

This creates a smooth “ease-in-out-quad” effect that feels natural and professional.

Common Easing Patterns

Effect	Easing Function	Use Case
Smooth in-out	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`	General transitions
Bounce	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`	Playful elements
Sharp	`cubic-bezier(0.4, 0.0, 0.2, 1)`	Material Design
Linear	`linear`	Particle animations

Gradient Animations

Header Text Gradient

header-particles.css (lines 315-322)

.header-content h1 {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ffffff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

Glow Panel Gradient

The glow effect uses a rotating gradient:

background: linear-gradient(
    var(--angle, 0deg), 
    transparent 40%, 
    var(--color-accent-red) 50%, 
    transparent 60%
);

CSS Custom Properties

Animations leverage CSS variables for dynamic control:

// JavaScript updates CSS variable
panel.style.setProperty('--angle', `${angle}deg}`);

/* CSS reads the variable */
.glow-panel::before {
    background: linear-gradient(var(--angle, 0deg), ...);
}

Browser Compatibility

Some effects require modern browser support:

Backdrop filter: Chrome 76+, Safari 9+, Firefox 103+
CSS Masking: All modern browsers
Custom properties: All modern browsers
CSS animations: All modern browsers
RequestAnimationFrame: All modern browsers

Fallbacks

/* Fallback for no backdrop-filter support */
@supports not (backdrop-filter: blur(10px)) {
    .glass-card {
        background: rgba(255, 255, 255, 0.15);
    }
}

Summary

The Dev Showcase animation system combines: ✓ CSS keyframe animations for particles
✓ JavaScript-driven interactive effects for glow panels
✓ GPU-accelerated transforms for smooth performance
✓ Glassmorphism with backdrop filters
✓ Consistent easing and timing
✓ Custom properties for dynamic styling

Always test animations on mobile devices to ensure smooth 60fps performance.

Getting Started

Core Concepts

Components

Customization

Deployment

​Overview

​Animation Categories

Particle System

Glow Panels

Glassmorphism

Transitions

​Particle Animation System

​Overview

​HTML Structure

​Base Particle Styles

​Float Animation Keyframes

​Particle Variations

​Header Background

​Glow Panel Effects

​Interactive Border Glow

​CSS Implementation

​Glassmorphism Effects

​CSS Variables

​Typical Glassmorphism Card

​Transition System

​Global Transition Variables

​Common Transition Patterns

​Modal Animations

​Zoom-In Effect

​Fade Transition

​Carousel Animations

​Smooth Slide Transition

​Dragging State

​Card Fade-In

​Performance Optimizations

​Easing Functions

​Common Easing Patterns

​Gradient Animations

​Header Text Gradient

​Glow Panel Gradient

​CSS Custom Properties

​Browser Compatibility

​Fallbacks

​Summary

Build docs developers (and LLMs) love

Overview

Animation Categories

Particle Animation System

Overview

HTML Structure

Base Particle Styles

Float Animation Keyframes

Particle Variations

Header Background

Glow Panel Effects

Interactive Border Glow

CSS Implementation

Glassmorphism Effects

CSS Variables

Typical Glassmorphism Card

Transition System

Global Transition Variables

Common Transition Patterns

Modal Animations

Zoom-In Effect

Fade Transition

Carousel Animations

Smooth Slide Transition

Dragging State

Card Fade-In

Performance Optimizations

Easing Functions

Common Easing Patterns

Gradient Animations

Header Text Gradient

Glow Panel Gradient

CSS Custom Properties

Browser Compatibility

Fallbacks

Summary